+ {status === 'processing' ? (
+ <>
+
+ );
+};
+
+export default ActivityIndicator;
diff --git a/browser/src/components/AssistantFooter/index.module.css b/browser/src/components/AssistantFooter/index.module.css
new file mode 100644
index 000000000..627195f9b
--- /dev/null
+++ b/browser/src/components/AssistantFooter/index.module.css
@@ -0,0 +1,9 @@
+.assistantFooter {
+ display: flex;
+ gap: 8px;
+}
+
+.assistantFooterIcon {
+ width: 18px !important;
+ height: 18px !important;
+}
diff --git a/browser/src/components/AssistantFooter/index.tsx b/browser/src/components/AssistantFooter/index.tsx
index d95e32407..48fa43348 100644
--- a/browser/src/components/AssistantFooter/index.tsx
+++ b/browser/src/components/AssistantFooter/index.tsx
@@ -1,24 +1,21 @@
-import {
- CheckOutlined,
- CopyOutlined,
- DislikeOutlined,
- LikeOutlined,
- ReloadOutlined,
-} from '@ant-design/icons';
-import { Button, Flex, Typography } from 'antd';
-import { last } from 'lodash-es';
-import { useTranslation } from 'react-i18next';
+import { CheckOutlined } from '@ant-design/icons';
+import { Button, Flex, Spin } from 'antd';
+import { useEffect, useState } from 'react';
import { useSnapshot } from 'valtio';
-import { useChatState } from '@/hooks/provider';
-import { actions, state } from '@/state/sender';
-import { type UIMessage, UIMessageType } from '@/types/message';
-import { mergeMessages } from '@/utils/mergeMessages';
-
-const { Text } = Typography;
+import { useClipboard } from '@/hooks/useClipboard';
+import CopyIcon from '@/icons/copy.svg?react';
+import DislikeIcon from '@/icons/dislike.svg?react';
+import LikeIcon from '@/icons/like.svg?react';
+import RefreshIcon from '@/icons/refresh.svg?react';
+import type { AppStatus } from '@/state/chat';
+import { state } from '@/state/sender';
+import type { Message } from '@/types/chat';
+import ActivityIndicator from '../ActivityIndicator';
+import styles from './index.module.css';
interface AssistantFooterProps {
- message: UIMessage;
- status: 'submitted' | 'streaming' | 'ready' | 'error';
+ message: Message;
+ status: AppStatus;
}
const AssistantFooter: React.FC
-
-
- {t('plan.approveDescription')}
-
- }
- className="shrink-0"
- onClick={async () => {
- actions.updateMode('agent');
- approvePlan(message as any);
- }}
- >
- {t('plan.approve')}
-
-
-
- );
+ useEffect(() => {
+ if (isCopySuccess) {
+ const timer = setTimeout(() => {
+ setIsCopySuccess(false);
+ }, 2000);
+ return () => clearTimeout(timer);
}
+ }, [isCopySuccess]);
+
+ if (mode === 'plan' && status === 'idle') {
+ // const lastMessage = message;
+ // if (
+ // lastMessage?.type === UIMessageType.Text &&
+ // lastMessage.mode === 'plan'
+ // ) {
+ // return (
+ //
+ //
+ //
+ // {t('plan.approveDescription')}
+ //
+ // }
+ // className="shrink-0"
+ // onClick={async () => {
+ // actions.updateMode('agent');
+ // console.log('approvePlan', message);
+ // }}
+ // >
+ // {t('plan.approve')}
+ //
+ //
+ //
+ // );
+ // }
+ }
+
+ if (status !== 'idle') {
+ return (
+
+
+ );
}
return (
-
+
+ );
+ case 'fetch':
+ return (
+
+
+ );
+ case 'glob':
+ return params.pattern;
+ case 'grep':
+ return params.pattern;
+ case 'ls':
+ return params.dir_path;
+ default:
+ return toolName;
+ }
+ };
+
+ const onApprove = (option: ApprovalResult) => {
+ snap.approvalModal?.resolve(option);
+ };
+
+ const onDeny = () => {
+ snap.approvalModal?.resolve('deny');
+ };
+
+ // const onRetry = () => {
+ // console.log('onRetry');
+ // };
+
+ // const iconWrapper = (icon: React.ReactNode, tooltip: string) => {
+ // return (
+ // {snap.submitError}
+ //
+
+ );
+}
+
+export default ApprovalModal;
diff --git a/browser/src/components/AssistantMessage/AssistantTextMessage.tsx b/browser/src/components/AssistantMessage/AssistantTextMessage.tsx
index f814f8bb1..a9efd589f 100644
--- a/browser/src/components/AssistantMessage/AssistantTextMessage.tsx
+++ b/browser/src/components/AssistantMessage/AssistantTextMessage.tsx
@@ -1,27 +1,10 @@
-import { Spin } from 'antd';
-import { useTranslation } from 'react-i18next';
-import type { TextMessage } from '@/types/message';
+import type { TextPart } from '@/types/chat';
import MarkdownRenderer from '../MarkdownRenderer';
const AssistantTextMessage: React.FC<{
- message: TextMessage;
-}> = ({ message }) => {
- const { t } = useTranslation();
-
- if (message.text === '
+ }
+ variant="outlined"
+ onClick={() => onApprove('approve_once')}
+ >
+ {t('toolApproval.approveOnce')}
+
+ {snap.approvalModal?.category === 'write' && (
+
+ )}
+
+
+
+
- {message.reasoning.split('\n').length} lines
+ {part.text.split('\n').length} lines
@@ -62,7 +62,7 @@ const ThinkingMessage: React.FC
- {message.reasoning}
+ {part.text}
-
- );
- }
-
- // read 工具的文件内容展示
- if (
- toolName === 'read' &&
- typeof data === 'object' &&
- data !== null &&
- 'content' in data
- ) {
- return (
-
- {t('tool.filesFound', { count: data.filenames.length })}
- {'durationMs' in data &&
- typeof data.durationMs === 'number' && (
- ({data.durationMs}ms)
- )}
-
-
- {data.filenames
- .slice(0, 10)
- .map((filename: unknown, index: number) => (
-
-
- {String(filename)}
-
- ))}
- {data.filenames.length > 10 && (
-
- {t('tool.moreFiles', {
- count: data.filenames.length - 10,
- })}
-
- )}
-
-
- );
- }
-
- // fetch 工具的响应展示
- if (
- toolName === 'fetch' &&
- typeof data === 'object' &&
- data !== null &&
- 'result' in data
- ) {
- return (
-
- {'totalLines' in data &&
- typeof data.totalLines === 'number' && (
- {t('tool.lines', { count: data.totalLines })}
- )}
-
-
-
-
- {String(data.content)}
-
-
-
- );
- }
-
- // bash 工具的输出展示
- if (toolName === 'bash' && 'output' in result) {
- return (
-
- {'code' in data && typeof data.code === 'number' && (
-
- {data.code}
-
- )}
- {'durationMs' in data &&
- typeof data.durationMs === 'number' && (
- {data.durationMs}ms
- )}
-
-
-
-
- {String(data.result)}
-
-
-
- );
- }
- }
-
- // 处理错误结果
- if (!result.success && 'error' in result) {
- return (
-
-
-
- {String(result.output)}
-
-
-
- );
- }
- }
-
- // 默认展示
- const resultStr =
- typeof result === 'string' ? result : JSON.stringify(result, null, 2);
- return (
-
-
-
- {String(result.error)}
-
-
-
- );
- };
-
- return renderToolResult();
- };
+ switch (part.state) {
+ case 'tool_use':
+ return {
+ icon: '🔄',
+ iconColor: 'text-blue-500 animate-spin',
+ statusText: t('tool.status.executing'),
+ };
+ case 'tool_result':
+ return {
+ icon: '✓',
+ iconColor: 'text-green-500',
+ statusText: t('tool.status.completed'),
+ };
+ default:
+ return {
+ icon: '?',
+ iconColor: 'text-gray-500',
+ statusText: t('tool.status.unknown'),
+ };
+ }
+ }, [part.state]);
return (
-
-
- {resultStr}
-
-
- {/* 工具调用主行 */}
);
};
diff --git a/browser/src/components/AssistantMessage/index.module.css b/browser/src/components/AssistantMessage/index.module.css
new file mode 100644
index 000000000..4b41f2889
--- /dev/null
+++ b/browser/src/components/AssistantMessage/index.module.css
@@ -0,0 +1,10 @@
+.assistantMessage {
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0%;
+ color: #110c22;
+}
+
+.assistantFooterLoading {
+ width: 600px;
+}
diff --git a/browser/src/components/AssistantMessage/index.tsx b/browser/src/components/AssistantMessage/index.tsx
index 9fbc1d17a..08bad65e2 100644
--- a/browser/src/components/AssistantMessage/index.tsx
+++ b/browser/src/components/AssistantMessage/index.tsx
@@ -1,56 +1,58 @@
import { memo, useMemo } from 'react';
import { useStableValue } from '@/hooks/useStableValue';
-import type { UIMessage, UIMessageAnnotation } from '@/types/message';
-import { UIMessageType } from '@/types/message';
-import { mergeMessages } from '@/utils/mergeMessages';
+import type {
+ ReasoningPart,
+ TextPart,
+ UIAssistantMessage,
+ UIToolPart,
+} from '@/types/chat';
import MarkdownRenderer from '../MarkdownRenderer';
-import ToolApprovalConfirmation from '../ToolApprovalConfirmation';
-import ToolApprovalError from '../ToolApprovalError';
-import ToolApprovalResult from '../ToolApprovalResult';
+import ApprovalModal from './ApprovalModal';
import AssistantTextMessage from './AssistantTextMessage';
import AssistantThinkingMessage from './AssistantThinkingMessage';
import AssistantToolMessage from './AssistantToolMessage';
-
-interface MessageProps {
- message: UIMessage;
-}
+import styles from './index.module.css';
interface MessagePartProps {
- part: UIMessageAnnotation;
- index: number;
+ part: TextPart | ReasoningPart | UIToolPart;
+ uuid: string;
}
-const MessagePart: React.FC
- {getToolIcon()}
+ {toolIcon}
{statusInfo.icon}
- {toolName}
- {step && #{step}}
- {renderArgs()}
+ {name}
+ {part.description && (
+ {part.description}
+ )}
{statusInfo.statusText}
-
- {/* 结果展开/收起按钮 */}
- {state === 'result' && 'result' in message && (
-
- )}
+
-
- {/* 详细结果 */}
- {isResultExpanded && renderDetailedResult()}
+ {isResultExpanded && (
+
+
+ )}
+
= ({ message }) => {
const mergedMessages = useMemo(() => {
- return mergeMessages(message.annotations);
- }, [message.annotations]);
+ if (typeof message.content === 'string') {
+ return [{ type: 'text', text: message.content }] as TextPart[];
+ }
+ return message.content;
+ }, [message.content]);
const messageParts = useStableValue(mergedMessages);
@@ -59,11 +61,11 @@ const AssistantMessage: React.FC = ({ message }) => {
}
return (
- <>
- {messageParts.map((part, index) => (
- = {
+ user: {
+ placement: 'end',
+ variant: 'borderless',
+ messageRender(message) {
+ return ;
+ rightPanelRef: React.RefObject;
+}
+
+const ResizeHandle: React.FC = ({
+ containerRef,
+ rightPanelRef,
+}) => {
+ const { styles } = useResizeHandleStyles();
+ const isDragging = useRef(false);
+ const originalTransition = useRef('');
+
+ const handleMouseDown = useCallback(
+ (e: React.MouseEvent) => {
+ e.preventDefault();
+ isDragging.current = true;
+
+ // Use the passed rightPanelRef
+ if (rightPanelRef.current) {
+ // Save original transition and disable it for real-time following
+ originalTransition.current = rightPanelRef.current.style.transition;
+ rightPanelRef.current.style.transition = 'none';
+ }
+
+ const handleMouseMove = (e: MouseEvent) => {
+ if (
+ !isDragging.current ||
+ !containerRef.current ||
+ !rightPanelRef.current
+ )
+ return;
+
+ // Get container information
+ const containerRect = containerRef.current.getBoundingClientRect();
+ const containerWidth = containerRect.width;
+
+ // Calculate mouse relative position
+ const mouseX = e.clientX - containerRect.left;
+
+ // Calculate right panel width percentage (calculated from right side)
+ const rightWidthPercent =
+ ((containerWidth - mouseX) / containerWidth) * 100;
+
+ // Boundary constraints: right panel 20% - dynamic max based on screen size
+ const minRight = 20;
+ const maxRight = layout.actions.calculateRightPanelWidth();
+ const clampedRightPercent = Math.max(
+ minRight,
+ Math.min(maxRight, rightWidthPercent),
+ );
+
+ // Directly manipulate DOM styles for real-time following
+ rightPanelRef.current.style.width = `${clampedRightPercent}%`;
+ };
+
+ const handleMouseUp = () => {
+ isDragging.current = false;
+
+ if (rightPanelRef.current) {
+ // Read current width directly from DOM styles to avoid precision issues from recalculation
+ const currentWidth = rightPanelRef.current.style.width;
+ const finalWidthPercent = parseFloat(currentWidth.replace('%', ''));
+
+ // Restore transition effect
+ rightPanelRef.current.style.transition = originalTransition.current;
+
+ // Update state to keep it consistent with DOM
+ layout.actions.setRightPanelWidthPercent(finalWidthPercent);
+ }
+ document.removeEventListener('mousemove', handleMouseMove);
+ document.removeEventListener('mouseup', handleMouseUp);
+ };
+
+ document.addEventListener('mousemove', handleMouseMove);
+ document.addEventListener('mouseup', handleMouseUp);
+ },
+ [containerRef, rightPanelRef],
+ );
+
+ // Cleanup on component unmount
+ useEffect(() => {
+ return () => {
+ if (rightPanelRef.current && originalTransition.current) {
+ rightPanelRef.current.style.transition = originalTransition.current;
+ }
+ };
+ }, [rightPanelRef]);
+
+ return ;
+};
+
+export default ResizeHandle;
diff --git a/browser/src/components/ChatLayout/RightPanel.tsx b/browser/src/components/ChatLayout/RightPanel.tsx
new file mode 100644
index 000000000..2fa140d72
--- /dev/null
+++ b/browser/src/components/ChatLayout/RightPanel.tsx
@@ -0,0 +1,45 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import CodeViewer from '@/components/CodeViewer';
+import * as codeViewer from '@/state/codeViewer';
+import RightPanelHeader from './RightPanelHeader';
+
+const useRightPanelStyles = createStyles(({ css }) => ({
+ rightPanel: css`
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ `,
+
+ content: css`
+ flex: 1;
+ padding: 8px;
+ overflow: hidden;
+ `,
+
+ codeViewerContainer: css`
+ height: 100%;
+ width: 100%;
+ `,
+}));
+
+const RightPanel: React.FC = () => {
+ const { styles } = useRightPanelStyles();
+ const { visible: codeViewerVisible } = useSnapshot(codeViewer.state);
+
+ return (
+ (null);
- const { attachedContexts, contextsSelectedValues } = useSnapshot(
- context.state,
- );
+ const { attachedContexts } = useSnapshot(context.state);
const [openPopup, setOpenPopup] = useState(false);
+ const { t } = useTranslation();
+
const {
defaultSuggestions,
handleSearch,
- getOriginalContextByValue,
loading: suggestionLoading,
- } = useSuggestion(contextsSelectedValues);
-
- const { styles } = useStyle();
+ } = useSuggestion();
return (
{
onSearch={(type, text) => {
handleSearch(type as ContextType, text);
}}
- onSelect={(type, itemValue) => {
+ onSelect={(_type, _itemValue, contextItem) => {
setOpenPopup(false);
- const contextItem = getOriginalContextByValue(
- type as ContextType,
- itemValue,
- );
-
if (contextItem) {
context.actions.addContext(contextItem);
}
}}
>
-
+ setOpenPopup(true)}>
+
);
};
diff --git a/browser/src/components/ChatSender/LexicalTextArea/AiContextNode.ts b/browser/src/components/ChatSender/LexicalTextArea/AiContextNode.ts
deleted file mode 100644
index 3b919a4f4..000000000
--- a/browser/src/components/ChatSender/LexicalTextArea/AiContextNode.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import {
- DecoratorNode,
- type EditorConfig,
- type NodeKey,
- type SerializedLexicalNode,
- type Spread,
-} from 'lexical';
-import type { JSX } from 'react';
-import { AI_CONTEXT_NODE_CONFIGS } from '@/constants/context';
-import type { AiContextNodeConfig, AiContextNodeInfo } from '@/types/context';
-
-export type SerializedAiContextNode = Spread<
- {
- config: { type: AiContextNodeConfig['type'] };
- info: AiContextNodeInfo;
- },
- SerializedLexicalNode
->;
-
-export class AiContextNode extends DecoratorNode {
- __config: AiContextNodeConfig;
- __info: AiContextNodeInfo;
-
- static getType(): string {
- return 'ai-context';
- }
-
- static clone(node: AiContextNode): AiContextNode {
- return new AiContextNode(node.__config, node.__info, node.__key);
- }
-
- constructor(
- config: AiContextNodeConfig,
- info: AiContextNodeInfo,
- key?: NodeKey,
- ) {
- super(key);
-
- this.__config = config;
- this.__info = info;
- }
-
- static importJSON(serializedNode: SerializedAiContextNode): AiContextNode {
- const { config, info } = serializedNode;
- const foundConfig = AI_CONTEXT_NODE_CONFIGS.find(
- (c) => c.type === config.type,
- );
- if (!foundConfig) {
- throw new Error(
- `[AiContextNode] Can't find the config which type is ${config.type}，please check AI_CONTEXT_NODE_CONFIGS`,
- );
- }
- return new AiContextNode(foundConfig, info);
- }
-
- exportJSON(): SerializedAiContextNode {
- return {
- type: 'ai-context',
- version: 1,
- config: { type: this.__config.type },
- info: this.__info,
- };
- }
-
- createDOM(_config: EditorConfig): HTMLElement {
- const span = document.createElement('span');
-
- return span;
- }
-
- updateDOM(): boolean {
- return false;
- }
-
- isIsolated(): boolean {
- return false; // 改为 false，允许节点被部分删除
- }
-
- isInline(): boolean {
- return true;
- }
-
- decorate(): JSX.Element {
- const { render } = this.__config;
-
- const node = render({ info: this.__info });
-
- return node;
- }
-
- // 控制 getTextContent() 的返回值
- getTextContent(): string {
- return this.__info.value;
- }
-}
-
-// 工厂方法，供插入指令使用
-export function $createAiContextNode(
- config: AiContextNodeConfig,
- info: AiContextNodeInfo,
- key?: NodeKey,
-): AiContextNode {
- return new AiContextNode(config, info, key);
-}
-
-// 判断节点类型
-export function $isAiContextNode(node: unknown): node is AiContextNode {
- return node instanceof AiContextNode;
-}
diff --git a/browser/src/components/ChatSender/LexicalTextArea/DisabledPlugin.tsx b/browser/src/components/ChatSender/LexicalTextArea/DisabledPlugin.tsx
deleted file mode 100644
index a62239f64..000000000
--- a/browser/src/components/ChatSender/LexicalTextArea/DisabledPlugin.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { memo, useEffect } from 'react';
-
-const DisabledPlugin = ({ disabled }: { disabled: boolean }) => {
- const [editor] = useLexicalComposerContext();
-
- useEffect(() => {
- editor.setEditable(!disabled);
- }, [disabled, editor]);
-
- return null;
-};
-
-export default memo(DisabledPlugin);
diff --git a/browser/src/components/ChatSender/LexicalTextArea/EnterEventPlugin.tsx b/browser/src/components/ChatSender/LexicalTextArea/EnterEventPlugin.tsx
deleted file mode 100644
index 4d5012c35..000000000
--- a/browser/src/components/ChatSender/LexicalTextArea/EnterEventPlugin.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
- COMMAND_PRIORITY_CRITICAL,
- INSERT_PARAGRAPH_COMMAND,
- KEY_ENTER_COMMAND,
-} from 'lexical';
-import { memo, useEffect } from 'react';
-
-interface Props {
- onEnterPress?: (e: KeyboardEvent) => void;
-}
-
-const EnterEventPlugin = (props: Props) => {
- const { onEnterPress } = props;
- const [editor] = useLexicalComposerContext();
-
- useEffect(() => {
- const removeEnterListener = editor.registerCommand(
- KEY_ENTER_COMMAND,
- (event) => {
- const isShift = event?.shiftKey;
- const isMeta = event?.metaKey; // Mac Command
- const isCtrl = event?.ctrlKey; // Windows/Linux Ctrl
-
- if (isShift || isMeta || isCtrl) {
- return false;
- }
-
- event?.preventDefault();
- onEnterPress?.(event as KeyboardEvent);
- return false;
- },
- COMMAND_PRIORITY_CRITICAL,
- );
-
- const removeInsertParagraphListener = editor.registerCommand(
- INSERT_PARAGRAPH_COMMAND,
- () => {
- return true;
- },
- COMMAND_PRIORITY_CRITICAL,
- );
-
- return () => {
- removeEnterListener();
- removeInsertParagraphListener();
- };
- }, [editor, onEnterPress]);
-
- return null;
-};
-
-export default memo(EnterEventPlugin);
diff --git a/browser/src/components/ChatSender/LexicalTextArea/PastePlugin.tsx b/browser/src/components/ChatSender/LexicalTextArea/PastePlugin.tsx
deleted file mode 100644
index e41ff3751..000000000
--- a/browser/src/components/ChatSender/LexicalTextArea/PastePlugin.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { message } from 'antd';
-import { PASTE_COMMAND } from 'lexical';
-import { memo, useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ContextType } from '@/constants/context';
-import * as context from '@/state/context';
-import { guessImageMime, imageUrlToBase64 } from '@/utils/context';
-
-const PastePlugin = ({
- onPastingImage,
-}: {
- onPastingImage?: (loading: boolean) => void;
-}) => {
- const [editor] = useLexicalComposerContext();
-
- const [messageInstance, messageContextHolder] = message.useMessage();
-
- const { t } = useTranslation();
-
- const handleImage = useCallback(
- (item: DataTransferItem) => {
- const blob = item.getAsFile();
- if (blob) {
- const reader = new FileReader();
- reader.onload = (e) => {
- const base64String = e.target?.result?.toString();
- if (!base64String) {
- return;
- }
- context.actions.addContext({
- type: ContextType.IMAGE,
- value: `@Image:[${Date.now()}]`,
- displayText: blob.name,
- context: {
- src: base64String,
- mime: blob.type,
- },
- });
- };
- reader.readAsDataURL(blob);
- } else {
- messageInstance.error('Load image failed');
- }
- return true;
- },
- [messageInstance],
- );
-
- const handleHtml = useCallback(
- (item: DataTransferItem) => {
- item.getAsString((html) => {
- if (!html) {
- messageInstance.error('Load html failed');
- } else {
- const parser = new DOMParser();
- const doc = parser.parseFromString(html, 'text/html');
- const imgs = doc.querySelectorAll('img');
-
- if (imgs.length > 0) {
- onPastingImage?.(true);
-
- Promise.all(
- Array.from(imgs).map((img) => {
- return new Promise((resolve) => {
- const src = img.getAttribute('src');
-
- if (src) {
- const mime = guessImageMime(src);
-
- imageUrlToBase64(src).then((base64) => {
- context.actions.addContext({
- type: ContextType.IMAGE,
- value: `@Image:[${Date.now()}]`,
- displayText: src.split('/').pop() || src,
- context: {
- src: base64,
- mime,
- },
- });
-
- resolve();
- });
- } else {
- resolve();
- }
- });
- }),
- ).finally(() => {
- onPastingImage?.(false);
- });
- }
- }
- });
-
- return true;
- },
- [messageInstance],
- );
-
- useEffect(() => {
- return editor.registerCommand(
- PASTE_COMMAND,
- (event: ClipboardEvent | undefined) => {
- if (!event) return false;
-
- // 阻止默认粘贴行为
- event.preventDefault();
-
- const clipboardItems = event.clipboardData?.items;
- if (!clipboardItems || clipboardItems.length === 0) return false;
-
- // 只获取第一个项目
- const item = clipboardItems[0];
- // 处理图片
- if (item.type.startsWith('image/')) {
- return handleImage(item);
- }
- // 从HTML中解析可能的img标签
- else if (item.type === 'text/html') {
- return handleHtml(item);
- }
- // 处理文本
- else if (item.type === 'text/plain') {
- return false;
- }
- // 其他类型
- else {
- const errorMsg = t('context.unsupportedType', { type: item.type });
- messageInstance.error(errorMsg);
- console.error(errorMsg);
- return true;
- }
- },
- 1,
- );
- }, [editor, messageInstance]);
-
- return <>{messageContextHolder};
-};
-
-export default memo(PastePlugin);
diff --git a/browser/src/components/ChatSender/LexicalTextArea/PlaceholderPlugin.tsx b/browser/src/components/ChatSender/LexicalTextArea/PlaceholderPlugin.tsx
deleted file mode 100644
index bb6f2ff9f..000000000
--- a/browser/src/components/ChatSender/LexicalTextArea/PlaceholderPlugin.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useLexicalIsTextContentEmpty } from '@lexical/react/useLexicalIsTextContentEmpty';
-import { memo, useEffect } from 'react';
-
-const PlaceholderPlugin = (props: { placeholder: string | undefined }) => {
- const [editor] = useLexicalComposerContext();
- const isEmpty = useLexicalIsTextContentEmpty(editor);
-
- /* Set the placeholder on root. */
- useEffect(() => {
- const rootElement = editor.getRootElement() as HTMLElement;
- if (rootElement) {
- if (isEmpty && props.placeholder) {
- rootElement.setAttribute('placeholder', props.placeholder);
- } else {
- rootElement.removeAttribute('placeholder');
- }
- }
- }, [editor, isEmpty, props.placeholder]);
-
- return null;
-};
-
-export default memo(PlaceholderPlugin);
diff --git a/browser/src/components/ChatSender/LexicalTextArea/RenderValuePlugin.tsx b/browser/src/components/ChatSender/LexicalTextArea/RenderValuePlugin.tsx
deleted file mode 100644
index 852cce1b9..000000000
--- a/browser/src/components/ChatSender/LexicalTextArea/RenderValuePlugin.tsx
+++ /dev/null
@@ -1,335 +0,0 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
- $createParagraphNode,
- $createTextNode,
- $getRoot,
- $getSelection,
- $isRangeSelection,
- $isTextNode,
- type BaseSelection,
- type LexicalNode,
- TextNode,
-} from 'lexical';
-import { memo, useEffect, useRef, useState } from 'react';
-import type {
- AiContextCacheNode,
- AiContextNodeConfig,
- AppendedLexicalNode,
-} from '@/types/context';
-import { getTextDiff } from '@/utils/chat';
-import { $createAiContextNode } from './AiContextNode';
-
-interface Props {
- value?: string;
- aiContextNodeConfigs: AiContextNodeConfig[];
- onChange?: (markedText: string, plainText: string) => void;
- onChangeNodes?: (
- prevNodes: AiContextCacheNode[],
- nextNodes: AiContextCacheNode[],
- ) => void;
-}
-
-const RenderValuePlugin = (props: Props) => {
- const { value = '', onChange, onChangeNodes, aiContextNodeConfigs } = props;
- const [editor] = useLexicalComposerContext();
-
- const oldMarkedTextRef = useRef('');
- const oldNodesRef = useRef([]);
- const oldLexicalNodesRef = useRef([]);
- const oldSelectionRef = useRef(null);
- const [innerValue, setInnerValue] = useState(value);
- const [isComposing, setIsComposing] = useState(false);
-
- const SearchRegex = new RegExp(
- aiContextNodeConfigs
- .map((config, index) => `(?${config.matchRegex.source})`)
- .join('|'),
- 'g',
- );
-
- const isNodeEqual = (
- node1: AiContextCacheNode,
- node2: AiContextCacheNode,
- ) => {
- return (
- node1.type === node2.type &&
- node1.originalText === node2.originalText &&
- node1.displayText === node2.displayText
- );
- };
-
- const areNodesEqual = (
- nodes1: AiContextCacheNode[],
- nodes2: AiContextCacheNode[],
- ) => {
- if (nodes1.length !== nodes2.length) return false;
- return nodes1.every((node1, index) => {
- const node2 = nodes2[index];
- return isNodeEqual(node1, node2);
- });
- };
-
- const parseContent = (content: string) => {
- const nodes: AiContextCacheNode[] = [];
- const paragraph = $createParagraphNode();
-
- const Regex = new RegExp(SearchRegex);
-
- let lastIndex = 0;
- let plainText = '';
- let match: RegExpExecArray | null;
- let targetFunction: (() => void) | null = null;
-
- // 用于临时存储所有节点的数组（包括文本节点和AiContextNode节点）
- const allNodes: LexicalNode[] = [];
-
- while ((match = Regex.exec(content)) !== null) {
- if (match.index > lastIndex) {
- const text = content.slice(lastIndex, match.index);
- const textNode = $createTextNode(text);
- plainText += text;
- paragraph.append(textNode);
- allNodes.push(textNode);
- }
-
- const matchValue = match.groups?.value;
- const originalConfigIndex =
- match.findIndex((item) => item === matchValue) / 2 - 1;
-
- const originalConfig = aiContextNodeConfigs[originalConfigIndex];
-
- if (originalConfig) {
- const info = originalConfig.pickInfo?.(match);
-
- if (!info) {
- console.warn(
- `[LexicalTextArea] 无法从match中提取信息，请检查matchRegex和pickInfo是否正确。`,
- );
- continue;
- }
-
- const mentionNode = $createAiContextNode(originalConfig, info);
-
- paragraph.append(mentionNode);
- allNodes.push(mentionNode);
- nodes.push({
- type: originalConfig.type,
- originalText: info.value,
- displayText: info.displayText,
- lexicalNode: mentionNode,
- });
- plainText += info.displayText;
- }
- lastIndex = Regex.lastIndex;
- }
- if (lastIndex < content.length) {
- const text = content.slice(lastIndex);
- const textNode = $createTextNode(text);
- plainText += text;
- paragraph.append(textNode);
- allNodes.push(textNode);
- }
-
- const prevNodes = oldNodesRef.current;
- const isAddingMentionNode = nodes.length > prevNodes.length;
- const isRemovingMentionNode = nodes.length < prevNodes.length;
-
- // 处理光标位置
- targetFunction = () => {
- if (isAddingMentionNode) {
- // 找到新插入的mention节点
- let insertedNodeIndex = -1;
-
- for (let i = 0; i < nodes.length; i++) {
- if (i >= prevNodes.length || !isNodeEqual(nodes[i], prevNodes[i])) {
- insertedNodeIndex = i;
- break;
- }
- }
-
- if (insertedNodeIndex !== -1) {
- const insertedNode = nodes[insertedNodeIndex].lexicalNode;
- insertedNode.selectEnd();
- }
- } else if (isRemovingMentionNode) {
- // 删除情况
- // 找到被删除节点的位置
- let deletedIndex = 0;
- for (let i = 0; i < prevNodes.length; i++) {
- if (i >= nodes.length || !isNodeEqual(nodes[i], prevNodes[i])) {
- deletedIndex = i;
- break;
- }
- }
-
- // 在变更前的状态中找到被删除节点前后的节点
- const oldNodes = oldLexicalNodesRef.current;
- let mentionCount = 0;
- let targetIndex = -1;
-
- // 遍历找到被删除的mention节点的位置
- for (let i = 0; i < oldNodes.length; i++) {
- const node = oldNodes[i];
- if (node.type !== 'text') {
- if (mentionCount === deletedIndex) {
- targetIndex = i;
- break;
- }
- mentionCount++;
- }
- }
-
- if (targetIndex !== -1) {
- const prevNode = oldNodes[targetIndex - 1];
- const nextNode = oldNodes[targetIndex + 1];
-
- if (prevNode?.type === 'text' && nextNode?.type === 'text') {
- // 如果前后都是文本节点，记录前一个文本节点的长度
- const prevTextLength = prevNode.length;
-
- // 获取合并后的文本节点（它将位于删除位置）
- const mergedTextNode = paragraph.getChildren()[targetIndex - 1];
- if (mergedTextNode && mergedTextNode.getType() === 'text') {
- (mergedTextNode as TextNode).select(
- prevTextLength,
- prevTextLength,
- );
- }
- } else if (nextNode) {
- // 否则选中当前位置的开始
- const correspondingNode = paragraph.getChildren()[targetIndex];
- if (correspondingNode) {
- correspondingNode.selectStart();
- }
- } else if (prevNode) {
- // 如果是最后一个节点被删除，选中前一个节点的末尾
- const correspondingNode = paragraph.getChildren()[targetIndex - 1];
- if (correspondingNode) {
- correspondingNode.selectEnd();
- }
- }
- }
- } else {
- if ($isRangeSelection(oldSelectionRef.current)) {
- const uniqueTextNode = paragraph.getLastChild();
-
- if ($isTextNode(uniqueTextNode)) {
- const content = uniqueTextNode.getTextContent();
-
- // input break line
- const inputDiff = getTextDiff(oldMarkedTextRef.current, content);
- const inputBreakLine =
- inputDiff.length > 0 &&
- inputDiff.every(
- (diff) => diff.type === '+' && diff.content.includes('\n'),
- );
-
- if (inputBreakLine) {
- const lastDiff = inputDiff[inputDiff.length - 1];
- const lastPos = lastDiff.index + lastDiff.content.length;
- uniqueTextNode.select(lastPos, lastPos);
- } else {
- uniqueTextNode.select(
- oldSelectionRef.current.focus.offset,
- oldSelectionRef.current.focus.offset,
- );
- }
- }
- }
- }
- };
-
- return { nodes, paragraph, plainText, resetSelection: targetFunction };
- };
-
- useEffect(() => {
- if (innerValue !== oldMarkedTextRef.current) {
- editor.update(() => {
- const root = $getRoot();
- const { nodes, paragraph, plainText, resetSelection } =
- parseContent(innerValue);
-
- const withoutSpecialNode =
- nodes.length === 0 && oldNodesRef.current.length === 0;
-
- const shouldRebuild =
- withoutSpecialNode || !areNodesEqual(nodes, oldNodesRef.current);
-
- if (shouldRebuild) {
- root.clear();
- root.append(paragraph);
-
- resetSelection?.();
-
- if (!withoutSpecialNode) {
- onChangeNodes?.(oldNodesRef.current, nodes);
- oldNodesRef.current = nodes;
- oldLexicalNodesRef.current = paragraph
- .getChildren()
- .map((lexicalNode) => {
- return {
- lexicalNode,
- type: lexicalNode.getType(),
- length: lexicalNode.getTextContentSize(),
- };
- });
- }
- }
-
- onChange?.(innerValue, plainText);
- oldMarkedTextRef.current = innerValue;
- });
- }
- }, [innerValue]);
-
- useEffect(() => {
- if (value !== innerValue) {
- setInnerValue(value);
- }
- }, [value]);
-
- useEffect(() => {
- const dom = editor.getRootElement?.();
- if (!dom) return;
-
- const handleCompositionStart = () => {
- setIsComposing(true);
- };
- const handleCompositionEnd = () => {
- setIsComposing(false);
- // composition 结束时手动同步内容
- editor.update(() => {
- const root = $getRoot();
- const markedText = root.getTextContent().trimEnd();
- oldSelectionRef.current = $getSelection();
- setInnerValue(markedText);
- });
- };
-
- dom.addEventListener('compositionstart', handleCompositionStart);
- dom.addEventListener('compositionend', handleCompositionEnd);
-
- return () => {
- dom.removeEventListener('compositionstart', handleCompositionStart);
- dom.removeEventListener('compositionend', handleCompositionEnd);
- };
- }, [editor]);
-
- useEffect(() => {
- return editor.registerUpdateListener(({ editorState }) => {
- editorState.read(() => {
- if (isComposing) return;
- const root = $getRoot();
- const markedText = root.getTextContent().trimEnd();
-
- oldSelectionRef.current = $getSelection();
-
- setInnerValue(markedText);
- });
- });
- }, [editor, isComposing]);
-
- return null;
-};
-
-export default memo(RenderValuePlugin);
diff --git a/browser/src/components/ChatSender/LexicalTextArea/index.tsx b/browser/src/components/ChatSender/LexicalTextArea/index.tsx
deleted file mode 100644
index c2e9e470f..000000000
--- a/browser/src/components/ChatSender/LexicalTextArea/index.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
-import type { GetProps, GetRef, Input } from 'antd';
-import { createStyles } from 'antd-style';
-import classNames from 'classnames';
-import { $createParagraphNode, $getRoot, type LexicalEditor } from 'lexical';
-import React, {
- type KeyboardEvent,
- forwardRef,
- memo,
- useContext,
- useImperativeHandle,
- useRef,
-} from 'react';
-import { LexicalTextAreaContext } from '../LexicalTextAreaContext';
-import { AiContextNode } from './AiContextNode';
-import DisabledPlugin from './DisabledPlugin';
-import EnterEventPlugin from './EnterEventPlugin';
-import PastePlugin from './PastePlugin';
-import PlaceholderPlugin from './PlaceholderPlugin';
-import RenderValuePlugin from './RenderValuePlugin';
-
-type Props = GetProps;
-
-type Ref = GetRef;
-
-const useStyle = createStyles(({ css }) => {
- return {
- textAreaEditable: css`
- flex: 1;
-
- &:focus-visible {
- outline: none;
- }
-
- p {
- margin: 6px 0;
- line-height: 22px;
- }
-
- &:not(:focus):before {
- position: absolute;
- opacity: 0.5;
- content: attr(placeholder);
- margin: 6px 0;
- line-height: 22px;
- }
- `,
- };
-});
-
-const LexicalTextArea = forwardRef((props, ref) => {
- const {
- placeholder = '',
- onKeyDown,
- onSelect,
- disabled,
- className,
- style,
- } = props;
-
- const {
- onEnterPress,
- namespace,
- value,
- onChange,
- onChangeNodes,
- onPastingImage,
- aiContextNodeConfigs,
- } = useContext(LexicalTextAreaContext);
-
- const editorRef = useRef(null);
- const contentEditableRef = useRef(null);
-
- const { styles } = useStyle();
-
- useImperativeHandle(ref, () => ({
- focus: () => {
- contentEditableRef.current?.focus();
- editorRef.current?.focus();
- },
- blur: () => {
- contentEditableRef.current?.blur();
- editorRef.current?.blur();
- },
- get input() {
- return contentEditableRef.current;
- },
- }));
-
- const handleKeyDown = (e: KeyboardEvent) => {
- onKeyDown?.(e as unknown as React.KeyboardEvent);
- };
-
- const handleSelect = (e: React.SyntheticEvent) => {
- if (onSelect) {
- const selection = window.getSelection();
- if (selection && selection.rangeCount > 0) {
- onSelect(e as unknown as React.SyntheticEvent);
- }
- }
- };
-
- return (
- console.error(error),
- nodes: [AiContextNode],
- editorState(editor) {
- editorRef.current = editor;
- editor.update(() => {
- $getRoot().append($createParagraphNode());
- });
- },
- }}
- >
- {
- e.stopPropagation();
- }}
- onMouseDown={(e) => {
- e.stopPropagation();
- }}
- onMouseUp={(e) => {
- e.stopPropagation();
- }}
- className={classNames(styles.textAreaEditable, className)}
- />
- }
- ErrorBoundary={LexicalErrorBoundary}
- />
-
- {!disabled && {
- onChange?.(markedText, plainText);
- }}
- onChangeNodes={onChangeNodes}
- aiContextNodeConfigs={aiContextNodeConfigs}
- />
-
- );
-});
-
-export default memo(LexicalTextArea);
diff --git a/browser/src/components/ChatSender/LexicalTextAreaContext/index.tsx b/browser/src/components/ChatSender/LexicalTextAreaContext/index.tsx
deleted file mode 100644
index e83cf614c..000000000
--- a/browser/src/components/ChatSender/LexicalTextAreaContext/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createContext } from 'react';
-import type { AiContextCacheNode, AiContextNodeConfig } from '@/types/context';
-
-/** Inject Editor Contexts into LexicalTextArea */
-export const LexicalTextAreaContext = createContext<{
- onEnterPress?: (e: KeyboardEvent) => void;
- onChangeNodes?: (
- prevNodes: AiContextCacheNode[],
- nextNodes: AiContextCacheNode[],
- ) => void;
- value?: string;
- onChange?: (markedText: string, plainText: string) => void;
- onPastingImage?: (loading: boolean) => void;
- aiContextNodeConfigs: AiContextNodeConfig[];
- namespace: string;
-}>({ aiContextNodeConfigs: [], namespace: '' });
diff --git a/browser/src/components/ChatSender/SenderAttachments/index.tsx b/browser/src/components/ChatSender/SenderAttachments/index.tsx
index 199adbddc..1a356c047 100644
--- a/browser/src/components/ChatSender/SenderAttachments/index.tsx
+++ b/browser/src/components/ChatSender/SenderAttachments/index.tsx
@@ -72,28 +72,17 @@ const SenderAttachments = () => {
}),
);
+ // TODO: do not support file besides image
return false;
};
return (
<>
type.extName).join(
',',
)}
beforeUpload={handleBeforeUpload}
- onChange={({ file }) => {
- // TODO server is not ready, so the file status won't be [done]
- if (file.status === 'done') {
- context.actions.addContext({
- value: file.uid,
- displayText: file.name,
- type: ContextType.ATTACHMENT,
- context: file,
- });
- }
- }}
getDropContainer={() => document.body}
placeholder={{
icon: 
+ );
+ default:
+ return null;
+ }
+ }, [context, contextType]);
+
+ const popoverContent = useMemo(() => {
+ switch (contextType) {
+ case ContextType.IMAGE:
+ const imageSrc = (context as ImageItem).src;
+ return (
+
+ );
+ case ContextType.FILE:
+ return (context as FileItem).path;
+ default:
+ return null;
+ }
+ }, [contextType, context]);
+
+ return (
+ ,
+ HTMLButtonElement
+ >,
+) => {
+ const { className, ...rest } = props;
+
+ return (
+
+ );
+};
diff --git a/browser/src/components/ChatSender/SenderComponent/SenderSelect.tsx b/browser/src/components/ChatSender/SenderComponent/SenderSelect.tsx
new file mode 100644
index 000000000..baa97d6d6
--- /dev/null
+++ b/browser/src/components/ChatSender/SenderComponent/SenderSelect.tsx
@@ -0,0 +1,19 @@
+import { DownOutlined } from '@ant-design/icons';
+import { type GetProps, Select } from 'antd';
+import { cx } from 'antd-style';
+
+interface Props extends GetProps {}
+
+export const SenderSelect = (props: Props) => {
+ return (
+ }
+ {...props}
+ classNames={{
+ root: cx(
+ '[&_.ant-select-selector]:rounded-[50px]! [&_.ant-select-selector]:border! [&_.ant-select-selector]:border-[#F0F2F5]!',
+ ),
+ }}
+ />
+ );
+};
diff --git a/browser/src/components/ChatSender/SenderComponent/index.ts b/browser/src/components/ChatSender/SenderComponent/index.ts
new file mode 100644
index 000000000..8060afbdb
--- /dev/null
+++ b/browser/src/components/ChatSender/SenderComponent/index.ts
@@ -0,0 +1,9 @@
+import { SenderContextTag } from './ContextTag';
+import { SenderButton } from './SenderButton';
+import { SenderSelect } from './SenderSelect';
+
+export default {
+ Button: SenderButton,
+ Select: SenderSelect,
+ ContextTag: SenderContextTag,
+};
diff --git a/browser/src/components/ChatSender/SenderFooter/ModeSelect.tsx b/browser/src/components/ChatSender/SenderFooter/ModeSelect.tsx
new file mode 100644
index 000000000..159164d6a
--- /dev/null
+++ b/browser/src/components/ChatSender/SenderFooter/ModeSelect.tsx
@@ -0,0 +1,56 @@
+import Icon, { CheckOutlined } from '@ant-design/icons';
+import { useSnapshot } from 'valtio';
+import Truncate from '@/components/Truncate';
+import { MODES } from '@/constants/chat';
+import { actions, state } from '@/state/sender';
+import SenderComponent from '../SenderComponent';
+
+const ModeSelect = () => {
+ const { mode } = useSnapshot(state);
+
+ return (
+ {
+ actions.updateMode(value as string);
+ }}
+ popupMatchSelectWidth={false}
+ options={MODES.map((mode) => {
+ return {
+ label: (
+ ;
@@ -16,56 +12,23 @@ type ActionsComponents = {
SpeechButton: React.ComponentType;
};
-const useStyle = createStyles(({ token, css }) => {
- return {
- senderFooterButton: css`
- padding: 8px;
- background-color: ${token.colorFillQuaternary};
- transition: background-color 0.3s;
- border-radius: ${token.borderRadiusLG}px;
- border: 1px solid ${token.colorBorderSecondary};
- `,
- icon: css`
- font-size: 18px;
- color: ${token.colorText};
- `,
- };
-});
-
const SenderFooter: React.FC<{ components: ActionsComponents }> = ({
components,
}) => {
- const { styles } = useStyle();
- const { mode } = useSnapshot(state);
- const { status } = useChatState();
+ const { status } = useSnapshot(state);
const { SendButton, LoadingButton } = components;
- const onOpenFooter = () => {
- actions.updateOpenFooter(!state.openFooter);
- };
-
- const modeDetail = useMemo(() => {
- return MODES_MAP[mode];
- }, [mode]);
-
- const isProcessing = status === 'submitted' || status === 'streaming';
+ const isProcessing = status === 'processing';
return (
-
+
-
- {config.render({ info: { displayText, value }, onClose, context })}
-
- );
-};
+import SenderComponent from '../SenderComponent';
const SenderHeader: React.FC = () => {
const { attachedContexts, loading } = useSnapshot(context.state);
@@ -37,11 +14,17 @@ const SenderHeader: React.FC = () => {
}, []);
const contextTags = useMemo(() => {
- return attachedContexts.map((contextItem) =>
- renderContextTag(contextItem, () =>
- handleRemoveContext(contextItem.value),
- ),
- );
+ return attachedContexts.map((contextItem) => (
+
diff --git a/browser/src/components/ChatSender/index.tsx b/browser/src/components/ChatSender/index.tsx
index 822c81426..f8df34c1f 100644
--- a/browser/src/components/ChatSender/index.tsx
+++ b/browser/src/components/ChatSender/index.tsx
@@ -1,20 +1,22 @@
import { Sender } from '@ant-design/x';
+import { Spin } from 'antd';
import { createStyles } from 'antd-style';
-import { differenceWith } from 'lodash-es';
+import type Quill from 'quill';
+import { type Bounds, Delta } from 'quill';
import { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSnapshot } from 'valtio';
-import { AI_CONTEXT_NODE_CONFIGS, ContextType } from '@/constants/context';
-import { useChatState } from '@/hooks/provider';
+import { ContextType } from '@/constants/context';
+import { useChatPaste } from '@/hooks/useChatPaste';
import { useSuggestion } from '@/hooks/useSuggestion';
+import { actions, state } from '@/state/chat';
import * as context from '@/state/context';
-import { actions, state } from '@/state/sender';
-import { getInputInfo } from '@/utils/chat';
-import SuggestionList from '../SuggestionList';
-import LexicalTextArea from './LexicalTextArea';
-import { LexicalTextAreaContext } from './LexicalTextAreaContext';
+import * as sender from '@/state/sender';
+import QuillEditor, { KeyCode } from '../QuillEditor';
+import type { ContextBlotData } from '../QuillEditor/ContextBlot';
+import { QuillContext } from '../QuillEditor/QuillContext';
+import SuggestionList, { type ISuggestionListRef } from '../SuggestionList';
import SenderFooter from './SenderFooter';
-import SenderFooterBoard from './SenderFooterBoard';
import SenderHeader from './SenderHeader';
const useStyle = createStyles(({ token, css }) => {
@@ -49,109 +51,156 @@ const useStyle = createStyles(({ token, css }) => {
const ChatSender: React.FC = () => {
const { styles } = useStyle();
- const { loading, stop, onQuery } = useChatState();
const { t } = useTranslation();
- const [insertNodePosition, setInsertNodePosition] = useState(0);
+ const { status } = useSnapshot(state);
+ const { prompt } = useSnapshot(sender.state);
const [openPopup, setOpenPopup] = useState(false);
+ const [inputText, setInputText] = useState('');
+ const [atIndex, setAtIndex] = useState();
+ const [bounds, setBounds] = useState();
+ const [searchingInEditor, setSearchingInEditor] = useState(false);
+ const [searchText, setSearchText] = useState();
+ const quill = useRef(null);
+ const suggestionListRef = useRef(null);
- const prevInputValue = useRef(state.prompt);
- const { prompt } = useSnapshot(state);
+ const { isPasting, handlePaste, contextHolder } = useChatPaste();
const {
defaultSuggestions,
handleSearch,
- getOriginalContextByValue,
loading: suggestionLoading,
} = useSuggestion();
const handleSubmit = () => {
- onQuery({
- prompt,
- attachedContexts: context.state.attachedContexts,
- originalContent: state.plainText,
- });
- actions.updatePrompt('');
+ actions.send(prompt, sender.state.delta);
+ setInputText('');
+ sender.actions.updatePrompt('');
+ sender.actions.updateDelta(new Delta());
+ quill.current?.setText('\n');
};
const handleEnterPress = () => {
- if (!loading && prompt.trim()) {
- handleSubmit();
- }
+ // if (!loading && prompt.trim()) {
+ handleSubmit();
+ // }
};
return (
- <>
-
+ {
- // remove old nodes
- differenceWith(prevNodes, nextNodes, (prev, next) => {
- return prev.originalText === next.originalText;
- }).forEach((node) => {
- context.actions.removeContext(node.originalText);
- });
-
- // add new nodes
- differenceWith(nextNodes, prevNodes, (next, prev) => {
- return next.originalText === prev.originalText;
- }).forEach((node) => {
- const contextItem = getOriginalContextByValue(
- node.type,
- node.displayText,
- );
- if (contextItem) {
- context.actions.addContext(contextItem);
- }
- });
- },
- value: prompt,
- onChange: (markedText, plainText) => {
- const { isInputingAiContext, position } = getInputInfo(
- prevInputValue.current,
- markedText,
- );
- if (isInputingAiContext) {
- setInsertNodePosition(position);
+ onInputAt: (inputing, index, bounds) => {
+ if (inputing) {
setOpenPopup(true);
- } else {
- setOpenPopup(false);
+ setBounds(bounds);
+ setAtIndex(index);
+ }
+ },
+ searchingAtIndex: searchingInEditor ? atIndex : undefined,
+ onExitSearch: () => {
+ setSearchText(undefined);
+ setOpenPopup(false);
+ setSearchingInEditor(false);
+ },
+ onSearch: (text) => setSearchText(text),
+ onQuillLoad: (quillInstance) => {
+ quillInstance.focus();
+ quill.current = quillInstance;
+ },
+ onKeyDown: (code) => {
+ if (
+ code === KeyCode.Enter &&
+ quill.current?.hasFocus() &&
+ !openPopup
+ ) {
+ handleEnterPress();
+ }
+ },
+ onNativeKeyDown: (e) => {
+ if (searchingInEditor) {
+ suggestionListRef.current?.triggerKeyDown(e);
}
- prevInputValue.current = markedText;
- actions.updatePrompt(markedText);
- actions.updatePlainText(plainText);
},
- onPastingImage: (loading) => {
- context.actions.setContextLoading(loading);
+ onChange: (text, delta) => {
+ // rich text will auto add '\n' at the end
+ setInputText(text.trimEnd());
+ sender.actions.updatePrompt(text.trimEnd());
+ sender.actions.updateDelta(delta);
+ },
+ onDeleteContexts: (values) => {
+ values.forEach((value) => {
+ context.actions.removeContext(value);
+ });
},
- aiContextNodeConfigs: AI_CONTEXT_NODE_CONFIGS,
- namespace: 'SenderTextarea',
}}
>
setOpenPopup(open)}
+ onOpenChange={(open) => {
+ setOpenPopup(open);
+ if (!open) {
+ setSearchingInEditor(false);
+ }
+ }}
items={defaultSuggestions}
onSearch={(type, text) => {
- return handleSearch(type as ContextType, text);
+ handleSearch(type as ContextType, text);
}}
- onSelect={(type, itemValue) => {
+ onSelect={(_type, _itemValue, contextItem) => {
setOpenPopup(false);
- const contextItem = getOriginalContextByValue(
- type as ContextType,
- itemValue,
- );
+ setSearchingInEditor(false);
if (contextItem) {
- const nextInputValue =
- prompt.slice(0, insertNodePosition) +
- contextItem.value +
- prompt.slice(insertNodePosition + 1);
- actions.updatePrompt(nextInputValue);
+ context.actions.addContext(contextItem);
+
+ if (atIndex !== undefined) {
+ const delIndex = Math.max(0, atIndex - 1);
+
+ // delete the @
+ quill.current?.deleteText(
+ delIndex,
+ (searchText?.length ?? 0) + 1,
+ );
+
+ // insert the context
+ quill.current?.insertEmbed(
+ delIndex,
+ 'takumi-context',
+ {
+ text: contextItem.displayText,
+ value: contextItem.value,
+ prefix:
+ contextItem.type === ContextType.SLASH_COMMAND
+ ? '/'
+ : '@',
+ prompt:
+ contextItem.type === ContextType.SLASH_COMMAND
+ ? '' // command blot won't have prompt
+ : undefined,
+ } as ContextBlotData,
+ 'user',
+ );
+
+ // insert a space to get focus
+ quill.current?.insertText(delIndex + 1, ' ');
+
+ // set the selection
+ quill.current?.setSelection(delIndex + 2, 0, 'user');
+ }
}
}}
+ onLostFocus={() => quill.current?.focus()}
+ offset={{ top: (bounds?.top ?? -50) + 50, left: bounds?.left ?? 0 }}
+ searchControl={{
+ searchText,
+ onSearchStart: () => {
+ quill.current?.focus();
+ setSearchingInEditor(true);
+ },
+ }}
>
{
return
-
-
+
+ {contextHolder}
+
);
};
diff --git a/browser/src/components/CodeDiffOutline/CodeDiffOutlineHeader/index.tsx b/browser/src/components/CodeDiffOutline/CodeDiffOutlineHeader/index.tsx
index 166b2588a..147be5a9d 100644
--- a/browser/src/components/CodeDiffOutline/CodeDiffOutlineHeader/index.tsx
+++ b/browser/src/components/CodeDiffOutline/CodeDiffOutlineHeader/index.tsx
@@ -145,32 +145,29 @@ const CodeDiffOutlineHeader = (props: Props) => {
diff --git a/browser/src/components/CodeDiffOutline/index.tsx b/browser/src/components/CodeDiffOutline/index.tsx
index 1d040beb7..748d95961 100644
--- a/browser/src/components/CodeDiffOutline/index.tsx
+++ b/browser/src/components/CodeDiffOutline/index.tsx
@@ -1,94 +1,100 @@
+import {
+ CheckOutlined,
+ CloseOutlined,
+ ExpandAltOutlined,
+} from '@ant-design/icons';
import { createStyles } from 'antd-style';
import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { useSnapshot } from 'valtio';
+import { useClipboard } from '@/hooks/useClipboard';
+import ApproveToolIcon from '@/icons/approveTool.svg?react';
+import CopyIcon from '@/icons/copy.svg?react';
+import { state as chatState } from '@/state/chat';
import * as codeViewer from '@/state/codeViewer';
-import * as fileChanges from '@/state/fileChanges';
-import { toolApprovalActions } from '@/state/toolApproval';
-import type { CodeNormalViewerMode, DiffStat } from '@/types/codeViewer';
+import type { ApprovalResult } from '@/types/chat';
+import type { CodeViewerEditStatus, DiffStat } from '@/types/codeViewer';
import { diff, inferFileType } from '@/utils/codeViewer';
import CodeDiffView from '../CodeViewer/CodeDiffView';
-import CodeNormalView from '../CodeViewer/CodeNormalView';
-import CodeDiffOutlineHeader from './CodeDiffOutlineHeader';
-
-interface Props {
- readonly path: string;
- readonly edit: fileChanges.FileEdit;
- readonly normalViewerMode?: CodeNormalViewerMode;
- readonly loading?: boolean;
- readonly state: 'call' | 'result';
+import DiffStatBlocks from '../CodeViewer/DiffStatBlocks';
+import DevFileIcon from '../DevFileIcon';
+import MessageWrapper from '../MessageWrapper';
+
+export interface FileEdit {
+ toolCallId: string;
+ old_string: string;
+ new_string: string;
+ /** Represents the status of this edit, undefined means unmodified */
+ editStatus?: CodeViewerEditStatus;
}
-const useStyles = createStyles(
- ({ css }, { isExpanded }: { isExpanded?: boolean }) => {
- return {
- root: css`
- background-color: #f3f4f6; /* bg-gray-100 */
- border-radius: 8px; /* rounded-md */
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
- margin: 8px 0; /* my-2 */
- `,
- collapseWrapper: css`
- overflow: hidden;
- transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
- max-height: ${isExpanded ? '500px' : '0'};
- `,
- innerContainer: css`
- width: 100%;
- border-radius: 8px;
- padding: 4px;
- background-color: #f9f9f9;
- `,
- };
- },
-);
-
-const CodeDiffOutline = (props: Props) => {
- const { path, loading, normalViewerMode, edit, state } = props;
+interface CodeDiffOutlineProps {
+ path: string;
+ edit: FileEdit;
+ state: 'call' | 'result';
+}
- const { editStatus, old_string: oldString, new_string: newString } = edit;
+const useStyles = createStyles(({ css }) => {
+ return {
+ statusContainer: css`
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-left: 8px;
+ `,
+ add: css`
+ color: #00b96b;
+ font-weight: 500;
+ `,
+ remove: css`
+ color: #ff4d4f;
+ font-weight: 500;
+ `,
+ codeContainer: css`
+ width: 100%;
+ border-radius: 8px;
+ padding: 4px;
+ background-color: #f9f9f9;
+ `,
+ titleContainer: css`
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ `,
+ title: css`
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 320px;
+ `,
+ };
+});
- const { files } = useSnapshot(fileChanges.fileChangesState);
+const CodeDiffOutline = (props: CodeDiffOutlineProps) => {
+ const { path, edit, state } = props;
+ const snap = useSnapshot(chatState);
+ const { writeText } = useClipboard();
+ const [isCopySuccess, setIsCopySuccess] = useState(false);
+ const { t } = useTranslation();
- // 修改文件使用
- const file = useMemo(() => files[path], [files, path]);
+ const { editStatus, old_string, new_string } = edit;
const code = useMemo(() => {
- if (!file) {
- return {
- oldContent: '',
- newContent: '',
- };
- }
-
- const replacedContent = oldString
- ? file.content.replace(oldString, newString || '')
- : file.content;
-
- const oldContent = file.content;
-
- const newContent = replacedContent;
-
return {
- oldContent,
- newContent,
+ oldContent: old_string,
+ newContent: new_string,
};
- }, [file, oldString, newString]);
-
- // 展示使用
- const [earlyFile, setEarlyFile] = useState
+ {messageParts.map((part) => (
+
);
};
diff --git a/browser/src/components/ChatContent/index.module.css b/browser/src/components/ChatContent/index.module.css
new file mode 100644
index 000000000..c9dc7339f
--- /dev/null
+++ b/browser/src/components/ChatContent/index.module.css
@@ -0,0 +1,43 @@
+.chat {
+ height: 100%;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ padding-block: 16px;
+ gap: 16px;
+ flex: 1;
+}
+
+.chat::-webkit-scrollbar {
+ display: none;
+}
+
+.chatList {
+ flex: 1;
+ overflow: auto;
+}
+
+.chatList :global(.ant-bubble-footer) {
+ width: 100%;
+ margin-top: 8px;
+}
+
+.chatList :global(.ant-bubble-content) {
+ min-height: 0px;
+}
+
+.chatList :global(.ant-btn-icon) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.bubbleList {
+ height: 100%;
+ max-width: 800px;
+ margin-inline: auto;
+}
+
+.skeletonContainer {
+ width: 600px;
+}
diff --git a/browser/src/components/ChatContent/index.tsx b/browser/src/components/ChatContent/index.tsx
new file mode 100644
index 000000000..0e8986624
--- /dev/null
+++ b/browser/src/components/ChatContent/index.tsx
@@ -0,0 +1,85 @@
+import { Bubble } from '@ant-design/x';
+import { type GetProp, Skeleton } from 'antd';
+import { useSnapshot } from 'valtio';
+import AssistantFooter from '@/components/AssistantFooter';
+import AssistantMessage from '@/components/AssistantMessage';
+import ChatSender from '@/components/ChatSender';
+import DisplayMessage from '@/components/DisplayMessage';
+import { UserMessage, UserMessageFooter } from '@/components/UserMessage';
+import Welcome from '@/components/Welcome';
+import { state } from '@/state/chat';
+import type { Message } from '@/types/chat';
+import styles from './index.module.css';
+
+const ChatContent: React.FC = () => {
+ const { messages, status } = useSnapshot(state);
+
+ const items = messages?.map((message, index) => {
+ const isLastMessage = index === messages.length - 1;
+ return {
+ ...message,
+ content: message,
+ // typing: status === 'processing' ? { step: 20, interval: 150 } : false,
+ // loading: status === 'processing_stream' && isLastMessage,
+ footer:
+ isLastMessage && message.role === 'assistant'
+ ? () => (
+
+
+ );
+ },
+ },
+ ui_display: {
+ placement: 'start',
+ variant: 'borderless',
+ messageRender(message) {
+ return
+
+ );
+};
+
+export default ChatContent;
diff --git a/browser/src/components/ChatLayout/ResizeHandle.tsx b/browser/src/components/ChatLayout/ResizeHandle.tsx
new file mode 100644
index 000000000..dfeac850b
--- /dev/null
+++ b/browser/src/components/ChatLayout/ResizeHandle.tsx
@@ -0,0 +1,121 @@
+import { createStyles } from 'antd-style';
+import React, { useCallback, useEffect, useRef } from 'react';
+import * as layout from '@/state/layout';
+
+const useResizeHandleStyles = createStyles(({ css }) => ({
+ handle: css`
+ width: 1px;
+ height: 100%;
+ background: #e5e5e5;
+ cursor: col-resize;
+ position: relative;
+ transform-origin: center;
+ transition:
+ transform 0.2s ease,
+ background 0.2s ease;
+
+ &:hover {
+ background: #7357ff;
+ transform: scaleX(3);
+ }
+
+ &:active {
+ background: #7357ff;
+ transform: scaleX(3);
+ }
+ `,
+}));
+
+interface ResizeHandleProps {
+ containerRef: React.RefObject
+ {items?.length ? (
+
+
+
+ );
+};
+
+export default RightPanel;
diff --git a/browser/src/components/ChatLayout/RightPanelHeader.tsx b/browser/src/components/ChatLayout/RightPanelHeader.tsx
new file mode 100644
index 000000000..36b2e1050
--- /dev/null
+++ b/browser/src/components/ChatLayout/RightPanelHeader.tsx
@@ -0,0 +1,48 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+import ToggleExpandIcon from '@/icons/toggle-expand.svg?react';
+import * as layout from '@/state/layout';
+
+const useHeaderStyles = createStyles(({ css }) => ({
+ header: css`
+ height: 60px;
+ display: flex;
+ align-items: center;
+ padding: 18px 24px 6px 24px;
+ background: #ffffff;
+ border-bottom: 1px solid #e5e5e5;
+ box-sizing: border-box;
+ `,
+
+ headerContent: css`
+ display: flex;
+ align-items: center;
+ height: 36px;
+ `,
+
+ collapseButton: css`
+ cursor: pointer;
+ `,
+}));
+
+const RightPanelHeader: React.FC = () => {
+ const { styles } = useHeaderStyles();
+
+ const handleCollapseClick = () => {
+ layout.actions.setRightPanelExpanded(false);
+ };
+
+ return (
+
+ {codeViewerVisible && (
+
+
+
+ )}
+
+
+ );
+};
+
+export default RightPanelHeader;
diff --git a/browser/src/components/ChatLayout/SidebarExpandButton.tsx b/browser/src/components/ChatLayout/SidebarExpandButton.tsx
new file mode 100644
index 000000000..869d8485d
--- /dev/null
+++ b/browser/src/components/ChatLayout/SidebarExpandButton.tsx
@@ -0,0 +1,39 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import ToggleExpandIcon from '@/icons/toggle-expand.svg?react';
+import * as layout from '@/state/layout';
+
+const useStyles = createStyles(({ css }) => {
+ return {
+ expandButton: css`
+ position: fixed;
+ top: 24px;
+ left: 24px;
+ z-index: 1000;
+ transition: all 0.2s ease;
+ cursor: pointer;
+ `,
+ };
+});
+
+const SidebarExpandButton: React.FC = () => {
+ const { styles } = useStyles();
+ const { sidebarCollapsed } = useSnapshot(layout.state);
+
+ const handleExpandSidebar = () => {
+ layout.actions.setSidebarCollapsed(false);
+ };
+
+ if (!sidebarCollapsed) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ );
+};
+
+export default SidebarExpandButton;
diff --git a/browser/src/components/ChatLayout/TopRightExpandButton.tsx b/browser/src/components/ChatLayout/TopRightExpandButton.tsx
new file mode 100644
index 000000000..fa793df10
--- /dev/null
+++ b/browser/src/components/ChatLayout/TopRightExpandButton.tsx
@@ -0,0 +1,34 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import ToggleExpandIcon from '@/icons/toggle-expand.svg?react';
+import * as layout from '@/state/layout';
+
+const useToggleButtonStyles = createStyles(({ css }) => ({
+ topRightToggle: css`
+ position: fixed;
+ top: 24px;
+ right: 24px;
+ z-index: 10;
+ width: 25px;
+ height: 25px;
+ cursor: pointer;
+ `,
+}));
+
+const TopRightToggleButton: React.FC = () => {
+ const { styles } = useToggleButtonStyles();
+ const { rightPanelExpanded } = useSnapshot(layout.state);
+
+ const handleClick = () => {
+ layout.actions.toggleRightPanel();
+ };
+
+ if (rightPanelExpanded) return null;
+
+ return (
+ @
} />}
- onClick={() => setOpenPopup(true)}
- >
- {attachedContexts.length === 0 && Add Context}
- @
+ {attachedContexts.length === 0 && {t('context.addContext')}
}
+ setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ onClick={() => onClick?.(value)}
+ >
+ {closeable && hover && (
+
+
+
+ );
+};
diff --git a/browser/src/components/ChatSender/SenderComponent/SenderButton.tsx b/browser/src/components/ChatSender/SenderComponent/SenderButton.tsx
new file mode 100644
index 000000000..13121dcfa
--- /dev/null
+++ b/browser/src/components/ChatSender/SenderComponent/SenderButton.tsx
@@ -0,0 +1,24 @@
+import { cx } from 'antd-style';
+import type { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+
+export const SenderButton = (
+ props: DetailedHTMLProps<
+ ButtonHTMLAttributes {
+ onClose?.(value);
+ }}
+ >
+
+ )}
+
+
+ {icon}
+ {label}
+
+ mode.icon} className="text-sm" />
+ {mode.label}
+
+ ),
+ value: mode.key,
+ modeItem: mode,
+ };
+ })}
+ optionRender={(option) => {
+ const { data, value } = option;
+ const { modeItem } = data;
+ return (
+
+ modeItem.icon} className="text-lg" />
+
+ );
+ }}
+ />
+ );
+};
+
+export default ModeSelect;
diff --git a/browser/src/components/ChatSender/SenderFooter/index.tsx b/browser/src/components/ChatSender/SenderFooter/index.tsx
index c906eaf87..e8d8c75d5 100644
--- a/browser/src/components/ChatSender/SenderFooter/index.tsx
+++ b/browser/src/components/ChatSender/SenderFooter/index.tsx
@@ -1,13 +1,9 @@
-import { DownOutlined } from '@ant-design/icons';
-import { Button, type ButtonProps, Divider, Flex } from 'antd';
-import { createStyles } from 'antd-style';
-import { useMemo } from 'react';
+import { type ButtonProps, Divider, Flex } from 'antd';
import { useSnapshot } from 'valtio';
import McpDropdown from '@/components/McpDropdown';
-import { MODES_MAP } from '@/constants/chat';
-import { useChatState } from '@/hooks/provider';
-import { actions, state } from '@/state/sender';
+import { state } from '@/state/chat';
import SenderAttachments from '../SenderAttachments';
+import ModeSelect from './ModeSelect';
type ActionsComponents = {
SendButton: React.ComponentType
+
+
+
+ {modeItem.description}
+
+
+ {mode === value && (
+
+ {modeItem.label}
+
+
-
- {MODES.map((item) => (
-
-
- );
-}
diff --git a/browser/src/components/ChatSender/SenderHeader/index.tsx b/browser/src/components/ChatSender/SenderHeader/index.tsx
index 8147010f9..6459e1643 100644
--- a/browser/src/components/ChatSender/SenderHeader/index.tsx
+++ b/browser/src/components/ChatSender/SenderHeader/index.tsx
@@ -1,33 +1,10 @@
import { Sender } from '@ant-design/x';
import { Flex, Spin } from 'antd';
-import React, { Fragment, useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
import { useSnapshot } from 'valtio';
-import { AI_CONTEXT_NODE_CONFIGS } from '@/constants/context';
import * as context from '@/state/context';
-import type { ContextItem } from '@/types/context';
import AddContext from '../AddContext';
-
-const CONFIG_MAP = new Map(
- AI_CONTEXT_NODE_CONFIGS.map((config) => [config.type, config]),
-);
-
-export const renderContextTag = (
- contextItem: ContextItem,
- onClose?: () => void,
-) => {
- const { type, displayText, value, context } = contextItem;
- const config = CONFIG_MAP.get(type);
-
- if (!config) {
- return null;
- }
-
- return (
- onModeClick(item.key)}
- >
-
- ))}
-
-
-
- {mode === item.key && (
-
- {item.icon}
- {item.label}
- {item.description}
- {path}
- {showDiffActionsAndInfo && (
- <>
- {normalViewMode ? (
-
- {normalViewMode === 'new' && (
- <>
- (new)
- {renderAddLines(diffStat)}
-
- )}
- {normalViewMode === 'deleted' && (
- <>
- (deleted)
- {renderRemoveLines(diffStat)}
-
- )}
-
- ) : (
-
- {renderAddLines(diffStat)}
- {renderRemoveLines(diffStat)}
-
- )}
-
- )}
+ {showDiffActionsAndInfo &&
+ (normalViewMode ? (
+
+ {normalViewMode === 'new' && (
+ <>
+ (new)
+ {renderAddLines(diffStat)}
+
+ )}
+ {normalViewMode === 'deleted' && (
+ <>
+ (deleted)
+ {renderRemoveLines(diffStat)}
+
+ )}
+
+ ) : (
+
+ {renderAddLines(diffStat)}
+ {renderRemoveLines(diffStat)}
+
+ ))}
{editStatus === 'accept' && {elements}
+ ) : null;
+ };
+
+ const handleCopy = () => {
+ writeText(code.newContent);
+ setIsCopySuccess(true);
};
+ // Build action buttons
+ const actions = [
+ {
+ key: 'copy',
+ icon: isCopySuccess ?
- {
- const newGlobalContent =
- fileChanges.fileChangesActions.getFinalContent(path) || '';
-
- fileChanges.fileChangesActions.updateCodeViewerState(
- path,
- file.content,
- newGlobalContent,
- normalViewerMode,
- );
- codeViewer.actions.setVisible(true);
+
+
+ }
+ icon={{path}
+ {renderStatusContent()}
+
-
- )}
-
+
);
};
diff --git a/browser/src/components/CodeRenderer/CodeRenderer.tsx b/browser/src/components/CodeRenderer/CodeRenderer.tsx
new file mode 100644
index 000000000..8915274ab
--- /dev/null
+++ b/browser/src/components/CodeRenderer/CodeRenderer.tsx
@@ -0,0 +1,408 @@
+/** biome-ignore-all lint/security/noDangerouslySetInnerHtml:
- {isNormalView ? (
-
-
+
+ );
+ },
+);
+
+export default CodeRenderer;
diff --git a/browser/src/components/CodeRenderer/index.tsx b/browser/src/components/CodeRenderer/index.tsx
new file mode 100644
index 000000000..7aac0eafd
--- /dev/null
+++ b/browser/src/components/CodeRenderer/index.tsx
@@ -0,0 +1,3 @@
+export { default as CodeRenderer, default } from './CodeRenderer';
+export { useShiki } from './useShiki';
+export { getLanguageDisplayName, inferLanguage } from './utils';
diff --git a/browser/src/components/CodeRenderer/lineNumbers.module.css b/browser/src/components/CodeRenderer/lineNumbers.module.css
new file mode 100644
index 000000000..be3e723ef
--- /dev/null
+++ b/browser/src/components/CodeRenderer/lineNumbers.module.css
@@ -0,0 +1,227 @@
+/* Shiki Line Numbers Styles */
+
+/* 基础行号容器样式 */
+.shiki-with-line-numbers {
+ position: relative;
+ counter-reset: line-number calc(var(--start-line, 1) - 1);
+}
+
+.shiki-with-line-numbers .line {
+ position: relative;
+ display: flex;
+ align-items: flex-start;
+ counter-increment: line-number;
+ min-height: 1.5em;
+ padding-left: 0;
+}
+
+/* 行号样式 */
+.shiki-with-line-numbers .line-number {
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-end;
+ width: 4em;
+ min-width: 4em;
+ height: auto;
+ margin-right: 12px;
+ padding: 0 8px 0 4px;
+ color: #656d76;
+ background-color: #f6f8fa;
+ border-right: 2px solid #d0d7de;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 1.4;
+ letter-spacing: 0.5px;
+ font-family:
+ "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro",
+ "Consolas", monospace;
+ text-align: right;
+ direction: ltr;
+ unicode-bidi: embed;
+ user-select: none;
+ flex-shrink: 0;
+ position: sticky;
+ left: 0;
+ z-index: 2;
+ transition: all 0.2s ease;
+ border-radius: 0 3px 3px 0;
+}
+
+/* 代码内容区域 */
+.shiki-with-line-numbers .line > span:not(.line-number) {
+ flex: 1;
+ min-width: 0;
+ padding-left: 8px;
+ white-space: pre;
+ overflow: visible;
+ line-height: 1.4;
+}
+
+/* 鼠标悬停效果 */
+.shiki-with-line-numbers .line:hover {
+ background-color: rgba(0, 0, 0, 0.02);
+}
+
+.shiki-with-line-numbers .line:hover .line-number {
+ background-color: #e6edf3;
+ color: #24292f;
+ border-right-color: #0969da;
+ transform: translateX(-1px);
+ box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Diff 样式支持 */
+.shiki-with-line-numbers .line.diff.add {
+ background-color: #dafbe1;
+ border-left: 3px solid #28a745;
+ width: 100%;
+ margin: 0;
+ padding-right: 1em;
+}
+
+.shiki-with-line-numbers .line.diff.remove {
+ background-color: #ffeaea;
+ border-left: 3px solid #d73a49;
+ width: 100%;
+ margin: 0;
+ padding-right: 1em;
+}
+
+.shiki-with-line-numbers .line.diff.add .line-number {
+ background-color: #ccffd8;
+ border-right-color: #28a745;
+ color: #22863a;
+ margin-right: 12px;
+ padding: 0 8px 0 4px;
+ font-weight: 600;
+ box-shadow: inset 2px 0 0 #28a745;
+}
+
+.shiki-with-line-numbers .line.diff.remove .line-number {
+ background-color: #ffdce0;
+ border-right-color: #d73a49;
+ color: #cb2431;
+ margin-right: 12px;
+ padding: 0 8px 0 4px;
+ font-weight: 600;
+ box-shadow: inset 2px 0 0 #d73a49;
+}
+
+/* 高亮行样式 */
+.shiki-with-line-numbers .line.highlighted {
+ background-color: #fff7ed;
+}
+
+.shiki-with-line-numbers .line.highlighted .line-number {
+ background-color: rgba(254, 215, 170, 0.4);
+ color: #9a3412;
+ border-right-color: rgba(251, 146, 60, 0.6);
+}
+
+/* 焦点行样式 */
+.shiki-with-line-numbers .line.focused {
+ background-color: #f0f9ff;
+}
+
+.shiki-with-line-numbers .line.focused .line-number {
+ background-color: rgba(219, 234, 254, 0.4);
+ color: #1e40af;
+ border-right-color: rgba(59, 130, 246, 0.6);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+ .shiki-with-line-numbers .line-number {
+ width: 3em;
+ min-width: 3em;
+ padding: 0 6px 0 2px;
+ font-size: 10px;
+ margin-right: 8px;
+ text-align: right;
+ justify-content: flex-end;
+ }
+
+ .shiki-with-line-numbers .line > span:not(.line-number) {
+ padding-left: 6px;
+ }
+}
+
+/* 暗色主题支持 */
+@media (prefers-color-scheme: dark) {
+ .shiki-with-line-numbers .line-number {
+ color: #8b949e;
+ background-color: #161b22;
+ border-right-color: #30363d;
+ }
+
+ .shiki-with-line-numbers .line:hover {
+ background-color: rgba(255, 255, 255, 0.03);
+ }
+
+ .shiki-with-line-numbers .line:hover .line-number {
+ background-color: #21262d;
+ color: #f0f6fc;
+ border-right-color: #58a6ff;
+ transform: translateX(-1px);
+ box-shadow: 1px 0 3px rgba(0, 0, 0, 0.3);
+ }
+
+ .shiki-with-line-numbers .line.diff.add .line-number {
+ background-color: #033a16;
+ border-right-color: #238636;
+ color: #3fb950;
+ box-shadow: inset 2px 0 0 #238636;
+ }
+
+ .shiki-with-line-numbers .line.diff.remove .line-number {
+ background-color: #67060c;
+ border-right-color: #da3633;
+ color: #f85149;
+ box-shadow: inset 2px 0 0 #da3633;
+ }
+}
+
+/* 可选：使用 CSS Counter 的替代方案 */
+.shiki-with-line-numbers.use-counter .line::before {
+ content: counter(line-number);
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-end;
+ width: 3.5em;
+ min-width: 3.5em;
+ height: 1.5em;
+ margin-right: 1em;
+ padding: 0 0.75em 0 0.5em;
+ color: #8b8b8b;
+ background-color: transparent;
+ border-right: 1px solid rgba(225, 232, 237, 0.6);
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%; /* 15.6px */
+ letter-spacing: -0.24px;
+ text-align: right;
+ user-select: none;
+ flex-shrink: 0;
+ position: sticky;
+ left: 0;
+ z-index: 1;
+ transition: all 0.15s ease;
+}
+
+/* 确保代码块正确显示 */
+.shiki-with-line-numbers pre {
+ margin: 0;
+ padding: 0;
+ background: transparent;
+ overflow: visible;
+}
+
+.shiki-with-line-numbers code {
+ display: block;
+ padding: 0;
+ background: transparent;
+ white-space: pre;
+ overflow: visible;
+}
diff --git a/browser/src/components/CodeRenderer/transformers/diffTransformer.ts b/browser/src/components/CodeRenderer/transformers/diffTransformer.ts
new file mode 100644
index 000000000..6c703174b
--- /dev/null
+++ b/browser/src/components/CodeRenderer/transformers/diffTransformer.ts
@@ -0,0 +1,74 @@
+// Constants for diff markers
+export const DIFF_MARKERS = {
+ ADD: '// [!code ++]',
+ REMOVE: '// [!code --]',
+} as const;
+
+/**
+ * Custom diff transformer to handle diff notation markers
+ * Processes [!code --] and [!code ++] markers and converts them to diff classes
+ */
+export const customDiffTransformer = () => {
+ return {
+ name: 'custom-diff-transformer',
+ preprocess(code: string) {
+ return code;
+ },
+ line(node: any, _line: number) {
+ try {
+ // Recursively get all text content from the line
+ const getTextContent = (n: any): string => {
+ if (n.type === 'text') {
+ return n.value || '';
+ }
+ if (n.children) {
+ return n.children.map(getTextContent).join('');
+ }
+ return '';
+ };
+
+ // Recursively remove markers from all text nodes
+ const removeMarkers = (n: any, marker: string) => {
+ if (n.type === 'text' && n.value) {
+ // Improved regex: match marker with optional whitespace at line end
+ n.value = n.value.replace(
+ new RegExp(
+ `\\s*${marker.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*$`,
+ 'g',
+ ),
+ '',
+ );
+ }
+ if (n.children) {
+ n.children.forEach((child: any) => removeMarkers(child, marker));
+ }
+ };
+
+ const lineText = getTextContent(node);
+
+ // Check for diff markers and add classes to the line node
+ if (lineText.includes(DIFF_MARKERS.REMOVE)) {
+ // Add diff remove class
+ const currentClass = node.properties?.class || '';
+ node.properties = node.properties || {};
+ node.properties.class = `${currentClass} diff remove`.trim();
+
+ // Remove the marker from all text nodes recursively
+ removeMarkers(node, DIFF_MARKERS.REMOVE);
+ }
+
+ if (lineText.includes(DIFF_MARKERS.ADD)) {
+ // Add diff add class
+ const currentClass = node.properties?.class || '';
+ node.properties = node.properties || {};
+ node.properties.class = `${currentClass} diff add`.trim();
+
+ // Remove the marker from all text nodes recursively
+ removeMarkers(node, DIFF_MARKERS.ADD);
+ }
+ } catch (error) {
+ console.error('Error in diff transformer line:', error);
+ }
+ },
+ };
+};
diff --git a/browser/src/components/CodeRenderer/transformers/index.ts b/browser/src/components/CodeRenderer/transformers/index.ts
new file mode 100644
index 000000000..78f0021d3
--- /dev/null
+++ b/browser/src/components/CodeRenderer/transformers/index.ts
@@ -0,0 +1,5 @@
+export { customDiffTransformer } from './diffTransformer';
+export {
+ createLineNumberTransformer,
+ type LineNumberOptions,
+} from './lineNumberTransformer';
diff --git a/browser/src/components/CodeRenderer/transformers/lineNumberTransformer.ts b/browser/src/components/CodeRenderer/transformers/lineNumberTransformer.ts
new file mode 100644
index 000000000..1b8a69768
--- /dev/null
+++ b/browser/src/components/CodeRenderer/transformers/lineNumberTransformer.ts
@@ -0,0 +1,68 @@
+import type { ShikiTransformer } from 'shiki';
+
+export interface LineNumberOptions {
+ startLine?: number;
+}
+
+export function createLineNumberTransformer(
+ options: LineNumberOptions = {},
+): ShikiTransformer {
+ const { startLine = 1 } = options;
+
+ // Validate startLine
+ const validStartLine = Math.max(1, Math.floor(startLine));
+
+ return {
+ name: 'line-number-transformer',
+ pre(node) {
+ try {
+ // Add class and custom properties to the pre element
+ this.addClassToHast(node, 'shiki-with-line-numbers');
+
+ // Set CSS custom properties for line number styling
+ const style = node.properties?.style || '';
+ node.properties = node.properties || {};
+ node.properties.style = `${style}; --start-line: ${validStartLine};`;
+ } catch (error) {
+ console.error('Error in line number transformer pre:', error);
+ }
+ },
+ line(node, line) {
+ try {
+ // Add line number element to each line
+ const lineNumber = validStartLine + line - 1;
+
+ // Create line number span element
+ const lineNumberElement = {
+ type: 'element' as const,
+ tagName: 'span',
+ properties: {
+ class: 'line-number',
+ 'data-line': lineNumber,
+ 'aria-hidden': 'true',
+ },
+ children: [
+ {
+ type: 'text' as const,
+ value: String(lineNumber),
+ },
+ ],
+ };
+
+ // Ensure node.children exists
+ if (!node.children) {
+ node.children = [];
+ }
+
+ // Add line number as the first child of the line
+ node.children.unshift(lineNumberElement);
+
+ // Add data attribute to the line itself
+ node.properties = node.properties || {};
+ node.properties['data-line'] = lineNumber;
+ } catch (error) {
+ console.error('Error in line number transformer line:', error);
+ }
+ },
+ };
+}
diff --git a/browser/src/components/CodeRenderer/useShiki.ts b/browser/src/components/CodeRenderer/useShiki.ts
new file mode 100644
index 000000000..c1e9c180d
--- /dev/null
+++ b/browser/src/components/CodeRenderer/useShiki.ts
@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react';
+import { type Highlighter, createHighlighter } from 'shiki';
+import { SUPPORTED_LANGUAGES } from '@/constants/languages';
+
+interface UseShikiReturn {
+ codeToHtml: Highlighter['codeToHtml'] | null;
+ isReady: boolean;
+ error: Error | null;
+ availableThemes: string[];
+}
+
+/**
+ * Simple Shiki hook for code highlighting
+ */
+export function useShiki(): UseShikiReturn {
+ const [isReady, setIsReady] = useState(false);
+ const [error, setError] = useState
+ {highlightedHtml && !error && (
+
+ )}
+
+
- {!hideToolBar && (
- {
- editorRef?.current?.goToDiff(target);
- }}
- onAcceptAll={() => {
- acceptAll(item.modifiedCode);
- }}
- onRejectAll={() => {
- rejectAll(item.originalCode);
- }}
- item={item}
- />
- )}
- {
- editorRef.current = editor;
- handleCalcHeight();
- editor.getOriginalEditor().updateOptions({
- lineNumbers: 'off',
- });
- }}
- beforeMount={(monaco) => {
- monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
- jsx: monaco.languages.typescript.JsxEmit.React,
- target: monaco.languages.typescript.ScriptTarget.ESNext,
- jsxFactory: 'React.createElement',
- reactNamespace: 'React',
- allowNonTsExtensions: true,
- allowJs: true,
- });
- }}
- options={{
- renderSideBySide: false,
- contextmenu: false,
- readOnly: true,
- fontSize: 14,
- hideUnchangedRegions: { enabled: true },
- minimap: { enabled: false },
- diffAlgorithm: 'advanced',
- renderWhitespace: 'boundary',
- }}
- />
-
- );
-});
+ return (
+
+ {!hideToolBar && (
+ {
+ console.log('onGotoDiff');
+ // Simple diff navigation
+ }}
+ onAcceptAll={() => {
+ snap.approvalModal?.resolve('approve_always_edit');
+ }}
+ onRejectAll={() => {
+ snap.approvalModal?.resolve('deny');
+ }}
+ item={item}
+ />
+ )}
+
+ );
+ },
+);
export default CodeDiffView;
diff --git a/browser/src/components/CodeViewer/CodeNormalView/index.tsx b/browser/src/components/CodeViewer/CodeNormalView/index.tsx
index 6c49bdc35..ef2051bdc 100644
--- a/browser/src/components/CodeViewer/CodeNormalView/index.tsx
+++ b/browser/src/components/CodeViewer/CodeNormalView/index.tsx
@@ -1,16 +1,8 @@
-import { Editor } from '@monaco-editor/react';
import { createStyles } from 'antd-style';
-import * as monaco from 'monaco-editor';
-import {
- forwardRef,
- useEffect,
- useImperativeHandle,
- useRef,
- useState,
-} from 'react';
+import { forwardRef, useEffect, useState } from 'react';
+import { CodeRenderer } from '@/components/CodeRenderer/CodeRenderer';
import type {
CodeNormalViewerMetaInfo,
- CodeNormalViewerMode,
CodeNormalViewerTabItem,
} from '@/types/codeViewer';
import NormalToolbar from '../NormalToolbar';
@@ -27,15 +19,13 @@ export interface CodeNormalViewRef {
}
const useStyle = createStyles(
- (
- { css },
- { mode, maxHeight }: { mode?: CodeNormalViewerMode; maxHeight?: number },
- ) => {
+ ({ css }, { maxHeight }: { maxHeight?: number }) => {
return {
container: css`
height: 100%;
display: flex;
flex-direction: column;
+ overflow: hidden;
${
maxHeight
? css`
@@ -47,136 +37,46 @@ const useStyle = createStyles(
editor: css`
height: 100%;
flex: 1;
- `,
- linesDecorations: css`
- background-color: ${mode === 'new' ? '#e6ffed' : '#ffeef0'};
- `,
- linesDecorationsGutter: css`
- width: 3px !important;
- margin-left: 3px;
- background-color: ${mode === 'new' ? '#2cbe4e' : '#cb2431'};
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
`,
};
},
);
const CodeNormalView = forwardRef
+
+
{!hideToolbar && {
- editorRef.current = editor;
- handleCalcHeight();
- handleDecorateLine();
- setMetaInfo({
- lineCount: editor.getModel()?.getLineCount() || 0,
- charCount: item.code.length,
- });
- }}
- beforeMount={(monaco) => {
- monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
- jsx: monaco.languages.typescript.JsxEmit.React,
- target: monaco.languages.typescript.ScriptTarget.ESNext,
- jsxFactory: 'React.createElement',
- reactNamespace: 'React',
- allowNonTsExtensions: true,
- allowJs: true,
- });
- }}
- options={{
- readOnly: true,
- fontSize: 14,
- minimap: { enabled: false },
- }}
- />
+
);
});
diff --git a/browser/src/components/CodeViewer/DiffStatBlocks/index.tsx b/browser/src/components/CodeViewer/DiffStatBlocks/index.tsx
index e9189312c..4e3ba387b 100644
--- a/browser/src/components/CodeViewer/DiffStatBlocks/index.tsx
+++ b/browser/src/components/CodeViewer/DiffStatBlocks/index.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
import { useMemo } from 'react';
import type { DiffStat } from '@/types/codeViewer';
-interface Props {
+interface DiffStatBlocksProps {
diffStat?: DiffStat;
}
@@ -31,7 +31,7 @@ const useStyles = createStyles(({ css }) => {
};
});
-const DiffStatBlocks = (props: Props) => {
+const DiffStatBlocks = (props: DiffStatBlocksProps) => {
const { diffStat } = props;
const { styles } = useStyles();
@@ -75,25 +75,25 @@ const DiffStatBlocks = (props: Props) => {
return (
+
- {diffStatArray.map((statType, index) => {
+ {diffStatArray.map((statType) => {
if (statType === 'add') {
return (
);
} else if (statType === 'remove') {
return (
);
} else {
return (
);
diff --git a/browser/src/components/CodeViewer/index.tsx b/browser/src/components/CodeViewer/index.tsx
index dfeebc1d5..88115189e 100644
--- a/browser/src/components/CodeViewer/index.tsx
+++ b/browser/src/components/CodeViewer/index.tsx
@@ -1,14 +1,7 @@
import { VerticalLeftOutlined } from '@ant-design/icons';
-import { loader } from '@monaco-editor/react';
import { Tabs, type TabsProps } from 'antd';
import { createStyles } from 'antd-style';
-import * as monaco from 'monaco-editor';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { useSnapshot } from 'valtio';
import { actions, state } from '@/state/codeViewer';
import type {
@@ -19,31 +12,6 @@ import DevFileIcon from '../DevFileIcon';
import CodeDiffView from './CodeDiffView';
import CodeNormalView from './CodeNormalView';
-// Monaco editor config
-self.MonacoEnvironment = {
- getWorker(_, label) {
- if (label === 'json') {
- return new jsonWorker();
- }
- if (label === 'css' || label === 'scss' || label === 'less') {
- return new cssWorker();
- }
- if (label === 'html' || label === 'handlebars' || label === 'razor') {
- return new htmlWorker();
- }
- if (label === 'typescript' || label === 'javascript') {
- return new tsWorker();
- }
- return new editorWorker();
- },
-};
-
-loader.config({
- monaco: monaco,
-});
-
-loader.init();
-
const useStyle = createStyles(({ css, token }) => {
return {
layout: css`
diff --git a/browser/src/components/ContextTags/EllipsisText/index.tsx b/browser/src/components/ContextTags/EllipsisText/index.tsx
deleted file mode 100644
index 7ceff3ba4..000000000
--- a/browser/src/components/ContextTags/EllipsisText/index.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import {
- type DetailedHTMLProps,
- type HTMLAttributes,
- useEffect,
- useRef,
- useState,
-} from 'react';
-
-interface Props
- extends DetailedHTMLProps, HTMLSpanElement> {
- maxWidth: number;
- children?: string;
-}
-
-const EllipsisText = (props: Props) => {
- const { maxWidth, children, style, ...restProps } = props;
- const containerRef = useRef(null);
- const [text, setText] = useState(children);
- const [originalText, setOriginalText] = useState(children);
-
- useEffect(() => {
- setOriginalText(children);
- setText(children);
- }, [children]);
-
- useEffect(() => {
- const checkOverflow = () => {
- const container = containerRef.current;
- if (!container) return;
-
- const textWidth = container.scrollWidth;
-
- if (textWidth > maxWidth) {
- // 文本溢出，需要添加中间省略号
- const str = originalText || '';
- const mid = Math.floor(str.length / 2);
- let left = mid;
- let right = mid + 1;
- let result = str;
-
- // 二分查找合适的截断点
- while (left >= 0 && right <= str.length) {
- const newStr = str.substring(0, left) + '...' + str.substring(right);
- container.textContent = newStr;
- if (container.scrollWidth <= maxWidth) {
- result = newStr;
- break;
- }
- left--;
- right++;
- }
-
- setText(result);
- } else {
- // 文本未溢出，显示完整内容
- setText(originalText);
- }
- };
-
- checkOverflow();
-
- // 添加resize事件监听
- const resizeObserver = new ResizeObserver(checkOverflow);
- if (containerRef.current) {
- resizeObserver.observe(containerRef.current);
- }
-
- return () => {
- resizeObserver.disconnect();
- };
- }, [originalText, maxWidth]);
- return (
-
- {text}
-
- );
-};
-
-export default EllipsisText;
diff --git a/browser/src/components/ContextTags/index.tsx b/browser/src/components/ContextTags/index.tsx
deleted file mode 100644
index e5b964b05..000000000
--- a/browser/src/components/ContextTags/index.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import Icon, { CloseOutlined, FileUnknownOutlined } from '@ant-design/icons';
-import { Image, Popover, Tag } from 'antd';
-import { createStyles } from 'antd-style';
-import { useState } from 'react';
-import { readFile } from '@/api/files';
-import type { FileItem, ImageItem } from '@/api/model';
-import * as codeViewer from '@/state/codeViewer';
-import DevFileIcon from '../DevFileIcon';
-import EllipsisText from './EllipsisText';
-
-const useStyle = createStyles(({ css }) => {
- return {
- icon: css`
- margin-right: 4px;
- width: 12px;
- height: 12px;
- `,
- tag: css`
- user-select: none;
- margin: 0 2px;
- line-height: inherit;
- `,
- };
-});
-
-export const FileContextTag = ({
- displayText,
- onClose,
- context,
-}: {
- displayText: string;
- onClose?: () => void;
- context?: FileItem;
-}) => {
- const [hover, setHover] = useState(false);
-
- const { styles } = useStyle();
-
- const isFile = context?.type === 'file';
-
- return (
- setHover(true)}
- onMouseLeave={() => setHover(false)}
- onClick={async () => {
- if (isFile) {
- const fileContent = (await readFile(displayText)).data.content;
- codeViewer.actions.updateNormalViewerConfig({
- path: displayText,
- code: fileContent,
- });
- codeViewer.actions.setVisible(true);
- }
- }}
- >
- {onClose && hover ? (
- {
- e.stopPropagation();
- onClose?.();
- }}
- />
- ) : (
- context && (
- {displayText}
-
- );
-};
-
-export const AttachmentContextTag = ({
- displayText,
- onClose,
-}: {
- displayText: string;
- onClose?: () => void;
-}) => {
- const [hover, setHover] = useState(false);
- const { styles } = useStyle();
-
- return (
- setHover(true)}
- onMouseLeave={() => setHover(false)}
- >
- {onClose && hover ? (
- {displayText}
-
- );
-};
-
-export const ImageContextTag = ({
- displayText,
- onClose,
- context,
-}: {
- displayText: string;
- onClose?: () => void;
- context?: ImageItem;
-}) => {
- const [hover, setHover] = useState(false);
- const { styles } = useStyle();
-
- return (
- setHover(true)}
- onMouseLeave={() => setHover(false)}
- >
- {onClose && hover ? (
- (
- {displayText}
-
-
- );
-};
diff --git a/browser/src/components/DisplayMessage/index.tsx b/browser/src/components/DisplayMessage/index.tsx
new file mode 100644
index 000000000..e527c58e7
--- /dev/null
+++ b/browser/src/components/DisplayMessage/index.tsx
@@ -0,0 +1,28 @@
+import { Alert } from 'antd';
+import type { UIDisplayMessage } from '@/types/chat';
+import MarkdownRenderer from '@/components/MarkdownRenderer';
+
+interface DisplayMessageProps {
+ message: UIDisplayMessage;
+}
+
+const DisplayMessage: React.FC = ({ message }) => {
+ switch (message.content.type) {
+ case 'error':
+ return = memo(
+ ({ currentPath, onPathChange }) => {
+ const breadcrumbItems = useMemo(() => {
+ if (!currentPath) return [];
+
+ const parts = currentPath.split('/').filter(Boolean);
+ const items: { key: string; title: React.ReactNode }[] = [];
+
+ parts.forEach((part, index) => {
+ const segmentPath = `/${parts.slice(0, index + 1).join('/')}`;
+ const isLast = index === parts.length - 1;
+
+ items.push({
+ key: segmentPath,
+ title: isLast ? (
+ {part}
+ ) : (
+ {
+ onPathChange(segmentPath);
+ }}
+ className={styles.breadcrumbButton}
+ >
+ {part}
+
+ ),
+ });
+ });
+
+ return items;
+ }, [currentPath, onPathChange]);
+
+ return (
+ = memo(
+ ({ folder, onSelect, isSelected = false, level = 0 }) => {
+ const { t } = useTranslation();
+ const handleClick = useCallback(() => {
+ onSelect(folder.path);
+ }, [folder.path, onSelect]);
+
+ const getIcon = () => {
+ if (folder.isPackage) {
+ return = memo(
+ ({ currentPath, onPathChange, height }) => {
+ const { t } = useTranslation();
+ const [folders, setFolders] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [searchQuery, setSearchQuery] = useState('');
+ const [selectedPath, setSelectedPath] = useState(null);
+
+ const fetchFolders = useCallback(
+ async (path: string) => {
+ setLoading(true);
+ setError(null);
+
+ try {
+ const result = await getFolderList(path);
+ if (result.success) {
+ setFolders(result.data.children || []);
+ } else {
+ setError(result.message || t('folderPicker.fetchError'));
+ setFolders([]);
+ }
+ } catch (err) {
+ const errorMsg =
+ err instanceof Error ? err.message : t('folderPicker.networkError');
+ setError(errorMsg);
+ setFolders([]);
+ } finally {
+ setLoading(false);
+ }
+ },
+ [t],
+ );
+
+ const handleFolderSelect = useCallback(
+ (folderPath: string) => {
+ setSelectedPath(folderPath);
+ onPathChange(folderPath);
+ },
+ [onPathChange],
+ );
+
+ const handleRetry = useCallback(() => {
+ fetchFolders(currentPath);
+ }, [fetchFolders, currentPath]);
+
+ const filteredFolders = useMemo(() => {
+ let filtered = folders;
+
+ // Filter hidden folders (always hide folders starting with .)
+ filtered = filtered.filter((folder) => !folder.hidden);
+
+ // Search filter
+ if (searchQuery.trim()) {
+ const query = searchQuery.toLowerCase().trim();
+ filtered = filtered.filter((folder) =>
+ folder.name.toLowerCase().includes(query),
+ );
+ }
+
+ // Sort by name
+ return filtered.sort((a, b) => {
+ return a.name.localeCompare(b.name, 'zh-CN', { numeric: true });
+ });
+ }, [folders, searchQuery]);
+
+ // Clear selected state and force refresh when path changes
+ useEffect(() => {
+ setSelectedPath(null);
+ // Force refresh folder list for current path
+ if (currentPath) {
+ fetchFolders(currentPath);
+ }
+ }, [currentPath, fetchFolders]);
+
+ if (loading) {
+ return (
+ = memo(
+ ({ initialPath = '/', onFolderChange, height = 400, className }) => {
+ const [currentPath, setCurrentPath] = useState(initialPath);
+
+ const handlePathChange = useCallback(
+ (newPath: string) => {
+ setCurrentPath(newPath);
+ onFolderChange?.(newPath);
+ },
+ [onFolderChange, currentPath],
+ );
+
+ useEffect(() => {
+ setCurrentPath(initialPath);
+ }, [initialPath]);
+
+ return (
+ = ({ children }) => {
return (
-
- {children}
-
+
);
};
diff --git a/browser/src/components/Loading/index.tsx b/browser/src/components/Loading/index.tsx
new file mode 100644
index 000000000..f08c39b4f
--- /dev/null
+++ b/browser/src/components/Loading/index.tsx
@@ -0,0 +1,24 @@
+import { Spin } from 'antd';
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ css }) => {
+ return {
+ loading: css`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ `,
+ };
+});
+
+const Loading: React.FC = () => {
+ const { styles } = useStyles();
+ return (
+ = ({ content }) => {
- const { t } = useTranslation();
- const { writeText } = useClipboard();
- const [copiedCode, setCopiedCode] = useState(null);
-
- const copyToClipboard = async (code: string) => {
- try {
- await writeText(code);
- setCopiedCode(code);
- message.success(t('markdown.copySuccess'));
-
- // 2秒后重置复制状态
- setTimeout(() => {
- setCopiedCode(null);
- }, 2000);
- } catch (err) {
- message.error(t('markdown.copyFailed'));
- }
- };
-
const components: Components = {
- code({ className, children, ...props }) {
- const match = /language-(\w+)/.exec(className || '');
- const language = match ? match[1] : '';
- const codeString = String(children).replace(/\n$/, '');
-
- if (language) {
- const isCopied = copiedCode === codeString;
-
- return (
- = ({
+ onOpenManager,
+}) => {
+ const { styles } = useStyles();
+ const { mcpServers, recommendedMcpServices } = useSnapshot(state);
+ const { t } = useTranslation();
+
+ const recommendedList = useMemo(() => {
+ return recommendedMcpServices
+ .filter((item) => !mcpServers.some((server) => server.name === item.name))
+ .map((item) => ({
+ ...item,
+ disable: true,
+ }));
+ }, [recommendedMcpServices, mcpServers]) as McpServerItemConfig[];
+
+ const onToggle = async (
+ server: McpServerItemConfig,
+ isRecommended: boolean,
+ ) => {
+ if (isRecommended) {
+ await mcpActions.addMcpServer(server, false);
+ } else {
+ await mcpActions.toggleMcpServer(server, false);
+ }
+ };
+
+ const recommendedContent = useMemo(() => {
+ if (recommendedList.length === 0) {
+ return null;
+ }
+ return (
+ <>
+ onToggle(server, true)}
+ isRecommended={true}
+ />
+ ))}
+ {mcpServers.length > 0 && = ({
+ server,
+ onToggle,
+ isRecommended,
+}) => {
+ const { styles } = useStyles();
+ const { t } = useTranslation();
+
+ return (
+ = ({ loading = false }) => {
+import { useSnapshot } from 'valtio';
+import { SenderButton } from '@/components/ChatSender/SenderComponent/SenderButton';
+// import McpManager from '@/components/McpManager';
+import { state as chatState } from '@/state/chat';
+import { actions, state } from '@/state/mcp';
+import McpDropdownContent from './McpDropdownContent';
+
+const McpDropdown: React.FC = () => {
const { t } = useTranslation();
- // Simplified boolean states with ahooks
const [mcpManagerOpen, { toggle: toggleMcpManager }] = useToggle(false);
- const [
- mcpLoading,
- { setTrue: setMcpLoadingTrue, setFalse: setMcpLoadingFalse },
- ] = useBoolean(false);
const [
dropdownOpen,
{ setTrue: setDropdownTrue, setFalse: setDropdownFalse },
] = useBoolean(false);
- const [
- editApiKeyModalOpen,
- { setTrue: openEditApiKeyModal, setFalse: closeEditApiKeyModal },
- ] = useBoolean(false);
- // Combined modal states
- const [modalState, setModalState] = useSetState<{
- editingService: McpServer | null;
- editApiKey: string;
- }>({
- editingService: null,
- editApiKey: '',
+ const { loading, run } = useRequest(() => actions.getMcpStatus(), {
+ manual: true,
});
-
- // Keep complex state as is since it's not a simple boolean
- const [mcpServers, setMcpServers] = useState([]);
-
- const {
- allKnownServices,
- serviceConfigs,
- updateKnownServices,
- updateServiceConfigs,
- loadMcpData,
- initializeFromLocalStorage,
- } = useMcpServices();
-
- const presetMcpServices = getPresetMcpServicesWithTranslations(t);
-
- const loadMcpServers = async () => {
- try {
- setMcpLoadingTrue();
- // Load both global and project-level MCP services simultaneously
- const { globalServers, projectServers } = await loadMcpData();
-
- // Restore known services and configurations from localStorage (ensure using latest data)
- const { knownServices, configs } = initializeFromLocalStorage();
-
- const mcpList: McpServer[] = [];
-
- // Add global services
- Object.entries(globalServers).forEach(([name, config]) => {
- knownServices.add(name);
- const serverConfig = config as McpServerConfig;
- const configWithScope = { ...serverConfig, scope: 'global' as const };
- configs.set(`${MCP_KEY_PREFIXES.GLOBAL}-${name}`, configWithScope);
- mcpList.push({
- key: `${MCP_KEY_PREFIXES.GLOBAL}-${name}`,
- name,
- config: configWithScope,
- installed: true,
- scope: 'global',
- });
- });
-
- // Add project services
- Object.entries(projectServers).forEach(([name, config]) => {
- knownServices.add(name);
- const serverConfig = config as McpServerConfig;
- const configWithScope = { ...serverConfig, scope: 'project' as const };
- configs.set(`${MCP_KEY_PREFIXES.PROJECT}-${name}`, configWithScope);
- mcpList.push({
- key: `${MCP_KEY_PREFIXES.PROJECT}-${name}`,
- name,
- config: configWithScope,
- installed: true,
- scope: 'project',
- });
- });
-
- // Add known but uninstalled services
- knownServices.forEach((serviceName) => {
- const globalConfig = configs.get(
- `${MCP_KEY_PREFIXES.GLOBAL}-${serviceName}`,
- );
- const projectConfig = configs.get(
- `${MCP_KEY_PREFIXES.PROJECT}-${serviceName}`,
- );
-
- // If global configuration exists but not installed
- if (globalConfig && !globalServers[serviceName]) {
- mcpList.push({
- key: `${MCP_KEY_PREFIXES.DISABLED_GLOBAL}-${serviceName}`,
- name: serviceName,
- config: globalConfig,
- installed: false,
- scope: 'global',
- });
- }
-
- // If project configuration exists but not installed
- if (projectConfig && !projectServers[serviceName]) {
- mcpList.push({
- key: `${MCP_KEY_PREFIXES.DISABLED_PROJECT}-${serviceName}`,
- name: serviceName,
- config: projectConfig,
- installed: false,
- scope: 'project',
- });
- }
- });
-
- setMcpServers(mcpList);
- updateKnownServices(knownServices);
- updateServiceConfigs(configs);
- } catch (error) {
- console.error('Failed to load MCP servers:', error);
- message.error(t('mcp.loadFailed'));
- } finally {
- setMcpLoadingFalse();
- }
- };
-
- const handleToggleEnabled = async (
- serverName: string,
- enabled: boolean,
- scope: string,
- ) => {
- try {
- if (enabled) {
- // Enable service - use the service's original scope
- const cachedConfig = serviceConfigs.get(`${scope}-${serverName}`);
- if (cachedConfig) {
- // Restore configuration from cache
- const configToAdd = {
- name: serverName,
- command: cachedConfig.command,
- args: cachedConfig.args,
- url: cachedConfig.url,
- transport:
- cachedConfig.type || (cachedConfig.url ? 'sse' : 'stdio'),
- env: cachedConfig.env
- ? JSON.stringify(cachedConfig.env)
- : undefined,
- global: scope === 'global',
- };
-
- await addMCPServer(configToAdd);
- message.success(
- t('mcp.enabled', {
- name: serverName,
- scope: scope === 'global' ? t('mcp.global') : t('mcp.project'),
- }),
- );
- } else {
- message.error(t('mcp.noCachedConfig', { name: serverName, scope }));
- return;
- }
- } else {
- // Disable service - first save configuration to cache, then remove from corresponding scope configuration
- const serverToDisable = mcpServers.find(
- (s) => s.name === serverName && s.scope === scope,
- );
-
- if (serverToDisable && serverToDisable.config) {
- // Save configuration to cache
- const newConfigs = new Map(serviceConfigs);
- const config = serverToDisable.config;
- const configToCache = {
- command: config.command,
- args: config.args || [],
- url: config.url,
- type: config.type || (config.url ? 'sse' : 'stdio'),
- env: config.env,
- scope: scope as 'global' | 'project',
- };
- newConfigs.set(`${scope}-${serverName}`, configToCache);
- updateServiceConfigs(newConfigs);
-
- // Update known services list
- const newKnownServices = new Set([...allKnownServices, serverName]);
- updateKnownServices(newKnownServices);
- }
-
- // Remove from corresponding scope configuration
- await removeMCPServer(serverName, scope === 'global');
- message.success(
- t('mcp.disabled', {
- name: serverName,
- scope: scope === 'global' ? t('mcp.global') : t('mcp.project'),
- }),
- );
- }
-
- // Reload services list
- await loadMcpServers();
- } catch (error) {
- console.error('Failed to toggle MCP server:', error);
- message.error(
- t('mcp.toggleFailed', {
- action: enabled ? t('common.enable') : t('common.disable'),
- name: serverName,
- }),
- );
- }
- };
-
- const handleEditApiKey = (server: McpServer) => {
- const currentKey =
- server.config.args
- ?.find((arg: string) => arg.includes(FIGMA_CONFIG.API_KEY_ARG))
- ?.split('=')[1] || '';
-
- setModalState({
- editingService: server,
- editApiKey: currentKey === FIGMA_CONFIG.DEFAULT_API_KEY ? '' : currentKey,
- });
- openEditApiKeyModal();
- };
-
- const handleSaveApiKey = async () => {
- if (!modalState.editApiKey.trim()) {
- message.error(t('mcp.apiKeyRequired'));
- return;
- }
-
- if (!modalState.editingService) {
- message.error('No service selected');
- return;
- }
-
- try {
- const updatedArgs = (modalState.editingService.config.args || []).map(
- (arg: string) =>
- arg.includes(FIGMA_CONFIG.API_KEY_ARG)
- ? `${FIGMA_CONFIG.API_KEY_ARG}=${modalState.editApiKey.trim()}`
- : arg,
- );
-
- await updateMCPServer(modalState.editingService.name, {
- args: updatedArgs,
- global: modalState.editingService.scope === 'global',
- });
-
- message.success(t('mcp.apiKeyUpdated'));
- loadMcpServers();
- closeEditApiKeyModal();
- setModalState({
- editingService: null,
- editApiKey: '',
- });
- } catch (error) {
- message.error(t('mcp.updateFailed'));
- }
- };
-
- const handleQuickAdd = async (service: PresetMcpService) => {
- try {
- // Add to project-level configuration
- const configToAdd = {
- ...service.config,
- global: false, // Force project level
- };
-
- await addMCPServer(configToAdd);
- message.success(t('mcp.added', { name: service.name }));
-
- // Reload services list
- await loadMcpServers();
- } catch (error) {
- console.error('Failed to add preset service:', error);
- message.error(t('mcp.addFailed', { name: service.name }));
- }
- };
+ const { initialized } = useSnapshot(chatState);
useEffect(() => {
- const handleStorageChange = (e: StorageEvent) => {
- // Reload service state when localStorage changes
- if (
- e.key === MCP_STORAGE_KEYS.KNOWN_SERVICES ||
- e.key === MCP_STORAGE_KEYS.SERVICE_CONFIGS
- ) {
- loadMcpServers();
- }
- };
- window.addEventListener('storage', handleStorageChange);
- return () => {
- window.removeEventListener('storage', handleStorageChange);
- };
- }, [allKnownServices, serviceConfigs]);
-
- const dropdownItems = [
- {
- key: MCP_MENU_KEYS.MANAGE,
- label: (
-
-
- ),
- onClick: () => toggleMcpManager(),
- },
- { type: 'divider' as const },
- // Installed services
- ...mcpServers
- .filter((server) => server.installed)
- .map((server) => ({
- key: server.key,
- label: (
- {
- // Prevent dropdown from closing when menu is clicked
- domEvent.stopPropagation();
- },
}}
placement="topCenter"
trigger={['click']}
@@ -500,66 +42,26 @@ const McpDropdown: React.FC = ({ loading = false }) => {
onOpenChange={(open) => {
if (open) {
setDropdownTrue();
- loadMcpServers();
} else {
setDropdownFalse();
}
}}
- overlayClassName="w-80"
+ overlayStyle={{ width: '220px' }}
+ dropdownRender={() => (
+
+ MCP
+
- {
toggleMcpManager();
- loadMcpServers();
}}
- />
-
- {
- closeEditApiKeyModal();
- setModalState({
- editingService: null,
- editApiKey: '',
- });
- }}
- okText={t('common.save')}
- cancelText={t('common.cancel')}
- getContainer={() => document.body}
- mask={true}
- maskClosable={false}
- keyboard={false}
- destroyOnClose={true}
- >
-
+ /> */}
);
};
diff --git a/browser/src/components/McpManager/McpAddForm/McpAddMode.tsx b/browser/src/components/McpManager/McpAddForm/McpAddMode.tsx
new file mode 100644
index 000000000..b8d95fe09
--- /dev/null
+++ b/browser/src/components/McpManager/McpAddForm/McpAddMode.tsx
@@ -0,0 +1,60 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import type { McpConfigItem as McpConfigItemType } from '@/types/mcp';
+import { McpConfigItem } from './McpConfigItem';
+import styles from './index.module.css';
+
+interface McpAddModeProps {
+ configs: McpConfigItemType[];
+ onUpdateConfig: (
+ id: string,
+ field: keyof McpConfigItemType,
+ value: string | 'global' | 'project' | 'json' | 'form',
+ ) => void;
+ onRemoveConfig: (id: string) => void;
+ onAddNewConfig: () => void;
+}
+
+/**
+ * Add mode component for adding multiple MCP server configurations
+ */
+export const McpAddMode: React.FC = ({
+ configs,
+ onUpdateConfig,
+ onRemoveConfig,
+ onAddNewConfig,
+}) => {
+ const { t } = useTranslation();
+
+ return (
+ <>
+ {/* Multiple configuration items */}
+ = ({
+ config,
+ index,
+ canDelete,
+ onUpdateConfig,
+ onRemoveConfig,
+}) => {
+ const { t } = useTranslation();
+
+ return (
+ = ({
+ addScope,
+ onScopeChange,
+}) => {
+ return (
+ <>
+ {/* Scope selector for edit mode */}
+ = ({
+ value = '',
+ onChange,
+ height = '200px',
+ disabled = false,
+}) => {
+ const { t } = useTranslation();
+ const [isValid, setIsValid] = useState(true);
+ const [errorMessage, setErrorMessage] = useState('');
+
+ const handleChange = (val: string | undefined) => {
+ const newValue = val || '';
+
+ // Validate JSON format
+ try {
+ if (newValue.trim()) {
+ JSON.parse(newValue);
+ }
+ setIsValid(true);
+ setErrorMessage('');
+ } catch (error) {
+ setIsValid(false);
+ setErrorMessage(
+ error instanceof Error
+ ? error.message
+ : t('mcp.jsonFormatErrorMessage'),
+ );
+ }
+
+ onChange?.(newValue);
+ };
+
+ const handleEditorMount = (editor: any) => {
+ // Set default empty object
+ if (!value.trim() && !disabled) {
+ const emptyJson = {};
+ const jsonString = JSON.stringify(emptyJson, null, 2);
+ editor.setValue(jsonString);
+ handleChange(jsonString);
+ }
+ };
+
+ return (
+ = ({
+ value,
+ onChange,
+}) => {
+ const { t } = useTranslation();
+
+ return (
+ = ({
+ visible,
+ inputMode: _inputMode, // Keep for interface compatibility but mark as unused
+ addScope,
+ onCancel,
+ onSuccess,
+ onScopeChange,
+ editMode = false,
+ editingServer,
+ onEditServer,
+}) => {
+ const { t } = useTranslation();
+ const [form] = Form.useForm();
+
+ // Configuration management hook for add mode
+ const { mcpConfigs, addNewConfig, removeConfig, updateConfig, resetConfigs } =
+ useMcpConfigManager();
+
+ // Form submission hook
+ const { handleSubmit, contextHolder } = useMcpFormSubmit({
+ editMode,
+ editingServer,
+ addScope,
+ onEditServer,
+ onSuccess: () => {
+ form.resetFields();
+ if (!editMode) {
+ resetConfigs();
+ }
+ onSuccess();
+ },
+ });
+
+ // Pre-fill form when in edit mode
+ useEffect(() => {
+ if (editMode && editingServer && visible) {
+ const envString = editingServer.env
+ ? typeof editingServer.env === 'string'
+ ? editingServer.env
+ : JSON.stringify(editingServer.env, null, 2)
+ : undefined;
+
+ form.setFieldsValue({
+ name: editingServer.name,
+ transport: editingServer.type || 'stdio',
+ command: editingServer.command,
+ args: editingServer.args?.join(' '),
+ url: editingServer.url,
+ env: envString,
+ });
+ } else if (!editMode) {
+ form.resetFields();
+ }
+ }, [editMode, editingServer, visible, form]);
+
+ const handleFormSubmit = async (values: FormValues) => {
+ await handleSubmit(values, editMode ? undefined : mcpConfigs);
+ };
+
+ const handleCancel = () => {
+ form.resetFields();
+ if (!editMode) {
+ resetConfigs();
+ }
+ onCancel();
+ };
+
+ return (
+ <>
+ {contextHolder}
+
+
+ {editMode ? t('mcp.editServer') : t('mcp.addServer')}
+
+
+ }
+ open={visible}
+ onCancel={handleCancel}
+ footer={[
+ ,
+ ,
+ ]}
+ width={640}
+ className={styles.addFormModal}
+ destroyOnClose
+ maskClosable={false}
+ >
+
+
+ );
+ },
+);
+
+Breadcrumb.displayName = 'Breadcrumb';
+
+export default Breadcrumb;
diff --git a/browser/src/components/FolderPicker/FolderItem.module.css b/browser/src/components/FolderPicker/FolderItem.module.css
new file mode 100644
index 000000000..10e806346
--- /dev/null
+++ b/browser/src/components/FolderPicker/FolderItem.module.css
@@ -0,0 +1,140 @@
+.folderItem {
+ display: flex;
+ align-items: center;
+ padding: 8px 12px;
+ margin: 2px 0;
+ border-radius: 12px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ user-select: none;
+ min-height: 40px;
+ border: 1px solid transparent;
+ background: #fff;
+}
+
+.folderItem:hover {
+ background: rgba(99, 102, 241, 0.04);
+ border-color: rgba(99, 102, 241, 0.15);
+ transform: none;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.folderItem.selected {
+ background: rgba(99, 102, 241, 0.06);
+ border-color: rgba(99, 102, 241, 0.3);
+ transform: none;
+ box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
+}
+
+.folderItem.hidden {
+ opacity: 0.6;
+}
+
+.content {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ min-width: 0;
+}
+
+.iconAndName {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ min-width: 0;
+ gap: 12px;
+}
+
+.folderIcon {
+ color: #f59e0b;
+ font-size: 18px;
+ flex-shrink: 0;
+ transition: all 0.2s ease;
+}
+
+.packageIcon {
+ color: #10b981;
+ font-size: 18px;
+ flex-shrink: 0;
+ transition: all 0.2s ease;
+}
+
+.folderItem:hover .folderIcon {
+ color: #d97706;
+ transform: scale(1.1);
+}
+
+.folderItem:hover .packageIcon {
+ color: #059669;
+ transform: scale(1.1);
+}
+
+.name {
+ font-size: 15px;
+ color: #374151;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex: 1;
+ min-width: 0;
+ font-weight: 500;
+ transition: color 0.2s ease;
+}
+
+.folderItem:hover .name {
+ color: #1f2937;
+}
+
+.folderItem.selected .name {
+ color: #374151;
+ font-weight: 600;
+}
+
+.badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 4px 10px;
+ font-size: 11px;
+ line-height: 16px;
+ color: #fff;
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+ border-radius: 8px;
+ font-weight: 600;
+ text-transform: uppercase;
+ flex-shrink: 0;
+ box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+ transition: all 0.2s ease;
+}
+
+.folderItem:hover .badge {
+ transform: scale(1.05);
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .folderItem {
+ padding: 10px 12px;
+ min-height: 44px;
+ margin: 3px 0;
+ }
+
+ .iconAndName {
+ gap: 10px;
+ }
+
+ .folderIcon,
+ .packageIcon {
+ font-size: 16px;
+ }
+
+ .name {
+ font-size: 14px;
+ }
+
+ .badge {
+ font-size: 10px;
+ padding: 3px 8px;
+ }
+}
diff --git a/browser/src/components/FolderPicker/FolderItem.tsx b/browser/src/components/FolderPicker/FolderItem.tsx
new file mode 100644
index 000000000..6f652dca2
--- /dev/null
+++ b/browser/src/components/FolderPicker/FolderItem.tsx
@@ -0,0 +1,47 @@
+import { FileOutlined, FolderFilled, FolderOutlined } from '@ant-design/icons';
+import { Tag } from 'antd';
+import type React from 'react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './FolderItem.module.css';
+import type { FolderItemProps } from './types';
+
+const FolderItem: React.FC
+
+ );
+ },
+);
+
+export default FolderItem;
diff --git a/browser/src/components/FolderPicker/FolderTree.module.css b/browser/src/components/FolderPicker/FolderTree.module.css
new file mode 100644
index 000000000..bb9e04b63
--- /dev/null
+++ b/browser/src/components/FolderPicker/FolderTree.module.css
@@ -0,0 +1,290 @@
+.folderTree {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: hidden;
+}
+
+.toolbar {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 4px 12px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+ background: #fefefe;
+ flex-shrink: 0;
+}
+
+.searchInput {
+ flex: 1;
+ min-width: 0;
+}
+
+.refreshButton {
+ flex-shrink: 0;
+ width: 36px;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ border-radius: 8px;
+ border: none;
+ background: transparent;
+ color: #6366f1;
+ transition: all 0.2s ease;
+}
+
+.refreshButton:hover {
+ background: rgba(99, 102, 241, 0.1);
+ transform: none;
+ box-shadow: none;
+}
+
+.folderList {
+ flex: 1;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 8px 16px 16px;
+}
+
+.folderList::-webkit-scrollbar {
+ width: 6px;
+}
+
+.folderList::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.02);
+ border-radius: 8px;
+}
+
+.folderList::-webkit-scrollbar-thumb {
+ background: linear-gradient(
+ 135deg,
+ rgba(99, 102, 241, 0.3) 0%,
+ rgba(139, 92, 246, 0.3) 100%
+ );
+ border-radius: 8px;
+ transition: all 0.2s ease;
+}
+
+.folderList::-webkit-scrollbar-thumb:hover {
+ background: linear-gradient(
+ 135deg,
+ rgba(99, 102, 241, 0.5) 0%,
+ rgba(139, 92, 246, 0.5) 100%
+ );
+}
+
+.emptyState {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ min-height: 160px;
+ color: #6b7280;
+ text-align: center;
+ padding: 24px;
+}
+
+.emptyIcon {
+ font-size: 64px;
+ margin-bottom: 20px;
+ opacity: 0.6;
+ color: #d1d5db;
+ background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.loading {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ min-height: 160px;
+ background: linear-gradient(
+ 135deg,
+ rgba(99, 102, 241, 0.02) 0%,
+ rgba(139, 92, 246, 0.02) 100%
+ );
+}
+
+.error {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ min-height: 160px;
+ color: #ef4444;
+ padding: 24px;
+ text-align: center;
+ background: linear-gradient(
+ 135deg,
+ rgba(239, 68, 68, 0.02) 0%,
+ rgba(248, 113, 113, 0.02) 100%
+ );
+ border-radius: 12px;
+ margin: 20px;
+}
+
+.errorIcon {
+ font-size: 48px;
+ margin-bottom: 16px;
+ color: #ef4444;
+ opacity: 0.8;
+}
+
+.errorMessage {
+ font-size: 15px;
+ margin-bottom: 20px;
+ line-height: 1.5;
+ color: #374151;
+ font-weight: 500;
+}
+
+.retryButton {
+ font-size: 13px;
+ padding: 8px 20px;
+ height: auto;
+ border-radius: 8px;
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+ border: none;
+ color: #fff;
+ font-weight: 500;
+ transition: all 0.2s ease;
+}
+
+.retryButton:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+/* Search input style optimization */
+.searchInput .ant-input {
+ font-size: 14px;
+ border-radius: 12px;
+ border: 1px solid rgba(0, 0, 0, 0.08);
+ background: #fff;
+ padding: 8px 16px;
+ height: 40px;
+ transition: all 0.2s ease;
+}
+
+.searchInput .ant-input:focus,
+.searchInput .ant-input-focused {
+ border-color: #6366f1;
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+ background: #fff;
+}
+
+.searchInput .ant-input::placeholder {
+ color: #9ca3af;
+ font-weight: 400;
+}
+
+/* Button style optimization */
+.refreshButton .anticon {
+ font-size: 14px;
+}
+
+/* Toolbar adaptation for mobile */
+@media (max-width: 768px) {
+ .toolbar {
+ padding: 6px;
+ gap: 6px;
+ }
+
+ .searchInput .ant-input {
+ font-size: 14px;
+ }
+
+ .refreshButton {
+ width: 32px;
+ height: 32px;
+ }
+
+ .refreshButton .anticon {
+ font-size: 16px;
+ }
+
+ .folderList {
+ padding: 2px;
+ }
+
+ .emptyState {
+ min-height: 100px;
+ padding: 12px;
+ }
+
+ .emptyIcon {
+ font-size: 40px;
+ margin-bottom: 12px;
+ }
+
+ .loading,
+ .error {
+ min-height: 100px;
+ padding: 12px;
+ }
+
+ .errorIcon {
+ font-size: 28px;
+ }
+
+ .errorMessage {
+ font-size: 13px;
+ }
+}
+
+/* Hide scrollbar on mobile */
+@media (max-width: 768px) {
+ .folderList {
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE 10+ */
+ }
+
+ .folderList::-webkit-scrollbar {
+ display: none; /* Chrome Safari */
+ }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+ .toolbar {
+ border-bottom-color: #000;
+ background: #fff;
+ }
+
+ .emptyIcon {
+ color: #666;
+ opacity: 0.8;
+ }
+
+ .refreshButton:hover {
+ background-color: rgba(0, 0, 0, 0.1);
+ }
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+ .toolbar {
+ background: #141414;
+ border-bottom-color: #303030;
+ }
+
+ .emptyState {
+ color: #8c8c8c;
+ }
+
+ .emptyIcon {
+ color: #434343;
+ }
+
+ .refreshButton:hover {
+ background-color: rgba(255, 255, 255, 0.08);
+ }
+}
diff --git a/browser/src/components/FolderPicker/FolderTree.tsx b/browser/src/components/FolderPicker/FolderTree.tsx
new file mode 100644
index 000000000..045210ca4
--- /dev/null
+++ b/browser/src/components/FolderPicker/FolderTree.tsx
@@ -0,0 +1,173 @@
+import {
+ ExclamationCircleOutlined,
+ FolderOutlined,
+ ReloadOutlined,
+} from '@ant-design/icons';
+import { Button, Empty, Input, Spin } from 'antd';
+import type React from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { getFolderList } from '../../api/folders';
+import FolderItem from './FolderItem';
+import styles from './FolderTree.module.css';
+import type { FolderItem as FolderItemType, FolderTreeProps } from './types';
+
+const { Search } = Input;
+
+const FolderTree: React.FC
+
+
+ {getIcon()}
+ {folder.name}
+ {folder.isPackage && npm }
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ return (
+ {error}
+ }
+ onClick={handleRetry}
+ className={styles.retryButton}
+ >
+ {t('folderPicker.retry')}
+
+
+
+ );
+ },
+);
+
+export default FolderTree;
diff --git a/browser/src/components/FolderPicker/index.module.css b/browser/src/components/FolderPicker/index.module.css
new file mode 100644
index 000000000..0a7918034
--- /dev/null
+++ b/browser/src/components/FolderPicker/index.module.css
@@ -0,0 +1,106 @@
+.folderPicker {
+ display: flex;
+ flex-direction: column;
+ height: 400px;
+ border: none;
+ border-radius: 16px;
+ background: #fff;
+ overflow: hidden;
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+ transition: box-shadow 0.3s ease;
+}
+
+.folderPicker:hover {
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ padding: 12px 8px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+ background: linear-gradient(135deg, #fafbff 0%, #f8f9ff 100%);
+ border-radius: 16px 16px 0 0;
+}
+
+.breadcrumbContainer {
+ flex: 1;
+ display: flex;
+ align-items: center;
+}
+
+.content {
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+ background: #fff;
+}
+
+.treeContainer {
+ flex: 1;
+ overflow: auto;
+ padding: 0;
+}
+
+.emptyState {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: #999;
+ font-size: 14px;
+}
+
+.emptyIcon {
+ font-size: 48px;
+ margin-bottom: 16px;
+ opacity: 0.5;
+}
+
+.loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+
+.error {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: #ff4d4f;
+ padding: 16px;
+ text-align: center;
+}
+
+.errorIcon {
+ font-size: 32px;
+ margin-bottom: 8px;
+}
+
+.errorMessage {
+ font-size: 14px;
+ margin-bottom: 12px;
+}
+
+.retryButton {
+ font-size: 12px;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .folderPicker {
+ height: 300px;
+ }
+
+ .header {
+ padding: 6px 8px;
+ }
+
+ .treeContainer {
+ padding: 4px;
+ }
+}
diff --git a/browser/src/components/FolderPicker/index.tsx b/browser/src/components/FolderPicker/index.tsx
new file mode 100644
index 000000000..982609b20
--- /dev/null
+++ b/browser/src/components/FolderPicker/index.tsx
@@ -0,0 +1,53 @@
+import type React from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
+import Breadcrumb from './Breadcrumb';
+import FolderTree from './FolderTree';
+import styles from './index.module.css';
+import type { FolderPickerProps } from './types';
+
+const FolderPicker: React.FC
+ setSearchQuery(e.target.value)}
+ className={styles.searchInput}
+ />
+ }
+ onClick={handleRetry}
+ title={t('folderPicker.refresh')}
+ className={styles.refreshButton}
+ />
+
+
+
+ {filteredFolders.length === 0 ? (
+
+
+ {folders.length === 0 ? (
+
+ ) : (
+ filteredFolders.map((folder) => (
+
+
+ );
+ },
+);
+
+export default FolderPicker;
diff --git a/browser/src/components/FolderPicker/types.ts b/browser/src/components/FolderPicker/types.ts
new file mode 100644
index 000000000..4e9a9466c
--- /dev/null
+++ b/browser/src/components/FolderPicker/types.ts
@@ -0,0 +1,58 @@
+export interface FolderItem {
+ name: string;
+ path: string;
+ isPackage: boolean;
+ hidden: boolean;
+ __typename: 'Folder';
+}
+
+export interface FolderResponse {
+ name: string;
+ path: string;
+ isPackage: boolean;
+ children: FolderItem[];
+ __typename: 'Folder';
+}
+
+export interface FolderPickerProps {
+ initialPath?: string;
+ onFolderChange?: (folderPath: string) => void;
+ height?: number | string;
+ className?: string;
+}
+
+export interface FolderTreeNode {
+ key: string;
+ title: string;
+ path: string;
+ isLeaf?: boolean;
+ children?: FolderTreeNode[];
+ isPackage: boolean;
+ hidden: boolean;
+ expanded?: boolean;
+ loading?: boolean;
+}
+
+export interface FolderTreeProps {
+ currentPath: string;
+ onPathChange: (path: string) => void;
+ height?: number | string;
+}
+
+export interface FolderItemProps {
+ folder: FolderItem;
+ onSelect: (path: string) => void;
+ isSelected?: boolean;
+ level?: number;
+}
+
+export interface BreadcrumbProps {
+ currentPath: string;
+ onPathChange: (path: string) => void;
+}
+
+export interface FolderService {
+ getFolderContents: (
+ path: string,
+ ) => Promise<{ success: boolean; data: FolderResponse }>;
+}
diff --git a/browser/src/components/I18nProvider/index.tsx b/browser/src/components/I18nProvider/index.tsx
index f6cc407f1..21ae5e309 100644
--- a/browser/src/components/I18nProvider/index.tsx
+++ b/browser/src/components/I18nProvider/index.tsx
@@ -1,5 +1,5 @@
-import { Spin } from 'antd';
-import React, { Suspense } from 'react';
+import { ConfigProvider, Spin } from 'antd';
+import { Suspense } from 'react';
interface I18nProviderProps {
children: React.ReactNode;
@@ -7,21 +7,29 @@ interface I18nProviderProps {
const I18nProvider: React.FC
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Loading;
diff --git a/browser/src/components/MarkdownRenderer/index.module.css b/browser/src/components/MarkdownRenderer/index.module.css
new file mode 100644
index 000000000..9e6767ad1
--- /dev/null
+++ b/browser/src/components/MarkdownRenderer/index.module.css
@@ -0,0 +1,234 @@
+.markdownRenderer {
+ line-height: 1.6;
+ word-wrap: break-word;
+ min-width: 789px;
+}
+
+.markdownRenderer :global(.prose) {
+ font-family:
+ -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+ "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
+ sans-serif;
+ font-weight: 400;
+ font-style: normal;
+ font-size: 14px;
+ line-height: 1.6;
+ letter-spacing: 0;
+ color: #2c3e50;
+ max-width: none;
+}
+
+/* Heading styles */
+.markdownRenderer :global(.prose h1) {
+ font-size: 24px;
+ font-weight: 600;
+ color: #1a202c;
+ margin: 24px 0 16px;
+ border-bottom: 2px solid #e2e8f0;
+ padding-bottom: 8px;
+}
+
+.markdownRenderer :global(.prose h2) {
+ font-size: 20px;
+ font-weight: 600;
+ color: #2d3748;
+ margin: 20px 0 12px;
+ border-bottom: 1px solid #e2e8f0;
+ padding-bottom: 6px;
+}
+
+.markdownRenderer :global(.prose h3) {
+ font-size: 18px;
+ font-weight: 600;
+ color: #2d3748;
+ margin: 16px 0 8px;
+}
+
+.markdownRenderer :global(.prose h4),
+.markdownRenderer :global(.prose h5),
+.markdownRenderer :global(.prose h6) {
+ font-size: 16px;
+ font-weight: 600;
+ color: #2d3748;
+ margin: 12px 0 6px;
+}
+
+/* Paragraph styles */
+.markdownRenderer :global(.prose p) {
+ margin: 8px 0;
+ line-height: 1.7;
+}
+
+/* List styles */
+.markdownRenderer :global(.prose ul),
+.markdownRenderer :global(.prose ol) {
+ margin: 8px 0;
+ padding-left: 24px;
+}
+
+.markdownRenderer :global(.prose li) {
+ margin: 4px 0;
+ line-height: 1.6;
+}
+
+.markdownRenderer :global(.prose li::marker) {
+ color: #4a5568;
+}
+
+/* Blockquote styles */
+.markdownRenderer :global(.prose blockquote) {
+ margin: 16px 0;
+ padding: 12px 16px;
+ background: #f8fafc;
+ border-left: 4px solid #3182ce;
+ border-radius: 0 4px 4px 0;
+ font-style: italic;
+ color: #4a5568;
+}
+
+.markdownRenderer :global(.prose blockquote p) {
+ margin: 0;
+}
+
+/* Table styles */
+.markdownRenderer :global(.prose table) {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 16px 0;
+ border: 1px solid #e2e8f0;
+ border-radius: 6px;
+ overflow: hidden;
+}
+
+.markdownRenderer :global(.prose th),
+.markdownRenderer :global(.prose td) {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #e2e8f0;
+}
+
+.markdownRenderer :global(.prose th) {
+ background: #f7fafc;
+ font-weight: 600;
+ color: #2d3748;
+}
+
+.markdownRenderer :global(.prose tr:last-child td) {
+ border-bottom: none;
+}
+
+.markdownRenderer :global(.prose tr:hover) {
+ background: #f8fafc;
+}
+
+/* Code block styles */
+.markdownRenderer :global(.prose pre) {
+ margin: 16px 0;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ background: transparent !important;
+}
+
+/* Link styles */
+.markdownRenderer :global(.prose a) {
+ color: #3182ce;
+ text-decoration: none;
+ border-bottom: 1px solid transparent;
+ transition: all 0.2s ease;
+}
+
+.markdownRenderer :global(.prose a:hover) {
+ color: #2c5aa0;
+ border-bottom-color: #3182ce;
+}
+
+/* Divider styles */
+.markdownRenderer :global(.prose hr) {
+ margin: 24px 0;
+ border: none;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, #cbd5e0, transparent);
+}
+
+/* Image styles */
+.markdownRenderer :global(.prose img) {
+ max-width: 100%;
+ height: auto;
+ border-radius: 6px;
+ margin: 16px 0;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Emphasis text styles */
+.markdownRenderer :global(.prose strong) {
+ font-weight: 600;
+ color: #1a202c;
+}
+
+.markdownRenderer :global(.prose em) {
+ font-style: italic;
+ color: #4a5568;
+}
+
+/* Strikethrough styles */
+.markdownRenderer :global(.prose del) {
+ text-decoration: line-through;
+ color: #a0aec0;
+}
+
+/* Streamdown code block style overrides */
+.markdownRenderer :global([data-code-block-container="true"]) {
+ border: none !important;
+ padding: 0 !important;
+}
+
+/* Streamdown code block style overrides */
+.markdownRenderer :global([data-streamdown="code-block"]) {
+ border: none !important;
+ padding: 0 !important;
+}
+
+/* Streamdown code block style overrides */
+.markdownRenderer :global([data-code-block-header="true"]) {
+ border: none !important;
+ padding: 0 !important;
+}
+
+/* Streamdown Mermaid diagram block style overrides */
+.markdownRenderer :global([data-code-block-container="true"]) {
+ border: none !important;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .markdownRenderer :global(.prose) {
+ font-size: 14px;
+ }
+
+ .markdownRenderer :global(.prose h1) {
+ font-size: 20px;
+ }
+
+ .markdownRenderer :global(.prose h2) {
+ font-size: 18px;
+ }
+
+ .markdownRenderer :global(.prose h3) {
+ font-size: 16px;
+ }
+
+ .markdownRenderer :global(.prose pre) {
+ margin: 12px -16px;
+ border-radius: 0;
+ }
+
+ .markdownRenderer :global(.prose table) {
+ font-size: 12px;
+ }
+
+ .markdownRenderer :global(.prose th),
+ .markdownRenderer :global(.prose td) {
+ padding: 8px;
+ }
+}
diff --git a/browser/src/components/MarkdownRenderer/index.tsx b/browser/src/components/MarkdownRenderer/index.tsx
index 1c73947af..28a103415 100644
--- a/browser/src/components/MarkdownRenderer/index.tsx
+++ b/browser/src/components/MarkdownRenderer/index.tsx
@@ -1,95 +1,42 @@
-import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
-import { message } from 'antd';
-import { Fragment, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import ReactMarkdown from 'react-markdown';
import type { Components } from 'react-markdown';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
import remarkGfm from 'remark-gfm';
-import { useClipboard } from '@/hooks/useClipboard';
+import { Streamdown } from 'streamdown';
+import styles from './index.module.css';
interface MarkdownRendererProps {
content: string;
}
const MarkdownRenderer: React.FC
-
-
- {codeString}
-
-
- );
- }
+ blockquote({ children, ...props }) {
+ return {children}; + }, + a({ href, children, ...props }) { return ( -
+
{children}
-
+
);
},
};
- // 处理markdown格式时，存在的```markdown```，需要去掉
const processedContent = content.includes('```markdown')
? content.replace('```markdown', '').replace('```', '')
: content;
return (
-
-
+ url}
>
{processedContent}
-
+
);
};
diff --git a/browser/src/components/McpDropdown/McpDropdownContent.tsx b/browser/src/components/McpDropdown/McpDropdownContent.tsx
new file mode 100644
index 000000000..914e59419
--- /dev/null
+++ b/browser/src/components/McpDropdown/McpDropdownContent.tsx
@@ -0,0 +1,148 @@
+import { ApiOutlined } from '@ant-design/icons';
+import { Button, Divider } from 'antd';
+import { createStyles } from 'antd-style';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSnapshot } from 'valtio';
+import {
+ actions as mcpActions,
+ type McpServerItemConfig,
+ state,
+} from '@/state/mcp';
+import McpServiceItem from './McpServiceItem';
+
+interface McpDropdownContentProps {
+ onOpenManager: () => void;
+}
+
+const useStyles = createStyles(({ css }) => ({
+ recommendedTitle: css`
+ margin: 0;
+ padding: 12px 13px 2px 13px;
+ font-size: 12px;
+ color: #8f959e;
+ line-height: 1.4;
+ font-family: "PingFang SC", sans-serif;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ `,
+ dropdownContainer: css`
+ background: #ffffff;
+ border-radius: 10px;
+ box-shadow: 0px 4px 16px 0px rgba(37, 41, 49, 0.08);
+ border: 1px solid #eeeff0;
+ overflow: hidden;
+ width: 260px;
+ `,
+ serviceList: css`
+ padding: 4px 4px 8px 4px;
+ `,
+ divider: css`
+ margin: 8px 0;
+ border-color: #eeeff0;
+ `,
+ manageButtonContainer: css`
+ padding: 0 14px 14px 14px;
+ border-top: 1px solid #eeeff0;
+ padding-top: 12px;
+ `,
+ manageButton: css`
+ width: 100%;
+ height: 32px;
+ border-radius: 34px;
+ background-color: #f7f8fa;
+ border: 1px solid #f7f8fa;
+ color: #110c22;
+ font-size: 12px;
+ font-weight: 400;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ cursor: pointer;
+ transition: all 0.2s;
+
+ &:hover {
+ background-color: #eeeff0;
+ border-color: #eeeff0;
+ }
+
+ &:focus,
+ &:active {
+ outline: none;
+ box-shadow: none;
+ }
+ `,
+}));
+
+const McpDropdownContent: React.FC{t('mcp.recommended')}
+ {recommendedList.map((service) => (
+
+
+ );
+};
+
+export default McpDropdownContent;
diff --git a/browser/src/components/McpDropdown/McpServiceItem.tsx b/browser/src/components/McpDropdown/McpServiceItem.tsx
new file mode 100644
index 000000000..96f51a8d4
--- /dev/null
+++ b/browser/src/components/McpDropdown/McpServiceItem.tsx
@@ -0,0 +1,97 @@
+import { Switch, Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import { useTranslation } from 'react-i18next';
+import type { McpServerItemConfig } from '@/state/mcp';
+
+interface McpServiceItemProps {
+ readonly server: McpServerItemConfig;
+ onToggle: (server: McpServerItemConfig) => void;
+ isRecommended?: boolean;
+}
+
+const useStyles = createStyles(({ css }) => ({
+ recommendedTag: css`
+ backgroundColor: '#f0f0ff',
+ color: '#4c3dd4',
+ `,
+ serviceItem: css`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 6px 13px;
+ margin: 0;
+ cursor: pointer;
+ transition: background-color 0.2s;
+
+ &:hover {
+ background-color: #f9fafb;
+ }
+ `,
+ serviceInfo: css`
+ display: flex;
+ alignItems: center;
+ gap: 8;
+ flex: 1;
+ minWidth: 0;
+ `,
+ serviceName: css`
+ color: #110c22;
+ fontSize: 14;
+ fontWeight: 400;
+ flexShrink: 0;
+ `,
+ scopeTag: css`
+ margin-left: 6px;
+ padding: 0 6px !important;
+ height: 18px !important;
+ line-height: 16px !important;
+ font-size: 10px !important;
+ font-weight: 400 !important;
+ border-radius: 2px !important;
+ border: none !important;
+ color: #666f8d !important;
+ background: #f5f6fa !important;
+ font-family: "PingFang SC", sans-serif !important;
+ `,
+ scopeTagEnabled: css`
+ color: #4c3dd4 !important;
+ background: #f0f0ff !important;
+ `,
+ scopeTagDisabled: css`
+ opacity: 0.6;
+ `,
+}));
+
+const McpServiceItem: React.FC
+ {recommendedContent}
+ {mcpServers.map((service) => (
+ onToggle(server, false)}
+ />
+ ))}
+
+
+
+
+
+
+ {
+ onToggle(server);
+ }}
+ />
+
+ );
+};
+
+export default McpServiceItem;
diff --git a/browser/src/components/McpDropdown/index.tsx b/browser/src/components/McpDropdown/index.tsx
index b3eb08f1e..163c5a1cc 100644
--- a/browser/src/components/McpDropdown/index.tsx
+++ b/browser/src/components/McpDropdown/index.tsx
@@ -1,498 +1,40 @@
-import { ApiOutlined, EditOutlined } from '@ant-design/icons';
-import { useBoolean, useSetState, useToggle } from 'ahooks';
-import { Button, Checkbox, Dropdown, Input, Modal, Space, message } from 'antd';
-import { useEffect, useState } from 'react';
+import { useBoolean, useRequest, useToggle } from 'ahooks';
+import { Dropdown } from 'antd';
+import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
-import {
- addMCPServer,
- removeMCPServer,
- updateMCPServer,
-} from '@/api/mcpService';
-import McpManager from '@/components/McpManager';
-import {
- FIGMA_CONFIG,
- MCP_KEY_PREFIXES,
- MCP_MENU_KEYS,
- MCP_STORAGE_KEYS,
- getPresetMcpServicesWithTranslations,
-} from '@/constants/mcp';
-import { useMcpServices } from '@/hooks/useMcpServices';
-import type {
- McpDropdownProps,
- McpServer,
- McpServerConfig,
- PresetMcpService,
-} from '@/types/mcp';
-import { containerEventHandlers, modalEventHandlers } from '@/utils/eventUtils';
-
-const McpDropdown: React.FC
+ {server.name}
+ {!isRecommended && (
+
+ {t('mcp.projectScope')}
+
+ )}
+
+
+
-
- ),
- })),
- // Disabled services
- ...mcpServers
- .filter((server) => !server.installed)
- .map((server) => ({
- key: server.key,
- label: (
-
- {
- e.preventDefault();
- e.stopPropagation();
- handleToggleEnabled(
- server.name,
- e.target.checked,
- server.scope,
- );
- }}
- onClick={(e) => {
- e.preventDefault();
- e.stopPropagation();
- }}
- />
-
-
- {server.name}
-
-
- {server.scope === 'global'
- ? t('mcp.globalScope')
- : t('mcp.projectScope')}
-
-
- {server.config.args?.some((arg: string) =>
- arg.includes(FIGMA_CONFIG.API_KEY_ARG),
- ) && (
- }
- onClick={(e) => {
- e.stopPropagation();
- handleEditApiKey(server);
- }}
- className="px-1"
- />
- )}
-
-
-
- ),
- })),
- ...presetMcpServices
- .filter(
- (service) =>
- !mcpServers.some((server) => server.name === service.config.name),
- )
- .map((service) => ({
- key: `${MCP_KEY_PREFIXES.PRESET}-${service.key}`,
- label: (
-
- {
- e.preventDefault();
- e.stopPropagation();
- if (e.target.checked) {
- handleToggleEnabled(
- server.name,
- e.target.checked,
- server.scope,
- );
- }
- }}
- onClick={(e) => {
- e.preventDefault();
- e.stopPropagation();
- }}
- />
-
-
-
- {server.name}
-
-
-
- {t('mcp.disabledStatus')} (
- {server.scope === 'global'
- ? t('mcp.globalScope')
- : t('mcp.projectScope')}
- )
-
-
-
- ),
- })),
- ...(mcpServers.length === 0 && presetMcpServices.length === 0
- ? [
- {
- key: MCP_MENU_KEYS.NO_SERVICES,
- label: (
-
- {t('mcp.noServicesAvailable')}
-
- ),
- disabled: true,
- },
- ]
- : []),
- ];
+ if (initialized) {
+ run();
+ }
+ }, [initialized]);
return (
<>
- {
- e.preventDefault();
- e.stopPropagation();
- if (e.target.checked) {
- handleQuickAdd(service);
- }
- }}
- onClick={(e) => {
- e.preventDefault();
- e.stopPropagation();
- }}
- />
-
-
-
-
-
- {service.name}
-
-
-
- {t('mcp.available')}
-
-
- setModalState({ editApiKey: e.target.value })}
- onPressEnter={handleSaveApiKey}
- autoFocus
- className="mb-2"
- {...modalEventHandlers}
- />
-
-
- {t('mcp.apiKeyDescription', {
- name: modalState.editingService?.name,
- })}
-
-
+ {configs.map((config, index) => (
+ 1}
+ onUpdateConfig={onUpdateConfig}
+ onRemoveConfig={onRemoveConfig}
+ />
+ ))}
+
+
+ {/* Continue add button */}
+
+ }
+ className={styles.continueButton}
+ onClick={onAddNewConfig}
+ >
+ {t('mcp.continueAdd')}
+
+
+
+ );
+};
diff --git a/browser/src/components/McpManager/McpAddForm/McpConfigItem.tsx b/browser/src/components/McpManager/McpAddForm/McpConfigItem.tsx
new file mode 100644
index 000000000..e006be8e3
--- /dev/null
+++ b/browser/src/components/McpManager/McpAddForm/McpConfigItem.tsx
@@ -0,0 +1,248 @@
+import { DeleteOutlined } from '@ant-design/icons';
+import { Input, Radio, Select, Typography } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import MessageWrapper from '@/components/MessageWrapper';
+import type { McpConfigItem as McpConfigItemType } from '@/types/mcp';
+import { modalEventHandlers } from '@/utils/eventUtils';
+import { McpJsonEditor } from './McpJsonEditor';
+import { McpScopeSelector } from './McpScopeSelector';
+import styles from './index.module.css';
+
+const { Text } = Typography;
+
+interface McpConfigItemProps {
+ config: McpConfigItemType;
+ index: number;
+ canDelete: boolean;
+ onUpdateConfig: (
+ id: string,
+ field: keyof McpConfigItemType,
+ value: string | 'global' | 'project' | 'json' | 'form',
+ ) => void;
+ onRemoveConfig: (id: string) => void;
+}
+
+/**
+ * Single MCP configuration item component for add mode
+ */
+export const McpConfigItem: React.FC
+ {/* Scope and input mode settings */}
+
+
+ );
+};
+
+// JSON configuration content
+const McpJsonConfigContent: React.FC<{
+ config: McpConfigItemType;
+ onUpdateConfig: (
+ id: string,
+ field: keyof McpConfigItemType,
+ value: string,
+ ) => void;
+}> = ({ config, onUpdateConfig }) => {
+ const { t } = useTranslation();
+
+ return (
+
+ onUpdateConfig(config.id, 'scope', scope)}
+ />
+
+
+ {/* Configuration content based on input mode */}
+
+
+ onUpdateConfig(
+ config.id,
+ 'inputMode',
+ e.target.value as 'json' | 'form',
+ )
+ }
+ className={styles.radioGroup}
+ >
+
+ JSON
+
+
+ {t('mcp.form')}
+
+
+
+
+ {t('mcp.inputMode')}
+
+
+ {config.inputMode === 'json' ? (
+
+
+ onUpdateConfig(config.id, 'jsonConfig', value)}
+ height="200px"
+ />
+
+ );
+};
+
+// Form configuration content
+const McpFormConfigContent: React.FC<{
+ config: McpConfigItemType;
+ onUpdateConfig: (
+ id: string,
+ field: keyof McpConfigItemType,
+ value: string,
+ ) => void;
+}> = ({ config, onUpdateConfig }) => {
+ const { t } = useTranslation();
+
+ return (
+
+ {t('mcp.configuration')}
+
+
+ {/* Server name and transport type */}
+
+ );
+};
diff --git a/browser/src/components/McpManager/McpAddForm/McpEditMode.tsx b/browser/src/components/McpManager/McpAddForm/McpEditMode.tsx
new file mode 100644
index 000000000..5f8ade6b7
--- /dev/null
+++ b/browser/src/components/McpManager/McpAddForm/McpEditMode.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import type { McpAddFormProps } from '@/types/mcp';
+import { McpFormFields } from './McpFormFields';
+import { McpScopeSelector } from './McpScopeSelector';
+import styles from './index.module.css';
+
+interface McpEditModeProps {
+ addScope: McpAddFormProps['addScope'];
+ onScopeChange: McpAddFormProps['onScopeChange'];
+}
+
+/**
+ * Edit mode component for editing existing MCP server configuration
+ */
+export const McpEditMode: React.FC
+
+
+ {/* Command and arguments / URL */}
+
+
+
+ {t('mcp.serverName')}
+ *
+
+ onUpdateConfig(config.id, 'name', e.target.value)}
+ {...modalEventHandlers}
+ />
+
+
+
+
+ {t('mcp.transportType')}
+
+
+
+
+ {config.transport === 'sse' ? (
+
+
+ {/* Environment variables */}
+
+
+ ) : (
+ <>
+
+ {t('mcp.url')}
+ *
+
+ onUpdateConfig(config.id, 'url', e.target.value)}
+ {...modalEventHandlers}
+ />
+
+
+
+ {t('mcp.command')}
+ *
+
+
+ onUpdateConfig(config.id, 'command', e.target.value)
+ }
+ {...modalEventHandlers}
+ />
+
+
+
+ )}
+
+
+ {t('mcp.arguments')}
+
+
+
+ onUpdateConfig(config.id, 'args', e.target.value)
+ }
+ {...modalEventHandlers}
+ />
+
+
+
+ onUpdateConfig(config.id, 'env', value)}
+ height="120px"
+ />
+
+
+
+ {t('mcp.environmentVariables')}
+
+
+
+
+
+ {/* Form fields for editing */}
+
+ {/* First row: Server name and transport type */}
+
+ );
+};
diff --git a/browser/src/components/McpManager/McpAddForm/McpJsonEditor.tsx b/browser/src/components/McpManager/McpAddForm/McpJsonEditor.tsx
new file mode 100644
index 000000000..7048823b1
--- /dev/null
+++ b/browser/src/components/McpManager/McpAddForm/McpJsonEditor.tsx
@@ -0,0 +1,97 @@
+import { Editor } from '@monaco-editor/react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { McpJsonEditorProps } from '@/types/mcp';
+import styles from './index.module.css';
+
+export const McpJsonEditor: React.FC
+
+
+ {/* Second row: Command and arguments */}
+
+
+
+
+
+
+ {t('mcp.serverName')}
+ *
+
+
+
+
+
+
+
+
+ {t('mcp.transportType')}
+
+
+
+ prev.transport !== curr.transport}
+ >
+ {({ getFieldValue }) => {
+ return getFieldValue('transport') === 'sse' ? (
+
+
+
+ {/* Third row: Environment variables */}
+
+
+
+
+
+ ) : (
+ <>
+
+ {t('mcp.url')}
+ *
+
+
+
+
+
+
+
+
+ {t('mcp.command')}
+
+ *
+
+
+
+
+
+
+
+ );
+ }}
+
+
+ {t('mcp.arguments')}
+
+
+
+
+
+
+
+
+
+
+ {t('mcp.environmentVariables')}
+
+
+
+
+ );
+};
diff --git a/browser/src/components/McpManager/McpAddForm/McpScopeSelector.tsx b/browser/src/components/McpManager/McpAddForm/McpScopeSelector.tsx
new file mode 100644
index 000000000..de2632700
--- /dev/null
+++ b/browser/src/components/McpManager/McpAddForm/McpScopeSelector.tsx
@@ -0,0 +1,45 @@
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Radio, Tooltip, Typography } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './index.module.css';
+
+const { Text } = Typography;
+
+interface McpScopeSelectorProps {
+ value: 'global' | 'project';
+ onChange: (scope: 'global' | 'project') => void;
+}
+
+/**
+ * Scope selector component for choosing between global and project scope
+ */
+export const McpScopeSelector: React.FC
+ ⚠️
+ {errorMessage}
+
+ )}
+
+ onChange(e.target.value as 'global' | 'project')}
+ className={styles.radioGroup}
+ >
+
+ {t('mcp.project')}
+
+
+ {t('mcp.global')}
+
+
+
+ );
+};
diff --git a/browser/src/components/McpManager/McpAddForm/index.module.css b/browser/src/components/McpManager/McpAddForm/index.module.css
new file mode 100644
index 000000000..366a17337
--- /dev/null
+++ b/browser/src/components/McpManager/McpAddForm/index.module.css
@@ -0,0 +1,538 @@
+/* McpAddForm Component Styles */
+
+/* Add Form Modal Styles - Based on Figma Design */
+.addFormModal :global(.ant-modal-content) {
+ background: #ffffff;
+ border-radius: 20px;
+ box-shadow: 0 0 43.3px 13px rgba(100, 99, 119, 0.12);
+ border: none;
+ overflow: hidden;
+ width: 640px !important;
+ max-width: 640px !important;
+ height: 635px !important;
+ padding: 0;
+}
+
+.addFormModal :global(.ant-modal-header) {
+ background: #ffffff;
+ border-bottom: none;
+ padding: 24px 24px 0 24px;
+ margin: 0;
+}
+
+.addFormModal :global(.ant-modal-body) {
+ padding: 0;
+ background: #ffffff;
+ height: 535px;
+ overflow-y: auto;
+ scrollbar-width: thin;
+ scrollbar-color: #e0e0e0 transparent;
+}
+
+.addFormModal :global(.ant-modal-body)::-webkit-scrollbar {
+ width: 6px;
+}
+
+.addFormModal :global(.ant-modal-body)::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.addFormModal :global(.ant-modal-body)::-webkit-scrollbar-thumb {
+ background-color: #e0e0e0;
+ border-radius: 3px;
+ transition: background-color 0.2s;
+}
+
+.addFormModal :global(.ant-modal-body)::-webkit-scrollbar-thumb:hover {
+ background-color: #c0c0c0;
+}
+
+.addFormModal :global(.ant-modal-close) {
+ top: 24px;
+ right: 24px;
+ width: 16px;
+ height: 16px;
+ color: #666f8d;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s;
+}
+
+.addFormModal :global(.ant-modal-close:hover) {
+ color: #374151;
+}
+
+.addFormModal :global(.ant-modal-footer) {
+ border-top: none;
+ padding: 0 24px 24px 24px;
+ text-align: right;
+ margin: 0;
+}
+
+/* Modal Header */
+.modalHeader {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+}
+
+.headerTitle {
+ color: #110c22;
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 22px;
+ font-family: "PingFang SC", sans-serif;
+}
+
+/* Modal Body */
+.modalBody {
+ padding: 24px;
+ height: calc(100% - 48px);
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ scrollbar-width: thin;
+ scrollbar-color: #e0e0e0 transparent;
+}
+
+.modalBody::-webkit-scrollbar {
+ width: 6px;
+}
+
+.modalBody::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.modalBody::-webkit-scrollbar-thumb {
+ background-color: #e0e0e0;
+ border-radius: 3px;
+ transition: background-color 0.2s;
+}
+
+.modalBody::-webkit-scrollbar-thumb:hover {
+ background-color: #c0c0c0;
+}
+
+.form {
+ width: 100%;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Settings Row - 设定描述和输入模式 */
+.settingsRow {
+ display: flex;
+ gap: 48px;
+ margin-bottom: 24px;
+}
+
+.settingGroup {
+ flex: 1;
+}
+
+.settingHeader {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ margin-bottom: 8px;
+}
+
+.settingLabel {
+ color: #110c22;
+ font-size: 14px;
+ font-weight: 500;
+ font-family: "PingFang SC", sans-serif;
+}
+
+.questionIcon {
+ width: 16px;
+ height: 16px;
+ color: #85878a;
+}
+
+.radioGroup {
+ display: flex;
+ gap: 16px;
+}
+
+.radioOption {
+ color: #110c22;
+ font-size: 14px;
+ font-weight: 400;
+ font-family: "PingFang SC", sans-serif;
+}
+
+/* Radio button styling */
+.addFormModal :global(.ant-radio-wrapper) {
+ color: #110c22;
+ font-size: 14px;
+ font-weight: 400;
+ font-family: "PingFang SC", sans-serif;
+}
+
+.addFormModal :global(.ant-radio-inner) {
+ border-color: #dcdde0;
+ background-color: #ffffff;
+}
+
+.addFormModal :global(.ant-radio-checked .ant-radio-inner) {
+ border-color: #7357ff;
+ background-color: #ffffff;
+}
+
+.addFormModal :global(.ant-radio-checked .ant-radio-inner::after) {
+ background-color: #7357ff;
+}
+
+/* Config Section */
+.configSection {
+ margin-bottom: 24px;
+}
+
+.jsonFormContainer {
+ width: 100%;
+}
+
+.jsonFormHeader {
+ margin-bottom: 8px;
+}
+
+.jsonTextArea {
+ background: #ffffff;
+ border: 1px solid #dcdde0;
+ border-radius: 4px;
+ font-size: 14px;
+ font-family: "PingFang SC", sans-serif;
+}
+
+.jsonTextArea:focus,
+.jsonTextArea:hover {
+ border-color: #7357ff;
+ box-shadow: none;
+}
+
+.jsonDescription {
+ color: #898b8f;
+ font-size: 12px;
+ font-weight: 400;
+ margin-top: 8px;
+ opacity: 0.8;
+ font-family: "PingFang SC", sans-serif;
+}
+
+/* MCP Preview Section */
+.mcpPreviewSection {
+ background: #f9fbfe;
+ border: 1px solid #edeef0;
+ border-radius: 8px;
+ margin-bottom: 16px;
+}
+
+.mcpPreviewHeader {
+ background: #f9fbfe;
+ padding: 12px 16px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 8px 8px 0 0;
+}
+
+.mcpLabel {
+ color: #252931;
+ font-size: 12px;
+ font-weight: 500;
+ font-family: "PingFang SC", sans-serif;
+}
+
+.collapseIcon {
+ width: 16px;
+ height: 16px;
+ color: #12141a;
+}
+
+/* Continue Section */
+.continueSection {
+ display: flex;
+ justify-content: flex-start;
+ margin-top: 16px;
+}
+
+.continueButton {
+ height: 32px;
+ padding: 6px 16px;
+ background: #ffffff;
+ border: 1px solid #7357ff;
+ border-radius: 4px;
+ color: #7357ff;
+ font-size: 14px;
+ font-weight: 400;
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ font-family: "PingFang SC", sans-serif;
+}
+
+.continueButton:hover {
+ background: #f0f7ff;
+ border-color: #7357ff;
+ color: #7357ff;
+}
+
+.continueButton:focus {
+ background: #ffffff;
+ border-color: #7357ff;
+ color: #7357ff;
+ box-shadow: none;
+}
+
+/* Footer Buttons */
+.cancelButton {
+ height: 32px;
+ padding: 6px 16px;
+ background: #ffffff;
+ border: 1px solid #dcdde0;
+ border-radius: 26px;
+ color: #110c22;
+ font-size: 14px;
+ font-weight: 400;
+ font-family: "PingFang SC", sans-serif;
+}
+
+.cancelButton:hover {
+ background: #f5f5f5;
+ border-color: #dcdde0;
+ color: #110c22;
+}
+
+.cancelButton:focus {
+ background: #ffffff;
+ border-color: #dcdde0;
+ color: #110c22;
+ box-shadow: none;
+}
+
+.confirmButton {
+ height: 32px;
+ padding: 6px 16px;
+ background: #110c22;
+ border: 1px solid #110c22;
+ border-radius: 26px;
+ color: #ffffff;
+ font-size: 14px;
+ font-weight: 400;
+ font-family: "PingFang SC", sans-serif;
+}
+
+.confirmButton:hover {
+ background: #110c22 !important;
+ border-color: #110c22 !important;
+ color: #ffffff !important;
+}
+
+.confirmButton:focus {
+ background: #110c22 !important;
+ border-color: #110c22 !important;
+ color: #ffffff !important;
+ box-shadow: none !important;
+}
+
+.confirmButton:active {
+ background: #110c22 !important;
+ border-color: #110c22 !important;
+ color: #ffffff !important;
+}
+
+/* Form Fields Styles - Based on Figma Design */
+.formFieldsContainer {
+ width: 100%;
+ flex: 1;
+ overflow-y: auto;
+ scrollbar-width: thin;
+ scrollbar-color: #e0e0e0 transparent;
+}
+
+.formFieldsContainer::-webkit-scrollbar {
+ width: 6px;
+}
+
+.formFieldsContainer::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.formFieldsContainer::-webkit-scrollbar-thumb {
+ background-color: #e0e0e0;
+ border-radius: 3px;
+ transition: background-color 0.2s;
+}
+
+.formFieldsContainer::-webkit-scrollbar-thumb:hover {
+ background-color: #c0c0c0;
+}
+
+.formFieldsRow {
+ display: flex;
+ gap: 18px;
+ margin-bottom: 18px;
+}
+
+.formField {
+ flex: 1;
+}
+
+.formFieldFull {
+ width: 100%;
+}
+
+.fieldLabel {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ margin-bottom: 8px;
+}
+
+.requiredMark {
+ color: #ff4050;
+ font-size: 14px;
+ font-weight: 400;
+ font-family: "PingFang SC", sans-serif;
+}
+
+.formInput {
+ height: 32px;
+ background: #ffffff;
+ border: 1px solid #dcdde0;
+ border-radius: 4px;
+ color: #110c22;
+ font-size: 14px;
+ font-weight: 400;
+ font-family: "PingFang SC", sans-serif;
+ padding: 6px 12px;
+}
+
+.formInput:focus,
+.formInput:hover {
+ border-color: #7357ff;
+ box-shadow: none;
+}
+
+.formInput::placeholder {
+ color: #aaabaf;
+ font-size: 14px;
+ font-weight: 400;
+ font-family: "PingFang SC", sans-serif;
+}
+
+.formTextArea {
+ background: #ffffff;
+ border: 1px solid #dcdde0;
+ border-radius: 4px;
+ color: #110c22;
+ font-size: 14px;
+ font-weight: 400;
+ font-family: "PingFang SC", sans-serif;
+ padding: 6px 12px;
+ resize: vertical;
+}
+
+/* Override Ant Design form item margins */
+.addFormModal :global(.ant-form-item) {
+ margin-bottom: 0;
+}
+
+.addFormModal :global(.ant-select-selector) {
+ height: 32px !important;
+ border: 1px solid #dcdde0 !important;
+ border-radius: 4px !important;
+ background: #ffffff !important;
+ padding: 6px 12px !important;
+ color: #110c22 !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ font-family: "PingFang SC", sans-serif !important;
+}
+
+.addFormModal :global(.ant-select-selector:hover) {
+ border-color: #7357ff !important;
+}
+
+.addFormModal :global(.ant-select-focused .ant-select-selector) {
+ border-color: #7357ff !important;
+ box-shadow: none !important;
+}
+
+.addFormModal :global(.ant-select-arrow) {
+ color: #898b8f;
+}
+
+.addFormModal :global(.ant-select-selection-placeholder) {
+ color: #aaabaf !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ font-family: "PingFang SC", sans-serif !important;
+}
+
+/* Multiple Form Container */
+.multipleFormContainer {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+/* Custom MessageWrapper for MCP Config Items */
+.mcpMessageWrapper {
+ min-width: 0;
+ width: 100%;
+ max-width: 100%;
+ box-sizing: border-box;
+}
+
+/* Single Form Container */
+.singleFormContainer {
+ width: 100%;
+}
+
+.formSelect {
+ width: 100%;
+}
+
+/* Config Content Section */
+.configContentSection {
+ margin-top: 16px;
+}
+
+/* JSON Editor Styles */
+.jsonEditor {
+ width: 100%;
+ border: 1px solid #dcdde0;
+ border-radius: 4px;
+ overflow: hidden;
+ transition: border-color 0.2s;
+}
+
+.jsonEditor:hover {
+ border-color: #7357ff;
+}
+
+.jsonEditorError {
+ border-color: #ff4d4f !important;
+}
+
+.jsonEditorErrorMessage {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 8px 12px;
+ background: #fff2f0;
+ border-top: 1px solid #ffccc7;
+ color: #ff4d4f;
+ font-size: 12px;
+ font-family: "PingFang SC", sans-serif;
+}
+
+.errorIcon {
+ font-size: 14px;
+}
diff --git a/browser/src/components/McpManager/McpAddForm/index.tsx b/browser/src/components/McpManager/McpAddForm/index.tsx
new file mode 100644
index 000000000..f440d49bf
--- /dev/null
+++ b/browser/src/components/McpManager/McpAddForm/index.tsx
@@ -0,0 +1,143 @@
+import { Button, Form, Modal } from 'antd';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMcpConfigManager } from '@/hooks/useMcpConfigManager';
+import { useMcpFormSubmit } from '@/hooks/useMcpFormSubmit';
+import type { FormValues, McpAddFormProps } from '@/types/mcp';
+import { containerEventHandlers } from '@/utils/eventUtils';
+import { McpAddMode } from './McpAddMode';
+import { McpEditMode } from './McpEditMode';
+import styles from './index.module.css';
+
+const McpAddForm: React.FC
+ {t('mcp.scope')}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default McpAddForm;
diff --git a/browser/src/components/McpManager/McpServerTable.tsx b/browser/src/components/McpManager/McpServerTable.tsx
new file mode 100644
index 000000000..b0179da57
--- /dev/null
+++ b/browser/src/components/McpManager/McpServerTable.tsx
@@ -0,0 +1,221 @@
+import {
+ message,
+ Pagination,
+ Popconfirm,
+ Space,
+ Switch,
+ Table,
+ Tag,
+ Tooltip,
+ Typography,
+} from 'antd';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { removeMCPServer } from '@/api/mcpService';
+import type { McpManagerServer, McpServerTableProps } from '@/types/mcp';
+import styles from './index.module.css';
+
+const { Text } = Typography;
+
+const McpServerTable: React.FC
+
+