This commit is contained in:
duanfuxiang
2025-06-14 13:44:03 +08:00
parent 5c24993ab9
commit 93a3c0969d
5 changed files with 115 additions and 19 deletions

View File

@@ -16,7 +16,7 @@ export default function MarkdownFetchUrlsContentBlock({
finish: boolean
}) {
const containerRef = useRef<HTMLDivElement>(null)
const [isOpen, setIsOpen] = useState(true)
const [isOpen, setIsOpen] = useState(false)
React.useEffect(() => {
if (finish && applyStatus === ApplyStatus.Idle) {

View File

@@ -13,7 +13,7 @@ export default function MarkdownReasoningBlock({
}>) {
const { isDarkMode } = useDarkModeContext()
const containerRef = useRef<HTMLDivElement>(null)
const [isOpen, setIsOpen] = useState(true)
const [isOpen, setIsOpen] = useState(false)
useEffect(() => {
if (containerRef.current) {

View File

@@ -1,4 +1,4 @@
import { ChevronDown, ChevronRight, CheckCheck } from 'lucide-react'
import { CheckCheck, ChevronDown, ChevronRight } from 'lucide-react'
import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'
import { useDarkModeContext } from "../../../contexts/DarkModeContext"
@@ -11,7 +11,8 @@ const processContent = (content: string): { serverName: string; processedContent
const firstLine = lines[0];
// 提取 serverName
const serverNameMatch = firstLine.match(/\[use_mcp_tool for '([^']+)'\]/);
const serverNameRegex = /\[use_mcp_tool for '([^']+)'\]/;
const serverNameMatch = serverNameRegex.exec(firstLine);
const serverName = serverNameMatch ? serverNameMatch[1] : '';
// 移除第一行并重新组合内容
@@ -27,7 +28,7 @@ export default function MarkdownToolResult({
}>) {
const { isDarkMode } = useDarkModeContext()
const containerRef = useRef<HTMLDivElement>(null)
const [isOpen, setIsOpen] = useState(true)
const [isOpen, setIsOpen] = useState(false)
const { serverName, processedContent } = React.useMemo(() => processContent(content), [content]);
@@ -40,12 +41,12 @@ export default function MarkdownToolResult({
return (
processedContent && (
<div
className={`infio-chat-code-block has-filename infio-reasoning-block`}
className={`infio-chat-code-block-response has-filename infio-reasoning-block`}
>
<div className={'infio-chat-code-block-header'}>
<div className={'infio-chat-code-block-header-filename'}>
<CheckCheck size={10} className="infio-chat-code-block-header-icon" />
response from tool
<div className={'infio-chat-code-block-response-header'}>
<div className={'infio-chat-code-block-response-header-filename'}>
<CheckCheck size={10} className="infio-chat-code-block-response-header-icon" />
{t('response_from_tool')}
<span className="infio-mcp-tool-server-name">{serverName}</span>
</div>
<button
@@ -71,6 +72,110 @@ export default function MarkdownToolResult({
</div>
<style>
{`
.infio-chat-code-block-response {
position: relative;
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-s);
margin-top: -10px;
margin-bottom: 12px;
}
.infio-chat-code-block-response.infio-reasoning-block {
max-height: 200px;
overflow: hidden;
}
.infio-chat-code-block-response code {
padding: 0;
}
.infio-chat-code-block-response-header {
display: none;
justify-content: space-between;
align-items: center;
font-size: var(--font-smallest);
padding: 0 var(--size-4-1) 0 0;
}
.infio-chat-code-block-response:hover .infio-chat-code-block-response-header {
position: absolute;
top: calc(var(--size-4-3) * -1);
right: var(--size-4-1);
display: flex;
}
.infio-chat-code-block-response.has-filename .infio-chat-code-block-response-header {
display: flex;
border-bottom: 1px solid var(--background-modifier-border);
background-color: var(--background-secondary);
border-radius: var(--radius-s) var(--radius-s) 0 0;
height: calc(var(--size-4-8) - var(--size-4-1));
}
.infio-chat-code-block-response.has-filename:hover .infio-chat-code-block-response-header {
position: inherit;
top: 0;
left: 0;
}
.infio-chat-code-block-response-header-filename {
padding-left: var(--size-4-2);
font-size: var(--font-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.infio-chat-code-block-response-header-icon {
margin-right: 6px;
}
.infio-chat-code-block-response-header-button {
display: flex;
gap: var(--size-4-1);
right: 0;
font-family: var(--font-interface);
padding: 0;
font-size: var(--font-small);
font-weight: var(--font-medium);
color: var(--text-muted);
}
.infio-chat-code-block-response.has-filename .infio-chat-code-block-response-header-button {
gap: 0;
overflow: hidden;
min-width: fit-content;
height: 100%;
}
.infio-chat-code-block-response.has-filename
.infio-chat-code-block-response-header-button
button {
box-shadow: none;
border: 0;
padding: 0 var(--size-4-2);
border-radius: 0;
background-color: var(--background-primary);
font-size: var(--font-medium);
height: 100%;
cursor: pointer;
&:hover {
background-color: var(--background-modifier-hover);
}
}
.infio-chat-code-block-response-header-button button {
display: flex;
gap: var(--size-4-1);
font-size: var(--font-ui-smaller);
}
.infio-chat-code-block-response-content {
margin: 0;
}
.infio-mcp-tool-server-name {
color: var(--text-accent);
border-radius: 4px;