+This project is distributed under the [MIT License](./LICENSE).
diff --git a/web/VIRTUAL_SCROLL_README.md b/web/VIRTUAL_SCROLL_README.md
new file mode 100644
index 0000000..db77026
--- /dev/null
+++ b/web/VIRTUAL_SCROLL_README.md
@@ -0,0 +1,58 @@
+# Virtual Scrolling for Large Files
+
+AgentX uses virtual scrolling to keep large Markdown and CSV previews responsive. Small files render directly; larger files are parsed into blocks and only the visible region is mounted.
+
+## Strategy Selection
+
+`getContentStats()` in `src/utils/markdownBlockParser.ts` selects a strategy from the encoded content size:
+
+| Size | Strategy | Rendering |
+| --- | --- | --- |
+| Less than 1 MB | `direct` | Render the complete document |
+| 1-5 MB | `main-thread` | Parse blocks on the main thread and virtualize them |
+| 5-20 MB | `worker` | Parse in a Web Worker and virtualize the result |
+| More than 20 MB | `stream` | Parse chunks in a Web Worker and display them incrementally |
+
+If a Worker cannot be initialized or parsing fails, AgentX falls back to main-thread parsing.
+
+## Main Modules
+
+- `src/utils/markdownBlockParser.ts` splits Markdown into headings, paragraphs, lists, tables, code blocks, block quotes, and thematic breaks.
+- `src/utils/markdownParser.worker.ts` exposes parsing through a Web Worker.
+- `src/utils/workerManager.ts` owns the Worker lifecycle and reports progress.
+- `src/components/Infra/VirtualMarkdown/index.tsx` renders parsed blocks with `react-virtuoso`.
+- `src/components/Infra/FileContentRender/index.tsx` chooses direct or virtual rendering.
+- `src/components/Infra/CSVViewer/index.tsx` renders tabular previews.
+
+## VirtualMarkdown API
+
+```ts
+interface VirtualMarkdownProps {
+ content?: string;
+ className?: string;
+ processing?: boolean;
+ onCopied?: (text: string) => void;
+ parseStrategy?: 'main-thread' | 'worker' | 'stream';
+}
+```
+
+Normally the strategy is selected automatically. `parseStrategy` is intended for diagnostics and controlled integrations.
+
+```tsx
+{sessionInfo ?
-
+ {(() => {
+ // Page Mode and None session：Show Home Page
+ if (resolvedLayoutConfig.showHomePage && !sessionId && !shareId && !previewScreen && !welcomeScreen) {
+ return (
+
);
};
+const AgentXInner = forwardRef(AgentXInnerComponent) as AgentXComponent;
+
+export interface FileReaderProps {
+ url: string;
+ filename?: string;
+ contentType?: string;
+ filePreviewConfig?: FilePreviewConfig;
+}
+
+export interface CSVViewerProps {
+ content: string;
+}
+
+export const FileReader = (props: FileReaderProps) =>
+
+ );
+};
+
+export default AgentHeader;
diff --git a/web/src/components/Agent/Chatbot/ChatFiles.tsx b/web/src/components/Agent/Chatbot/ChatFiles.tsx
new file mode 100644
index 0000000..42ca11a
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/ChatFiles.tsx
@@ -0,0 +1,45 @@
+import React, { useState, type CSSProperties } from 'react';
+import { useAgentStoreApi } from '@/store';
+import AllFilesModal from './MessageAttachments/AllFilesModal';
+import FileIcon from '@/assets/svg/fileviewer/file-icon.svg?react';
+import classNames from 'classnames';
+import { Tooltip } from 'antd';
+import { useTranslation } from '@/hooks/useTranslation';
+
+export interface ChatFilesProps {
+ className?: string;
+ style?: CSSProperties;
+}
+
+/**
+ * ChatFiles Component - Show the file list of the current session
+ */
+export function ChatFiles({ className, style }: ChatFilesProps) {
+ const storeApi = useAgentStoreApi();
+ const [open, setOpen] = useState(false);
+ const { t } = useTranslation();
+
+ const sessionId = storeApi.getState().sessionInfo?.session_id || '';
+
+ if (!sessionId) {
+ return null;
+ }
+
+ return (
+
+
+ {backButtonNode ? backButtonNode : null}
+
+
+ {shareButtonNode ? shareButtonNode : null}
+ {layoutConfig.narrowMode && sessionInfo?.session_id && (
+
+
+
+ )}
+ setOpen(true)}
+ >
+
+
+ {sessionTitle}
+
+ );
+}
+
+export default ChatTitle;
diff --git a/web/src/components/Agent/Chatbot/ClickableTool.tsx b/web/src/components/Agent/Chatbot/ClickableTool.tsx
index e7f73c3..cb15e23 100644
--- a/web/src/components/Agent/Chatbot/ClickableTool.tsx
+++ b/web/src/components/Agent/Chatbot/ClickableTool.tsx
@@ -3,15 +3,16 @@ import React, { PropsWithChildren } from 'react';
interface ClickableToolProps {
onClick: () => void;
active?: boolean;
+ className?: string;
}
-const ClickableTool: React.FC
{children}
diff --git a/web/src/components/Agent/Chatbot/ExpandCollapseIcon.tsx b/web/src/components/Agent/Chatbot/ExpandCollapseIcon.tsx
new file mode 100644
index 0000000..d247539
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/ExpandCollapseIcon.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+import ChevronIcon from '@/assets/svg/planner-expand.svg?react';
+
+interface ExpandCollapseIconProps {
+ expanded: boolean;
+ className?: string;
+}
+
+const ExpandCollapseIcon: React.FC
+
+
+ ) : null
+ }
+ open={open}
+ onCancel={handleClose}
+ footer={null}
+ width={460}
+ centered
+ >
+ {/* Header: Selection mode or Tab mode */}
+ {isSelectionMode ? (
+
+ 0 && selectedFiles.length < filteredFiles.length}
+ checked={selectedFiles.length === filteredFiles.length && filteredFiles.length > 0}
+ onChange={handleSelectAll}
+ className="font-medium text-gray-600 text-[15px] square-checkbox"
+ >
+ {t('files.selectAll')}
+
+
+
+ ) : (
+
+ {(['all', 'docs', 'images'] as const).map((tab) => {
+ const tabKey = tab === 'all' ? 'files.all' : tab === 'docs' ? 'files.documents' : 'files.images';
+ return (
+
+ );
+ })}
+
+ )}
+
+ {/* File list */}
+
+ {loading ? (
+
+
+ {/* Bottom action button */}
+ {isSelectionMode && (
+
+
+ ) : filteredFiles.length === 0 ? (
+ {t('files.none')}
+ ) : (
+ <>
+ {filteredFiles.map((file, index) => (
+
+ }
+ disabled={selectedFiles.length === 0 || isDownloading}
+ onClick={handleBatchDownload}
+ className="bg-[#f7f7f7] border border-[#D0D0D0] text-black min-w-[112px] h-[36px] rounded-[6px] shadow-sm"
+ >
+ {t('files.batch.download')}
+
+
+ )}
+
+ {/* Custom styles */}
+
+ {/* Preview Modal */}
+
- = ({ attachment, isActive, onSelect }) => {
- const handleClick = () => onSelect(attachment);
+// The download button appears on hover to the left of the view indicator.
+const DownloadButton: React.FC<{ attachment: E2BFile | FileItem }> = ({ attachment }) => {
+ const [isDownloading, setIsDownloading] = useState(false);
+ const { t } = useTranslation();
- const isImage =
- (attachment as E2BFile).content_type?.startsWith('image/') || (attachment as FileItem).type?.startsWith('image/');
+ const handleDownload = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ setIsDownloading(true);
+ downloadAttachment(attachment).finally(() => {
+ setIsDownloading(false);
+ });
+ };
return (
- = ({
+ file,
+ isSelectionMode,
+ isSelected,
+ onToggleSelect,
+ onPreview,
+ onDownload,
+}) => {
+ const { t } = useTranslation();
+ const handleClick = () => {
+ if (isSelectionMode) {
+ onToggleSelect(file.path);
+ } else {
+ onPreview(file);
+ }
+ };
+
+ return (
+ = ({ file, open, onClose }) => {
+ if (!file) return null;
+
+ return (
+
+
+ }
+ open={open}
+ onCancel={onClose}
+ footer={null}
+ width={800}
+ height={600}
+ closable={false}
+ >
+
-
);
-// attachment card component
-const AttachmentCard: React.FC
+ {isActive ?
- = ({
+ attachment: initialAttachment,
+ isActive,
+ variant = 'default',
+ siblings = [],
+}) => {
+ const [open, setOpen] = useState(false);
+ const [activeAttachment, setActiveAttachment] = useState(initialAttachment);
+ const { previewFile } = useFilePreview();
+
+ const handleClick = () => {
+ const result = previewFile({
+ file: initialAttachment,
+ siblings,
+ source: 'attachment',
+ onOpenModal: () => {
+ setActiveAttachment(initialAttachment);
+ setOpen(true);
+ },
+ });
+
+ if (!result.handled && result.mode === 'modal') {
+ setActiveAttachment(initialAttachment);
+ setOpen(true);
+ }
+ };
+
+ const isImage = (file: E2BFile | FileItem) =>
+ (file as E2BFile).content_type?.startsWith('image/') || (file as FileItem).type?.startsWith('image/');
+
+ const isVideo = (file: E2BFile | FileItem) =>
+ (file as E2BFile).content_type?.startsWith('video/') || (file as FileItem).type?.startsWith('video/');
+
+ const allSiblingsAreImages = siblings.length > 1 && siblings.every((s) => isImage(s));
+
+ const isLargeImage = variant === 'large' && isImage(initialAttachment);
+ const isXLargeImage = variant === 'xlarge' && isImage(initialAttachment);
+ const isMediumImage = variant === 'medium' && isImage(initialAttachment);
+ const isXLargeVideo = variant === 'xlarge' && isVideo(initialAttachment) && siblings.length === 1;
+
+ const filename = (initialAttachment as E2BFile).filename || (initialAttachment as FileItem).name;
+ const fileSize = (initialAttachment as E2BFile).size || (initialAttachment as FileItem).size;
+
+ const modalFilename = (activeAttachment as E2BFile).filename || (activeAttachment as FileItem).name;
+
+ return (
+ <>
+
+
+ }
+ open={open}
+ onCancel={() => setOpen(false)}
+ footer={null}
+ width={allSiblingsAreImages ? 900 : 800}
+ height={600}
+ closable={false}
+ >
+
+
+
);
};
+// Attachment card component.
+const AttachmentCard: React.FC
+ {isDownloading ?
+
+ {isImage(initialAttachment) ? (
+
+
+
+
+ ) : (
+ // Align icon + text strictly to Figma spec (layout/spacing/typography).
+
+
+ )}
+ {!isImage(initialAttachment) && (
+ <>
+
+
+ {getFileIcon(filename)}
+
+
+ {filename}
+
+ {typeof fileSize === 'number' ? formatSize(fileSize) : ''}
+
+ {modalFilename}
+ }
+ onClick={() => downloadAttachment(activeAttachment)}
+ />
+ }
+ onClick={() => setOpen(false)}
+ />
+
+
+
+
+ );
+};
+
export default AttachmentCard;
diff --git a/web/src/components/Agent/Chatbot/MessageAttachments/FileListItem.tsx b/web/src/components/Agent/Chatbot/MessageAttachments/FileListItem.tsx
new file mode 100644
index 0000000..61c21b9
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/MessageAttachments/FileListItem.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import { Checkbox, Button, Dropdown } from 'antd';
+import { FileCard } from '@ant-design/x';
+import { EllipsisOutlined, EyeOutlined, DownloadOutlined } from '@ant-design/icons';
+import { E2BFile } from '@/types';
+import { formatSize } from '@/utils/fileHelpers';
+import { transformAttachmentToFileCard } from '@/utils/file';
+import DownloadIcon from '@/assets/svg/messageAttachments/download.svg?react';
+import { useTranslation } from '@/hooks/useTranslation';
+
+interface FileListItemProps {
+ file: E2BFile;
+ isSelectionMode: boolean;
+ isSelected: boolean;
+ onToggleSelect: (path: string) => void;
+ onPreview: (file: E2BFile) => void;
+ onDownload: (file: E2BFile) => void;
+}
+
+export const FileListItem: React.FC
+
+ {allSiblingsAreImages && (
+
+ {siblings.map((sibling, idx) => {
+ const isSelected = sibling.url === activeAttachment.url;
+ return (
+
+ )}
+ setActiveAttachment(sibling)}
+ >
+ 
+
+ );
+ })}
+
+
+ );
+};
diff --git a/web/src/components/Agent/Chatbot/MessageAttachments/FilePreviewModal.tsx b/web/src/components/Agent/Chatbot/MessageAttachments/FilePreviewModal.tsx
new file mode 100644
index 0000000..ae861ce
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/MessageAttachments/FilePreviewModal.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Modal, Button } from 'antd';
+import { E2BFile } from '@/types';
+import { FileReader } from '@/components/Infra';
+import { FileViewerCloseIcon, FileViewerDownloadPngIcon } from '@/components/Infra/Icons';
+import { downloadAttachment } from '@/utils/file';
+
+interface FilePreviewModalProps {
+ file: E2BFile | null;
+ open: boolean;
+ onClose: () => void;
+}
+
+export const FilePreviewModal: React.FC
+ {/* Checkbox in selection mode */}
+ {isSelectionMode && (
+
+
+ {/* Action menu in normal mode */}
+ {!isSelectionMode && (
+
+
+ {file.filename}
+ {formatSize(file.size)}
+ {file.filename}
+ }
+ onClick={() => downloadAttachment(file)}
+ />
+ } onClick={onClose} />
+
+
+
+ );
+};
+
diff --git a/web/src/components/Agent/Chatbot/MessageAttachments/index.tsx b/web/src/components/Agent/Chatbot/MessageAttachments/index.tsx
index dd4c6f0..63846a2 100644
--- a/web/src/components/Agent/Chatbot/MessageAttachments/index.tsx
+++ b/web/src/components/Agent/Chatbot/MessageAttachments/index.tsx
@@ -1,35 +1,135 @@
-import React from 'react';
+import React, { useState, useMemo, isValidElement, cloneElement } from 'react';
import { E2BFile, FileItem, MessageChunk } from '@/types';
import { useAgentStore } from '@/store';
import AttachmentCard from './AttachmentCard';
-import { getVisibleAttachments, hasAttachments } from './utils';
+import AllFilesModal from './AllFilesModal';
+import { getVisibleAttachments } from './utils';
+import { isEqual } from 'lodash-es';
+import { useTranslation } from '@/hooks/useTranslation';
+import { getFileIcon } from '@/utils/file';
+import classNames from 'classnames';
interface MessageAttachmentsProps {
message: MessageChunk;
+ isUserMessage?: boolean;
}
-const MessageAttachments: React.FC
+ {/* Images Row */}
+ {images.length > 0 && (
+
+
+ {images.map((attachment: any) => (
+
+ )}
+ {/* Files Stack */}
+ {files.length > 0 && (
+
+ {files.map((attachment: any) => (
+
+ )}
+
- {visibleAttachments.map((attachment) => (
-
+ <>
+
+ {/* Attachment cards */}
+ {visibleAttachments.map((attachment: any, idx) => (
+ setIsModalOpen(false)} sessionId={sessionId} />
+ {!allImages && message.role == 'assistant' && (
+
+
);
};
diff --git a/web/src/components/Agent/Chatbot/MessageAttachments/useFileData.ts b/web/src/components/Agent/Chatbot/MessageAttachments/useFileData.ts
new file mode 100644
index 0000000..c574437
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/MessageAttachments/useFileData.ts
@@ -0,0 +1,54 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { message } from 'antd';
+import { E2BFile } from '@/types';
+import { isDocumentFile, isImageFile } from '@/utils/fileHelpers';
+import { useRequestClient } from '@/store';
+import { useTranslation } from '@/hooks/useTranslation';
+
+type TabType = 'all' | 'docs' | 'images';
+
+export const useFileData = (sessionId: string, open: boolean) => {
+ const { t } = useTranslation();
+ const requestClient = useRequestClient();
+ const [loading, setLoading] = useState(false);
+ const [activeTab, setActiveTab] = useState setIsModalOpen(true)}
+ className="flex items-center justify-center gap-1 p-3 bg-white border border-[#EAEAEA] rounded-xl hover:bg-[#0000000a] transition-all cursor-pointer h-[56px] w-[272px]"
+ >
+
+ {viewAllIcon}
+
+
+ {t('attachment.view.all')}
+
+
+ )}
+
+
+ );
+ });
+
+ render(
+
+ {variant}:{reference?.title}
+
+ {defaultRenderer}
+ {metadata.ticket?.id || defaultRenderer}
+ )}
+ />,
+ );
+
+ expect(screen.getByTestId('ticket-metadata').textContent).toBe('ticket-1');
+ });
+});
diff --git a/web/src/components/Agent/Chatbot/MessageMetadataRenderer.tsx b/web/src/components/Agent/Chatbot/MessageMetadataRenderer.tsx
new file mode 100644
index 0000000..e3f2b48
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/MessageMetadataRenderer.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { CloseOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import type { MessageMetadata, MessageReferenceMetadata, ReferenceCardMetadata } from '@/types';
+import type { MetadataRenderVariant, RenderMessageMetadata } from '@/types/agentx';
+import ReferenceIcon from '@/assets/svg/sender/reference.svg?react';
+import { useTranslation } from '@/hooks/useTranslation';
+
+interface MessageMetadataRendererProps {
+ metadata?: MessageMetadata;
+ variant?: MetadataRenderVariant;
+ onReferenceRemove?: () => void;
+ renderMessageMetadata?: RenderMessageMetadata;
+}
+
+interface ReferenceRendererProps {
+ reference?: MessageReferenceMetadata;
+ variant?: MetadataRenderVariant;
+ onRemove?: () => void;
+}
+
+const isRecord = (value: unknown): value is Record
+ {references.map((item, index) => {
+ const title = getReferenceTitle(item, t('reference.default_title'));
+ const subtitle = getReferenceSubtitle(item);
+ const cardKey = item.id || `${item.type || 'reference'}-${index}`;
+
+ return (
+
+ );
+};
+
+const MessageMetadataRenderer: React.FC
+
+ );
+ })}
+
+
+
+ {variant === 'draft' ?
+ {variant === 'draft' && onRemove ? (
+
+ ) : null}
+ {t('reference.draft_label')}
: null}
+ {title}
+ {subtitle ? {subtitle}
: null}
+
+ {icon}
+ {step.title}
+ {hasChildren && (
+
+
+ );
+};
const Planner = (props: any) => {
- const { data } = props;
+ const { data = [] } = props;
const { Paragraph } = Typography;
- const { setPipelineTargetMessage } = useAgentStore();
-
+ const { layoutConfig } = useAgentStore();
const [expandedKeys, setExpandedKeys] = useState
+
+ );
}
+ return
+ {item.content &&
);
}
- return
- {step.children.map((item, idx) => (
-
- {renderContent(item, idx)}
-
- ))}
-
- ),
- }),
- }));
+ // Important: plan step children are appended by streaming logic, and those updates may mutate
+ // the existing step objects/arrays in-place. If we memoize `items` only by `data` reference,
+ // the UI can get stuck and not show newly appended tool calls until the plan finishes.
+ const items = filterEmptySteps(data).map((step: PlanStep) => ({
+ key: step.id,
+ title:
+ {step.children.map((item, idx) => (
+
+ {renderContent(item)}
+
+ ))}
+
+ ),
+ }),
+ }));
useEffect(() => {
const currentDataLength = data.length;
const prevDataLength = prevDataLengthRef.current;
- // if it is the first load or there are new steps
if (prevDataLength === 0) {
- // when the first load, expand all steps
- setExpandedKeys(data.map((item) => item.id));
+ setExpandedKeys(data.map((item: any) => item.id));
} else if (currentDataLength > prevDataLength) {
- // when there are new steps, only expand the new steps, keep the existing expanded state
const newSteps = data.slice(prevDataLength);
- const newStepIds = newSteps.map((item) => item.id);
+ const newStepIds = newSteps.map((item: any) => item.id);
setExpandedKeys((prev) => [...prev, ...newStepIds]);
}
- // update the previous length
prevDataLengthRef.current = currentDataLength;
}, [data]);
- const onExpand = (keys) => {
+ const onExpand = (keys: string[]) => {
setExpandedKeys(keys);
};
return (
-
+ {useCases.map((useCase, index) => (
+
+ );
+
+ return (
+ handleUseCaseClick(useCase)}
+ >
+
+ ))}
+
+
+ {useCase.title}
+ {useCase.description && ( ++ {useCase.description} +
+ )} +
+
+ );
+};
+
+export default PreviewScreen;
diff --git a/web/src/components/Agent/Chatbot/Sender/ChatSender.tsx b/web/src/components/Agent/Chatbot/Sender/ChatSender.tsx
index 12eb051..fb6f64e 100644
--- a/web/src/components/Agent/Chatbot/Sender/ChatSender.tsx
+++ b/web/src/components/Agent/Chatbot/Sender/ChatSender.tsx
@@ -1,90 +1,424 @@
-import { Sender } from '@ant-design/x';
-import { Badge, Button, Flex, Tooltip } from 'antd';
-import React, { useCallback, useMemo, useRef } from 'react';
+import { Sender, Suggestion } from '@ant-design/x';
+import type { SenderRef } from '@ant-design/x/es/sender/interface';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from '@/hooks/useTranslation';
-import { useAgentStore } from '@/store';
+import { useAgentStore, useAgentStoreApi } from '@/store';
import useChat from '@/hooks/useChat';
-import FileUpload from './components/FileUpload';
-import FileList from './components/FileList';
-import { FileItem } from '@/types';
+import { FileList, SenderFooter } from '@/components/Agent/Chatbot/Sender/components';
+import MessageMetadataRenderer from '@/components/Agent/Chatbot/MessageMetadataRenderer';
+import type { SenderOptionConfig } from '@/types';
+import DisabledSender from './DisabledSender';
+import { useSenderSubmit, MAX_CONTENT_LENGTH } from './hooks/useSenderSubmit';
+import { useSenderFileHandlers } from './hooks/useSenderFileHandlers';
+import { useSenderSessionSync } from './hooks/useSenderSessionSync';
+import { normalizeSenderOptionValues } from './utils/senderOptions';
+import eventBus from '@/utils/eventBus';
+import classNames from 'classnames';
+import { hasActiveHitlApprovalRequest } from '@/hooks/useChat/utils';
+import './index.less';
-const MAX_CONTENT_LENGTH = 3000;
+interface SenderMenuItem {
+ key: string;
+ label: string;
+ icon?: React.ReactNode;
+ agent_tools?: string[];
+}
-const SenderContainer: React.FC = () => {
+const PASTED_TEXT_FILE_BASE_NAME = 'pasted_content';
+const PASTED_TEXT_FILE_EXTENSION = '.txt';
+const PASTED_TEXT_FILE_NAME_REGEXP = /^pasted_content(\d*)\.txt$/;
+const DRAGGED_FILE_TYPE = 'Files';
+
+const hasDraggedFiles = (dataTransfer: DataTransfer) => Array.from(dataTransfer.types).includes(DRAGGED_FILE_TYPE);
+
+const getPastedTextFileIndex = (fileName: string) => {
+ const match = PASTED_TEXT_FILE_NAME_REGEXP.exec(fileName);
+ if (!match) return null;
+
+ if (!match[1]) return 1;
+
+ const index = Number(match[1]);
+ return Number.isInteger(index) && index > 1 ? index : null;
+};
+
+const formatPastedTextFileName = (index: number) =>
+ `${PASTED_TEXT_FILE_BASE_NAME}${index === 1 ? '' : index}${PASTED_TEXT_FILE_EXTENSION}`;
+
+const SenderContainer: React.FC<{
+ basePath?: string;
+ agentId?: string;
+ sessionId?: string;
+ menuItems?: SenderMenuItem[];
+ showSenderActions?: boolean;
+ topAddon?: React.ReactNode;
+}> = ({
+ basePath: propsBasePath,
+ agentId: propsAgentId,
+ sessionId: propsSessionId,
+ menuItems: propsMenuItems,
+ showSenderActions = false,
+ topAddon,
+}) => {
const { t } = useTranslation();
+ const navigate = useNavigate();
+ const location = useLocation();
+ const storeApi = useAgentStoreApi();
+
+ const fileUploadRef = useRef
+
+
+ {useCases && useCases.length > 0 && (
+
+ {agentIcon && (
+
+
+ {prompts.length > 0 && (
+
+ 
+
+ )}
+
+
+
+ + {agentName} +
+ + {agentCreator && ( ++ {t('preview.creator')}：{agentCreator} +
+ )} + ++ {agentDescription} +
+
+ {prompts.map((prompt, index) => {
+ const normalizedPrompt = normalizePrompt(prompt);
+ return (
+
+ )}
+ handlePromptClick(normalizedPrompt.text)}
+ >
+
+ );
+ })}
+ + {normalizedPrompt.text} +
+ → +
+ {
+ if (!disabled) setUseCasesOpen(open);
+ }}
+ popupRender={dropdownRender}
+ trigger={['click']}
+ placement="bottom"
+ >
+
+
+ )}
+
+
+ {t('preview.view_use_cases')}
+
+
+
- {
- const { SendButton } = components;
- return (
-
-
- {senderSending ? (
-
-
-
- ) : (
- MAX_CONTENT_LENGTH || senderLoading}
- style={{ width: '36px', height: '36px', fontSize: '18px' }}
- />
- )}
-
-
- );
- }}
- />
+ 0 && !headerOpen}>
+ }
+ disabled={!sessionActive}
+ style={{ fontSize: '18px', width: '36px', height: '36px' }}
+ />
+
+
+ );
+};
+
+export default SenderQuickActions;
diff --git a/web/src/components/Agent/Chatbot/Sender/components/ToolItem.tsx b/web/src/components/Agent/Chatbot/Sender/components/ToolItem.tsx
new file mode 100644
index 0000000..c3bbaad
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/components/ToolItem.tsx
@@ -0,0 +1,64 @@
+import { KnowledgeBaseItem, SandboxToolItem, MCPToolItem } from '@/types';
+import React from 'react';
+import { getToolName } from './MCPToolModal';
+
+// Type judgement function
+export const isKnowledgeBaseItem = (item: any): item is KnowledgeBaseItem => {
+ return item && typeof item === 'object' && 'knowledge_id' in item;
+};
+
+// export const isSandboxToolItem = (item: any): item is SandboxToolItem => {
+// return item && typeof item === 'object' && 'agent_tool_id' in item && 'status' in item;
+// };
+
+// export const isMCPToolItem = (item: any): item is MCPToolItem => {
+// return item && typeof item === 'object' && 'id' in item && !('agent_tool_id' in item);
+// };
+
+const ToolItem: React.FC<{ item: any; index: number }> = ({ item, index }) => {
+ // Get different properties by type
+ let icon: string | undefined;
+ let name: string;
+
+ if (isKnowledgeBaseItem(item)) {
+ // Knowledge base project
+ icon = undefined; // Knowledge base projects usually have no icons
+ name = item.name;
+ // } else if (isSandboxToolItem(item)) {
+ // // Sandboxing Tool Project
+ // icon = item.avatar;
+ // name = getToolName(item);
+ // } else if (isMCPToolItem(item)) {
+ // // MCPTools
+ // icon = item.icon;
+ // name = getToolName(item);
+ // } else {
+ // // Default processing
+ // icon = item?.icon || item?.avatar;
+ // name = getToolName(item);
+ // }
+ } else {
+ // Tools
+ icon = item?.icon;
+ name = getToolName(item);
+ }
+
+ return (
+ ;
+ handleUpload?: (option: { file?: File }) => void | Promise;
+}
+
+interface UseSenderFileHandlersProps {
+ fileUploadDisabled?: boolean;
+ fileUploadRef: React.RefObject;
+ senderFiles: FileItem[];
+ senderFilesConfig: {
+ onRemove?: (file?: FileItem) => void;
+ };
+ setSenderFiles: (files: FileItem[] | ((prev: FileItem[]) => FileItem[])) => void;
+}
+
+export const useSenderFileHandlers = ({
+ fileUploadDisabled,
+ fileUploadRef,
+ senderFiles,
+ senderFilesConfig,
+ setSenderFiles,
+}: UseSenderFileHandlersProps) => {
+ const handlePaste = useCallback(
+ async (files: FileList | File[]) => {
+ if (fileUploadDisabled) return;
+
+ const uploader = fileUploadRef.current;
+ if (!uploader) return;
+
+ try {
+ const fileArray = Array.from(files);
+ const verifiedFiles: File[] = [];
+
+ for (const file of fileArray) {
+ const verified = await uploader.beforeUpload?.(file, fileArray);
+ if (verified) {
+ verifiedFiles.push(file);
+ }
+ }
+
+ const uploadPromises = verifiedFiles.map((file) => uploader.handleUpload?.({ file }));
+ await Promise.all(uploadPromises);
+ } catch (error) {
+ console.error('Upload failed:', error);
+ }
+ },
+ [fileUploadDisabled, fileUploadRef],
+ );
+
+ const handleRemoveFile = useCallback(
+ (uid: string) => {
+ if (senderFilesConfig.onRemove) {
+ senderFilesConfig.onRemove(senderFiles.filter((item) => item.uid === uid)[0]);
+ }
+
+ setSenderFiles((prev: FileItem[]) => prev.filter((item) => item.uid !== uid));
+ },
+ [setSenderFiles, senderFilesConfig, senderFiles],
+ );
+
+ const handleFileStartUpload = useCallback(
+ (params: FileItem) => {
+ setSenderFiles((prev: FileItem[]) => [...prev, params]);
+ },
+ [setSenderFiles],
+ );
+
+ const handleFileFinishUpload = useCallback(
+ (params: FileItem) => {
+ setSenderFiles((prev: FileItem[]) => {
+ const index = prev.findIndex((item) => item.uid === params.uid);
+ if (index === -1) return prev;
+ if (params.status === 'error') return prev.filter((item) => item.uid !== params.uid);
+
+ const next = [...prev];
+ next[index] = params;
+ return next;
+ });
+ },
+ [setSenderFiles],
+ );
+
+ return {
+ handlePaste,
+ handleRemoveFile,
+ handleFileStartUpload,
+ handleFileFinishUpload,
+ };
+};
diff --git a/web/src/components/Agent/Chatbot/Sender/hooks/useSenderSessionSync.ts b/web/src/components/Agent/Chatbot/Sender/hooks/useSenderSessionSync.ts
new file mode 100644
index 0000000..f0fca3b
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/hooks/useSenderSessionSync.ts
@@ -0,0 +1,303 @@
+import { useCallback, useEffect, useRef } from 'react';
+import type { KnowledgeBaseItem, MCPToolItem, ModelItem, SessionInfo } from '@/types';
+import { getSavedKnowledgeBases, getSavedModel, saveSelectedKnowledgeBases } from '@/utils/modelStorage';
+import { getEnglishLabel } from '../utils/senderOptions';
+
+type AgentStoreApi = ReturnType;
+
+interface SenderMenuItem {
+ key: string;
+ label: string;
+ icon?: React.ReactNode;
+ agent_tools?: string[];
+}
+
+interface UseSenderSessionSyncProps {
+ sessionInfo?: SessionInfo;
+ showSenderActions: boolean;
+ menuItems: SenderMenuItem[];
+ selectedScene: string | null;
+ setSelectedScene: (scene: string | null) => void;
+ generalAgentMode?: string;
+ setGeneralAgentMode: (mode?: string) => void;
+ senderKnowledgeBases: KnowledgeBaseItem[];
+ selectedSenderKnowledgeBases: KnowledgeBaseItem[];
+ setSelectedSenderKnowledgeBases: (items: KnowledgeBaseItem[]) => void;
+ senderMCPTools: MCPToolItem[];
+ senderSandboxTools: MCPToolItem[];
+ senderPluginTools: MCPToolItem[];
+ senderWorkflowTools: MCPToolItem[];
+ senderSkillTools: MCPToolItem[];
+ setSelectedSenderMCPTools: (items: MCPToolItem[]) => void;
+ senderModels?: ModelItem[];
+ selectedSenderModels: ModelItem[];
+ setSelectedSenderModels: (items: ModelItem[]) => void;
+ storeApi: AgentStoreApi;
+}
+
+const getDefaultModel = (models: ModelItem[] | undefined) => {
+ if (!models?.length) return undefined;
+ return models.find((model) => model.is_default === 1) || models[0];
+};
+
+export const useSenderSessionSync = ({
+ sessionInfo,
+ showSenderActions,
+ menuItems,
+ selectedScene,
+ setSelectedScene,
+ generalAgentMode,
+ setGeneralAgentMode,
+ senderKnowledgeBases,
+ selectedSenderKnowledgeBases,
+ setSelectedSenderKnowledgeBases,
+ senderMCPTools,
+ senderSandboxTools,
+ senderPluginTools,
+ senderWorkflowTools,
+ senderSkillTools,
+ setSelectedSenderMCPTools,
+ senderModels,
+ selectedSenderModels,
+ setSelectedSenderModels,
+ storeApi,
+}: UseSenderSessionSyncProps) => {
+ const isKbRestored = useRef(false);
+ const isSceneRestored = useRef(false);
+ const kbSessionIdRef = useRef(undefined);
+ const sceneSessionIdRef = useRef(undefined);
+ const modelSessionIdRef = useRef(undefined);
+
+ useEffect(() => {
+ if (isSceneRestored.current) return;
+ if (!showSenderActions || selectedScene) return;
+
+ if (generalAgentMode && menuItems.length) {
+ const matchedScene = menuItems.find((item) => {
+ return item.key === generalAgentMode || getEnglishLabel(item.key) === generalAgentMode || item.label === generalAgentMode;
+ });
+ if (matchedScene) {
+ setSelectedScene(matchedScene.key);
+ }
+ }
+ if (menuItems.length) {
+ isSceneRestored.current = true;
+ }
+ }, [showSenderActions, generalAgentMode, menuItems, selectedScene, setSelectedScene]);
+
+ const updateSelectedItems = useCallback(
+ (session: SessionInfo) => {
+ // Scene restore is guarded by session id to avoid overwriting user's in-session change
+ // when sessionInfo updates for non-critical reasons (title/status refresh).
+ if (showSenderActions && menuItems.length && session?.session_id) {
+ const isNewSession = sceneSessionIdRef.current !== session.session_id;
+ if (isNewSession) {
+ sceneSessionIdRef.current = session.session_id;
+ const sessionScene = session.general_agent_mode?.trim();
+ if (sessionScene) {
+ setGeneralAgentMode(sessionScene);
+ const matchedScene = menuItems.find((item) => {
+ return item.key === sessionScene || getEnglishLabel(item.key) === sessionScene || item.label === sessionScene;
+ });
+ if (matchedScene) {
+ setSelectedScene(matchedScene.key);
+ }
+ }
+ }
+ }
+
+ const isNewKbSession = !!session?.session_id && kbSessionIdRef.current !== session.session_id;
+ const hasKbUserSelection = (storeApi.getState().selectedSenderKnowledgeBases?.length || 0) > 0;
+ const shouldInitializeKb = isNewKbSession || !hasKbUserSelection;
+
+ if (shouldInitializeKb) {
+ if (isNewKbSession) {
+ kbSessionIdRef.current = session.session_id;
+ }
+
+ const sessionKnowledgeIds = session?.knowledge_query_request?.knowledge_ids;
+ if (session?.knowledge_query_request && senderKnowledgeBases.length) {
+ const selectedKnowledgeBases = senderKnowledgeBases.filter((item) =>
+ (sessionKnowledgeIds || []).includes(item.knowledge_id),
+ );
+ setSelectedSenderKnowledgeBases(selectedKnowledgeBases);
+ } else if (senderKnowledgeBases.length) {
+ const savedKbIds = getSavedKnowledgeBases();
+ if (savedKbIds.length > 0) {
+ const validSavedKBs = senderKnowledgeBases.filter((item) => savedKbIds.includes(item.knowledge_id));
+ if (validSavedKBs.length > 0) {
+ setSelectedSenderKnowledgeBases(validSavedKBs);
+ }
+ }
+ }
+ }
+
+ const sessionToolItems = session?.agent_tool_info?.agent_tool_items || [];
+ const sessionMcpToolItems = sessionToolItems.filter((item) => item.agent_tool_type === 'MCP');
+ const sessionAgentToolItems = sessionToolItems.filter((item) => item.agent_tool_type === 'SANDBOX');
+ const sessionPluginToolItems = sessionToolItems.filter(
+ (item) => item.agent_tool_type === 'builtin' || item.agent_tool_type === 'API',
+ );
+ const sessionWorkflowToolItems = sessionToolItems.filter((item) => item.agent_tool_type === 'workflow');
+ const sessionSkillToolItems = sessionToolItems.filter((item) => item.agent_tool_type === 'skills');
+
+ if (sessionToolItems.length) {
+ const selectedMCPTools =
+ senderMCPTools.filter((item) => sessionMcpToolItems.some((tool) => tool.agent_tool_id === item.agent_tool_id)) || [];
+ const selectedSandboxTools =
+ senderSandboxTools.filter((item) => sessionAgentToolItems.some((tool) => tool.agent_tool_id === item.agent_tool_id)) ||
+ [];
+ const selectedPluginTools =
+ senderPluginTools.filter((item) => sessionPluginToolItems.some((tool) => tool.agent_tool_id === item.agent_tool_id)) ||
+ [];
+ const selectedWorkflowTools =
+ senderWorkflowTools.filter((item) =>
+ sessionWorkflowToolItems.some((tool) => tool.agent_tool_id === item.agent_tool_id),
+ ) || [];
+ const selectedSkillTools =
+ senderSkillTools.filter((item) => sessionSkillToolItems.some((tool) => tool.agent_tool_id === item.agent_tool_id)) || [];
+
+ setSelectedSenderMCPTools([
+ ...selectedMCPTools,
+ ...selectedSandboxTools,
+ ...selectedPluginTools,
+ ...selectedWorkflowTools,
+ ...selectedSkillTools,
+ ]);
+
+ if (showSenderActions && menuItems.length) {
+ const sessionToolIds = sessionToolItems.map((item) => item.agent_tool_id);
+ const matchedScene = menuItems.find((item) => {
+ if (!item.agent_tools?.length) return false;
+ return item.agent_tools.every((toolId) => sessionToolIds.includes(toolId));
+ });
+ if (matchedScene) {
+ setSelectedScene(matchedScene.key);
+ }
+ }
+ }
+
+ const isNewSession = !!session?.session_id && modelSessionIdRef.current !== session.session_id;
+ const hasUserSelection = (storeApi.getState().selectedSenderModels?.length || 0) > 0;
+ const shouldInitializeModel = isNewSession || !hasUserSelection;
+
+ if (!shouldInitializeModel) return;
+ if (isNewSession) {
+ modelSessionIdRef.current = session.session_id;
+ }
+
+ if (session?.model && senderModels?.length) {
+ // Priority: session model -> saved model (if session gives default) -> default model.
+ const selectedModel = senderModels.find((model) => model.id === session.model?.id);
+ const savedModel = getSavedModel();
+ const defaultModel = getDefaultModel(senderModels);
+
+ let targetModel = selectedModel;
+ if (
+ savedModel &&
+ defaultModel &&
+ selectedModel?.id === defaultModel.id &&
+ savedModel.id !== defaultModel.id
+ ) {
+ const availableSavedModel = senderModels.find((model) => model.id === savedModel.id);
+ if (availableSavedModel) {
+ targetModel = availableSavedModel;
+ }
+ }
+
+ if (targetModel) {
+ setSelectedSenderModels([targetModel]);
+ } else {
+ setSelectedSenderModels([]);
+ }
+ return;
+ }
+
+ const savedModel = getSavedModel();
+ if (savedModel && senderModels?.length) {
+ const availableModel = senderModels.find((model) => model.id === savedModel.id);
+ if (availableModel) {
+ setSelectedSenderModels([availableModel]);
+ } else {
+ setSelectedSenderModels([]);
+ }
+ return;
+ }
+
+ const defaultModel = getDefaultModel(senderModels);
+ if (defaultModel) {
+ setSelectedSenderModels([defaultModel]);
+ } else {
+ setSelectedSenderModels([]);
+ }
+ },
+ [
+ showSenderActions,
+ menuItems,
+ setGeneralAgentMode,
+ setSelectedScene,
+ storeApi,
+ senderKnowledgeBases,
+ setSelectedSenderKnowledgeBases,
+ senderMCPTools,
+ senderSandboxTools,
+ senderPluginTools,
+ senderWorkflowTools,
+ senderSkillTools,
+ setSelectedSenderMCPTools,
+ senderModels,
+ setSelectedSenderModels,
+ ],
+ );
+
+ useEffect(() => {
+ if (sessionInfo) {
+ updateSelectedItems(sessionInfo);
+ }
+ }, [sessionInfo, updateSelectedItems]);
+
+ useEffect(() => {
+ if (senderModels?.length > 0 && selectedSenderModels.length === 0 && !sessionInfo?.model) {
+ const savedModel = getSavedModel();
+ if (savedModel) {
+ const availableModel = senderModels.find((model) => model.id === savedModel.id);
+ if (availableModel) {
+ setSelectedSenderModels([availableModel]);
+ return;
+ }
+ }
+
+ const defaultModel = getDefaultModel(senderModels);
+ if (defaultModel) {
+ setSelectedSenderModels([defaultModel]);
+ }
+ }
+ }, [senderModels, selectedSenderModels.length, sessionInfo?.model, setSelectedSenderModels]);
+
+ useEffect(() => {
+ if (isKbRestored.current) return;
+ if (!senderKnowledgeBases.length) return;
+
+ if (selectedSenderKnowledgeBases.length === 0) {
+ const savedKbIds = getSavedKnowledgeBases();
+ if (savedKbIds.length > 0 && !sessionInfo) {
+ const validSavedKBs = senderKnowledgeBases.filter((item) => savedKbIds.includes(item.knowledge_id));
+ if (validSavedKBs.length > 0) {
+ setSelectedSenderKnowledgeBases(validSavedKBs);
+ }
+ }
+ }
+
+ isKbRestored.current = true;
+ }, [senderKnowledgeBases, selectedSenderKnowledgeBases.length, sessionInfo, setSelectedSenderKnowledgeBases]);
+
+ useEffect(() => {
+ if (!showSenderActions && selectedScene) {
+ setSelectedScene(null);
+ }
+ }, [showSenderActions, selectedScene, setSelectedScene]);
+
+ useEffect(() => {
+ saveSelectedKnowledgeBases(selectedSenderKnowledgeBases);
+ }, [selectedSenderKnowledgeBases]);
+};
diff --git a/web/src/components/Agent/Chatbot/Sender/hooks/useSenderSubmit.ts b/web/src/components/Agent/Chatbot/Sender/hooks/useSenderSubmit.ts
new file mode 100644
index 0000000..4fc7af8
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/hooks/useSenderSubmit.ts
@@ -0,0 +1,157 @@
+import { useCallback, useMemo } from 'react';
+import type { FileItem, MCPToolItem, ModelItem, KnowledgeBaseItem, MessageMetadata, SenderOptionConfig } from '@/types';
+import { buildSenderSelectPayload, getEnglishLabel } from '../utils/senderOptions';
+
+export const MAX_CONTENT_LENGTH = 3000;
+
+interface SenderMenuItem {
+ key: string;
+ label: string;
+ icon?: React.ReactNode;
+ agent_tools?: string[];
+}
+
+interface UseSenderSubmitProps {
+ senderContent: string;
+ senderFiles: FileItem[];
+ senderMetadata?: MessageMetadata;
+ senderLoading: boolean;
+ previewSendDisabled?: boolean;
+ selectedScene: string | null;
+ showSenderActions: boolean;
+ menuItems: SenderMenuItem[];
+ selectedSenderKnowledgeBases: KnowledgeBaseItem[];
+ selectedSenderMCPTools: MCPToolItem[];
+ selectedSenderModels: ModelItem[];
+ senderMCPTools: MCPToolItem[];
+ senderSandboxTools: MCPToolItem[];
+ senderPluginTools: MCPToolItem[];
+ senderWorkflowTools: MCPToolItem[];
+ senderSkillTools: MCPToolItem[];
+ deepResearchOptions?: any;
+ isDeepResearch: boolean;
+ senderSelectOptions: SenderOptionConfig[];
+ senderOptionsValues: Record;
+ setGeneralAgentMode: (mode?: string) => void;
+ send: (payload: any) => void;
+ clearState: () => void;
+}
+
+export const useSenderSubmit = ({
+ senderContent,
+ senderFiles,
+ senderMetadata,
+ senderLoading,
+ previewSendDisabled,
+ selectedScene,
+ showSenderActions,
+ menuItems,
+ selectedSenderKnowledgeBases,
+ selectedSenderMCPTools,
+ selectedSenderModels,
+ senderMCPTools,
+ senderSandboxTools,
+ senderPluginTools,
+ senderWorkflowTools,
+ senderSkillTools,
+ deepResearchOptions,
+ isDeepResearch,
+ senderSelectOptions,
+ senderOptionsValues,
+ setGeneralAgentMode,
+ send,
+ clearState,
+}: UseSenderSubmitProps) => {
+ const hasUploadingFiles = useMemo(
+ () => senderFiles.some((file) => file.status === 'uploading'),
+ [senderFiles],
+ );
+
+ const isSendDisabled = useMemo(() => {
+ return (
+ !!previewSendDisabled ||
+ senderContent.length === 0 ||
+ senderContent.length > MAX_CONTENT_LENGTH ||
+ senderLoading ||
+ hasUploadingFiles
+ );
+ }, [previewSendDisabled, senderContent.length, senderLoading, hasUploadingFiles]);
+
+ const handleSend = useCallback(() => {
+ if (isSendDisabled) return;
+
+ let toolsToSend = selectedSenderMCPTools;
+ const selectedItem = showSenderActions ? menuItems.find((item) => item.key === selectedScene) : undefined;
+
+ if (showSenderActions && selectedItem?.agent_tools?.length) {
+ // Scene-selected tools are applied as a whitelist over all available tool sources.
+ const allTools = [
+ ...(senderMCPTools || []),
+ ...(senderSandboxTools || []),
+ ...(senderPluginTools || []),
+ ...(senderWorkflowTools || []),
+ ...(senderSkillTools || []),
+ ];
+ toolsToSend = allTools.filter((tool) => selectedItem.agent_tools?.includes(tool.agent_tool_id));
+ }
+
+ const agentMode = selectedItem?.key ? getEnglishLabel(selectedItem.key) : undefined;
+ setGeneralAgentMode(agentMode);
+
+ const senderSelectPayload = buildSenderSelectPayload(senderSelectOptions, senderOptionsValues);
+ const deepResearchPayload =
+ isDeepResearch && selectedScene === 'deep_research'
+ ? (deepResearchOptions ?? { deepresearch: { mode: 'google_api' } })
+ : deepResearchOptions;
+
+ // Merge scene-level options and sender field options into one API `options` payload.
+ const mergedOptions = {
+ ...((deepResearchPayload && typeof deepResearchPayload === 'object' ? deepResearchPayload : {}) as Record<
+ string,
+ any
+ >),
+ ...senderSelectPayload,
+ };
+
+ send({
+ content: senderContent,
+ ...(senderFiles.length > 0 && { files: senderFiles }),
+ ...(senderMetadata !== undefined && { metadata: senderMetadata }),
+ ...(selectedSenderKnowledgeBases.length > 0 && { knowledgeBases: selectedSenderKnowledgeBases }),
+ ...(toolsToSend.length > 0 && { mcpTools: toolsToSend }),
+ ...(selectedSenderModels.length > 0 && { models: selectedSenderModels }),
+ ...(Object.keys(mergedOptions).length > 0 && { options: mergedOptions }),
+ });
+
+ clearState();
+ }, [
+ isSendDisabled,
+ selectedSenderMCPTools,
+ showSenderActions,
+ menuItems,
+ selectedScene,
+ senderMCPTools,
+ senderSandboxTools,
+ senderPluginTools,
+ senderWorkflowTools,
+ senderSkillTools,
+ setGeneralAgentMode,
+ senderSelectOptions,
+ senderOptionsValues,
+ isDeepResearch,
+ deepResearchOptions,
+ send,
+ senderContent,
+ senderFiles,
+ senderMetadata,
+ selectedSenderKnowledgeBases,
+ selectedSenderModels,
+ clearState,
+ ]);
+
+ return {
+ handleSend,
+ hasUploadingFiles,
+ isSendDisabled,
+ };
+};
diff --git a/web/src/components/Agent/Chatbot/Sender/index.less b/web/src/components/Agent/Chatbot/Sender/index.less
index c7590ac..5e76b7c 100644
--- a/web/src/components/Agent/Chatbot/Sender/index.less
+++ b/web/src/components/Agent/Chatbot/Sender/index.less
@@ -1,43 +1,175 @@
.agentx-sender {
.ant-sender {
- border-radius: 24px;
- border-color: #e1e1e1;
- box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
+ // Match design spec (Frame 1597879883.svg)
+ min-height: 100px;
+ // NOTE: Ant Sender has its own defaults; force overrides for exact shape.
+ border-radius: 28px !important;
+ border: 1px solid #e9e9e9;
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.04) !important;
+ background: #fff !important;
+ overflow: hidden;
+ box-sizing: border-box;
+
+ // Ant Sender uses a pseudo-element for focus/outline in some versions.
+ // Keep it perfectly aligned with the container radius/border to match the SVG shape.
+ &:after {
+ border-radius: 28px !important;
+ border: 0 none !important;
+ box-shadow: inset 0 0 0 1px #e9e9e9 !important;
+ box-sizing: border-box;
+ }
+
+ .ant-sender-header {
+ // Remove header spacing so attachment pills align with the 12 px Figma inset.
+ padding: 0 !important;
+ margin: 0 !important;
+ border-bottom: 0 none;
+ }
+
+ .ant-sender-header-content {
+ padding: 0 !important;
+ margin: 0 !important;
+ }
.ant-sender-input {
- font-size: 16px;
+ font-size: 16px !important;
+ line-height: 24px !important;
+ // Remove Ant default padding around the textarea (was 4px in UI).
+ padding: 0 !important;
+ }
+
+ // Grow long inputs up to 340 px, then scroll internally.
+ .ant-sender-input textarea {
+ max-height: 340px !important;
+ overflow-y: auto !important;
+ resize: none !important;
+ padding: 0 !important;
+ background: transparent !important;
+ color: #000 !important;
+
+ // Match placeholder in Figma
+ &::placeholder {
+ color: #999;
+ }
}
.ant-sender-content {
- padding: 20px 24px 16px;
+ // Frame 1597879883: placeholder starts at (x=20,y=16)
+ padding: 16px 20px 0 !important;
}
.ant-sender-footer {
- padding: 0 20px 20px;
+ padding: 0 20px 12px !important;
+ }
+
+ &.agentx-sender-container--single-line {
+ min-height: 56px;
+ position: relative;
+
+ .ant-sender-content {
+ min-height: 56px;
+ padding: 16px 64px 16px 56px !important;
+ box-sizing: border-box;
+ }
+
+ .ant-sender-footer {
+ position: absolute;
+ left: 12px;
+ right: 12px;
+ bottom: 10px;
+ z-index: 1;
+ padding: 0 !important;
+ pointer-events: none;
+ }
+
+ .agentx-sender-footer {
+ margin-left: 0 !important;
+ pointer-events: none;
+ }
+
+ .agentx-sender-footer__left,
+ .agentx-sender-footer__right {
+ pointer-events: auto;
+ }
}
.ant-sender-actions-btn {
- background: #000;
+ // Figma "send": dark gradient + border + inset shadows
+ width: 36px !important;
+ height: 36px !important;
+ border-radius: 18px !important;
+ background: linear-gradient(180deg, #333333 0%, #222222 100%) !important;
+ border: 1px solid #000 !important;
+ box-shadow: inset 0px -1.5px 1px rgba(0, 0, 0, 1), inset 0px 1.5px 1px rgba(255, 255, 255, 0.25) !important;
&:hover {
- background: rgba(0, 0, 0, 0.7);
+ background: linear-gradient(180deg, rgba(51, 51, 51, 0.92) 0%, rgba(34, 34, 34, 0.92) 100%) !important;
}
}
- .ant-sender-actions-btn-disabled {
- background: rgba(0, 0, 0, 0.7);
- color: rgba(255, 255, 255, 0.7);
+ // Ensure icons/text in send button are white (SVG shows white arrow)
+ .agentx-send-btn {
+ color: #fff !important;
+ background: linear-gradient(180deg, #333333 0%, #222222 100%) !important;
+ border: 1px solid #000 !important;
+ box-shadow: inset 0px -1.5px 1px rgba(0, 0, 0, 1), inset 0px 1.5px 1px rgba(255, 255, 255, 0.25) !important;
+ // Avoid any perceived animation when toggling enabled/disabled (AntD buttons add transitions by default).
+ transition: none !important;
&:hover {
- opacity: 0.4;
+ background: linear-gradient(180deg, rgba(51, 51, 51, 0.92) 0%, rgba(34, 34, 34, 0.92) 100%) !important;
+ }
+
+ .ant-btn-icon {
+ color: #fff !important;
+ transition: none !important;
+
+ svg {
+ transition: none !important;
+ }
}
}
- .ant-btn-variant-solid {
- background: #000;
+ // Ensure disabled state is consistent even when using Ant Button directly (e.g. Stop button).
+ .agentx-send-btn:disabled,
+ .agentx-send-btn.ant-btn-disabled {
+ // Disabled state uses the full "grey send" SVG (includes its own background/border/shadow).
+ // Keep the button chrome transparent to avoid double background/border.
+ background: transparent !important;
+ border: 0 none !important;
+ box-shadow: none !important;
+ color: rgba(255, 255, 255, 0.7) !important;
+ padding: 0 !important;
+ transition: none !important;
&:hover {
- background: rgba(0, 0, 0, 0.7);
+ opacity: 1;
+ }
+
+ .ant-btn-icon {
+ // Ensure the SVG can occupy the full 36x36 button area.
+ width: 36px !important;
+ height: 36px !important;
+ line-height: 0 !important;
+ color: rgba(255, 255, 255, 0.7) !important;
+ transition: none !important;
+
+ svg {
+ width: 36px !important;
+ height: 36px !important;
+ display: block;
+ transition: none !important;
+ }
+ }
+ }
+
+ .ant-sender-actions-btn-disabled {
+ background: rgba(227, 227, 227, 0.7) !important;
+ border: 1px solid rgba(207, 207, 207, 0.7) !important;
+ color: rgba(255, 255, 255, 0.7) !important;
+
+ &:hover {
+ opacity: 0.4;
}
}
@@ -51,16 +183,601 @@
}
&:focus-within {
- border-color: #d9d9d9;
- box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
+ border-color: #e9e9e9 !important;
+ // box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.04) !important;
&:after {
border-width: 1px;
+ border-color: #e9e9e9 !important;
+ border-radius: 28px !important;
+ }
+ }
+
+ // Frame 1597879883: left "+" is icon-only without border/background
+ .ant-btn-text.ant-btn-circle {
+ border: 0 none;
+ box-shadow: none;
+ background: transparent;
+
+ &:hover,
+ &:active,
+ &:focus {
+ border: 0 none;
+ box-shadow: none;
+ background: rgba(0, 0, 0, 0.04) !important;
+ }
+ }
+ }
+
+ &.agentx-sender--drag-active {
+ .ant-sender {
+ border-color: #1677ff !important;
+ background: #f5faff !important;
+
+ &:after {
+ box-shadow: inset 0 0 0 1px #1677ff !important;
}
}
}
}
+// Progress bar should sit on top of the input box (not inside it).
+// Reserve space so it doesn't overlap chat content, and inset it so input corners remain visible.
+.agentx-sender-wrap {
+ position: relative;
+ width: 100%;
+}
+
+.agentx-sender-wrap--with-top {
+ padding-top: 56px; // same as top bar height
+}
+
+.agentx-sender-wrap__top-addon {
+ position: absolute;
+ top: 0;
+ left: 28px; // align with input corner radius end
+ right: 28px;
+ z-index: 2;
+}
+
+.agentx-tool-btn {
+ height: 36px;
+ padding: 0 12px;
+ border-radius: 20px;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ background: transparent !important;
+ border: 0 none !important;
+ box-shadow: none !important;
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.85);
+
+ &.agentx-tool-btn--icon-only {
+ // Figma: 44w = 12(left) + 20(icon) + 12(right)
+ width: 44px;
+ padding: 0;
+ justify-content: center;
+ }
+
+ &:hover,
+ &:active,
+ &:focus {
+ border: 0 none !important;
+ box-shadow: none !important;
+ background: rgba(0, 0, 0, 0.04) !important;
+ }
+}
+
+.agentx-ppt-btn {
+ height: 36px;
+ padding: 0 12px;
+ border-radius: 20px;
+ display: inline-flex;
+ align-items: center;
+ gap: 2px;
+ background: #fff !important;
+ border: 1px solid #ededed !important;
+ box-shadow: none !important;
+ font-size: 14px;
+ color: #000 !important;
+
+ &.agentx-ppt-btn--icon-only {
+ width: 36px;
+ padding: 0;
+ justify-content: center;
+ }
+
+ &:hover,
+ &:active,
+ &:focus {
+ border: 1px solid #ededed !important;
+ background: #f5f5f5 !important;
+ color: #000 !important;
+ }
+
+ svg {
+ width: 16px !important;
+ height: 16px !important;
+
+ * {
+ fill: #000 !important;
+ }
+
+ [stroke] {
+ stroke: #000 !important;
+ }
+ }
+
+ .anticon,
+ .ant-btn-icon {
+ font-size: 16px !important;
+ width: 20px !important;
+ height: 20px !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ }
+}
+
+.agentx-ppt-tooltip {
+ max-width: none !important;
+
+ .ant-tooltip-inner {
+ background-color: #000 !important;
+ border-radius: 8px !important;
+ padding: 8px 12px !important;
+ font-size: 12px !important;
+ line-height: 16px !important;
+ color: #fff !important;
+ box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2) !important;
+ width: max-content !important;
+ max-width: none !important;
+ }
+
+ .ant-tooltip-arrow:before {
+ background-color: #000 !important;
+ }
+}
+
+.agentx-selected-scene {
+ border: 0 none !important;
+ box-shadow: none !important;
+ // Figma "Create Picture": text button (no pill background), blue text
+ background: transparent !important;
+ color: #0285ff !important;
+
+ // Make the selected tool icon inherit the same blue as the text.
+ // Some SVGs ship with hardcoded fill/stroke, so we force them to use currentColor here.
+ .agentx-selected-scene__icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ svg {
+ width: 16px;
+ height: 16px;
+ }
+
+ // Prefer fill-only coloring to avoid making icons look "bold".
+ // Only color stroke if the SVG explicitly uses stroke-based paths.
+ svg * {
+ fill: currentColor !important;
+ }
+
+ svg [stroke] {
+ stroke: currentColor !important;
+ }
+ }
+
+ .agentx-selected-scene__close {
+ width: 16px;
+ height: 16px;
+ border-radius: 4px;
+ transition: background 0.2s;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 4px;
+
+ &:hover {
+ background: rgba(2, 133, 255, 0.1);
+ }
+ }
+
+ &:hover,
+ &:active,
+ &:focus {
+ border: 0 none !important;
+ box-shadow: none !important;
+ background: #e6f3ff !important;
+ color: #0285ff !important;
+ }
+}
+
+.agentx-selected-kb-list {
+ display: inline-flex;
+ gap: 4px;
+ flex-wrap: wrap;
+}
+
+.agentx-selected-kb {
+ border: 0 none !important;
+ box-shadow: none !important;
+ // Knowledge base label.
+ background: transparent !important;
+ color: #0285ff !important;
+ border-radius: 18px !important;
+ max-width: 200px;
+ transition: all 0.2s;
+
+ &:hover,
+ &:active,
+ &:focus {
+ border: 0 none !important;
+ box-shadow: none !important;
+ background: #e6f3ff !important;
+ color: #0285ff !important;
+ }
+}
+
+.agentx-selected-kb__close-inner {
+ width: 16px;
+ height: 16px;
+ border-radius: 4px;
+ transition: background 0.2s;
+
+ &:hover {
+ background: rgba(2, 133, 255, 0.1);
+ }
+}
+
+.agentx-selected-kb__icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 16px;
+ height: 16px;
+
+ svg {
+ width: 16px;
+ height: 16px;
+ }
+}
+
+.agentx-selected-kb__text {
+ display: inline-block;
+ max-width: 130px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.agentx-tool-menu {
+ padding: 8px !important;
+ border-radius: 16px !important;
+ box-shadow: 0px 8px 32px 0 rgba(0, 0, 0, 0.12) !important;
+ border: 1px solid rgba(0, 0, 0, 0.06) !important;
+ min-width: 220px;
+
+ // Match Figma option list spacing:
+ // - row gap: 16px
+ // - icon size: 20px
+ // - icon/text gap: 8px
+ .ant-dropdown-menu {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ .ant-dropdown-menu-item {
+ height: 44px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ padding: 0 12px;
+ margin: 0;
+ gap: 8px;
+ }
+
+ .ant-dropdown-menu-item-icon {
+ width: 20px;
+ height: 20px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .ant-dropdown-menu-item:hover {
+ background: rgba(0, 0, 0, 0.04);
+ }
+
+ .ant-dropdown-menu-item-selected {
+ background: #e8f3ff !important;
+ color: #1677ff !important;
+
+ .ant-dropdown-menu-title-content {
+ color: #1677ff !important;
+ }
+ }
+
+ .ant-dropdown-menu-title-content {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ font-size: 14px;
+ line-height: 16px;
+ font-weight: 400;
+ color: #000;
+ }
+
+ svg {
+ width: 20px;
+ height: 20px;
+ flex: 0 0 auto;
+ }
+}
+
+.agentx-quick-actions-popover {
+
+ // Figma (node 27083:41664): radius=16px. Ant Popover has multiple wrappers;
+ // ensure ALL layers clip to the same radius so the visible corners are correct.
+ // NOTE: In our current Ant build, the visible surface is `.ant-popover-container`
+ // (no `.ant-popover-inner` exists). Keep both for compatibility across versions.
+ .ant-popover-container,
+ .ant-popover-inner {
+ // Figma frame (node 27284:2054): 180w with 8px side padding and 7px vertical padding.
+ // Use min-width so long popover content can expand instead of wrapping unnecessarily.
+ min-width: 180px;
+ box-sizing: border-box;
+ border-radius: 16px !important;
+ overflow: hidden; // clip inner content so corners don't look square
+ padding: 7px 8px !important;
+ background: #fff;
+ border: 1px solid #eaeaea;
+ box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.12);
+ }
+
+ .ant-popover-inner-content {
+ border-radius: 16px !important;
+ overflow: hidden;
+ }
+}
+
+.agentx-quick-actions {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ width: 100%;
+}
+
+.agentx-quick-actions-item {
+ width: 100%;
+ height: 36px;
+ padding: 0 8px;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ gap: 8px; // Figma: icon/text gap is 8px
+ border: 0 none;
+ outline: none;
+ background: transparent;
+ color: #000;
+ cursor: pointer;
+ font-size: 14px;
+ line-height: 16px;
+ text-align: left;
+ transition: background 0.2s;
+
+ &:hover:not(:disabled) {
+ background: #f6f6f8;
+ }
+
+ &:disabled {
+ cursor: not-allowed;
+ opacity: 0.45;
+ }
+}
+
+.agentx-quick-actions-divider {
+ height: 1px;
+ width: 100%;
+ background: #eaeaea;
+ margin: 8px 0 10px; // Figma: 8px above and 10px below the divider line
+}
+
+.agentx-quick-actions-icon {
+ width: 20px;
+ height: 20px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: rgba(0, 0, 0, 0.8);
+}
+
+.agentx-model-menu {
+ // Frame 1597880231: container
+ padding: 4px !important;
+ border-radius: 16px !important;
+ border: 1px solid #eaeaea !important;
+ background: #fff !important;
+ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12) !important;
+ // Width is set dynamically (auto-fit longest model name). Keep a safe minimum.
+ min-width: 268px;
+ width: 100%;
+ max-height: 340px;
+ overflow: auto;
+
+ display: flex !important;
+ flex-direction: column !important;
+ gap: 4px !important;
+
+ .ant-dropdown-menu-item {
+ padding: 0 !important; // The label controls its own padding and height.
+ margin: 0 !important;
+ background: transparent !important;
+ }
+
+ .ant-dropdown-menu-item:hover {
+ background: transparent !important;
+ }
+}
+
+.agentx-model-option {
+ height: 52px;
+ padding: 8px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+ transition: background 0.2s;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.03);
+ }
+
+ &.is-selected {
+ background: #f6f6f8;
+
+ &:hover {
+ background: #f6f6f8;
+ }
+ }
+}
+
+.agentx-model-option__text {
+ min-width: 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.agentx-model-option__title {
+ display: flex;
+ align-items: center;
+ min-width: 0;
+ gap: 4px;
+ font-size: 14px;
+ line-height: 16px;
+ font-weight: 500;
+ color: #000;
+}
+
+.agentx-model-option__feature {
+ flex: 0 0 auto;
+}
+
+.agentx-model-option__icon {
+ width: 16px;
+ height: 16px;
+ background: transparent !important;
+ flex: 0 0 auto;
+ object-fit: contain;
+}
+
+.agentx-model-option__icon--text {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ line-height: 16px;
+}
+
+.agentx-model-option__name {
+ min-width: 0;
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.agentx-model-option__desc {
+ font-size: 12px;
+ line-height: 16px;
+ color: #999;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.agentx-model-option__check {
+ width: 20px;
+ height: 20px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
+
+ img {
+ width: 16px;
+ height: 16px;
+ display: block;
+ }
+}
+
+.agentx-model-trigger {
+ height: 36px;
+ padding: 0 12px;
+ border-radius: 20px;
+ background: transparent;
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ user-select: none;
+ cursor: pointer;
+ width: fit-content;
+ transition: all 0.2s;
+
+ &:hover:not(.is-disabled) {
+ background: #f0f0f2;
+ }
+}
+
+.agentx-model-trigger__content {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.agentx-model-trigger__icon {
+ width: 16px;
+ height: 16px;
+ flex: 0 0 auto;
+ object-fit: contain;
+}
+
+.agentx-model-trigger__icon--text {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ line-height: 16px;
+}
+
+.agentx-model-trigger__name {
+ font-size: 14px;
+ line-height: 16px;
+ font-weight: 500;
+ color: #000;
+ white-space: nowrap;
+}
+
+.agentx-model-trigger__caret {
+ width: 9px;
+ height: 5px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.agentx-model-trigger__empty-icon {
+ font-size: 18px;
+ opacity: 0.45;
+}
+
.agentx-mcp {
.ant-tabs {
.ant-tabs-tab {
@@ -68,11 +785,120 @@
}
}
- .ant-tabs-top > .ant-tabs-nav {
+ .ant-tabs-top>.ant-tabs-nav {
margin: 0;
}
- .ant-tabs-top > .ant-tabs-nav::before {
+ .ant-tabs-top>.ant-tabs-nav::before {
border-bottom: none;
}
}
+
+.agentx-file-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ padding: 12px 12px 0;
+}
+
+.agentx-file-item {
+ position: relative;
+
+ .agentx-file-close {
+ position: absolute;
+ top: 6px;
+ right: 6px;
+ width: 16px;
+ height: 16px;
+ background: #000;
+ color: #fff;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ z-index: 10;
+ transition: opacity 0.2s;
+ font-size: 10px;
+
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+}
+
+.agentx-file-thumbnail {
+ position: relative;
+ width: 56px;
+ height: 56px;
+ border-radius: 16px;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
+
+.agentx-file-card {
+ width: 272px;
+ height: 56px;
+ border-radius: 16px;
+ border: 1px solid #eaeaea;
+ background: #fff;
+ display: flex;
+ align-items: center;
+ padding: 11px;
+ gap: 8px;
+
+ .agentx-file-icon {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+
+ svg {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .agentx-file-info {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .agentx-file-name {
+ font-size: 14px;
+ line-height: 1.4;
+ color: #000;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .agentx-file-size {
+ font-size: 10px;
+ line-height: 12px;
+ color: rgba(0, 0, 0, 0.3);
+ }
+ }
+}
+
+
+.agentx-replay-button {
+ border: 1px solid #000 !important;
+ background: linear-gradient(180deg, #333 0%, #222 100%) !important;
+ box-shadow: 0 -1.5px 1px 0 #000 inset, 0 1.5px 1px 0 rgba(255, 255, 255, 0.25) inset !important;
+
+ &:hover {
+ background: linear-gradient(180deg, rgba(51, 51, 51, 0.92) 0%, rgba(34, 34, 34, 0.92) 100%) !important;
+ border: 1px solid #000 !important;
+ box-shadow: 0 -1.5px 1px 0 #000 inset, 0 1.5px 1px 0 rgba(255, 255, 255, 0.25) inset !important;
+ }
+}
diff --git a/web/src/components/Agent/Chatbot/Sender/index.tsx b/web/src/components/Agent/Chatbot/Sender/index.tsx
index 9d95e1b..73928c7 100644
--- a/web/src/components/Agent/Chatbot/Sender/index.tsx
+++ b/web/src/components/Agent/Chatbot/Sender/index.tsx
@@ -5,11 +5,31 @@ import ReplaySender from './ReplaySender';
import { AgentMode } from '@/types';
import './index.less';
-const SenderContainer: React.FC = () => {
+const SenderContainer: React.FC<{
+ basePath?: string;
+ agentId?: string;
+ sessionId?: string;
+ menuItems?: {
+ key: string;
+ label: string;
+ icon?: React.ReactNode;
+ }[];
+ showSenderActions?: boolean;
+ topAddon?: React.ReactNode;
+}> = ({ basePath, agentId, sessionId, menuItems, showSenderActions = false, topAddon }) => {
const { mode } = useAgentStore();
if (mode === AgentMode.Chatbot) {
- return ,
+): Record => {
+ return options.reduce>((acc, config) => {
+ const value = values[config.field];
+ if (typeof value === 'string' && value.length > 0) {
+ acc[config.field] = value;
+ }
+ return acc;
+ }, {});
+};
+
+export const normalizeSenderOptionValues = (
+ options: SenderOptionConfig[],
+ values: Record,
+): Record => {
+ const nextValues = { ...values };
+ const validFields = new Set();
+
+ options.forEach((config) => {
+ validFields.add(config.field);
+ const currentValue = nextValues[config.field];
+ const isValidCurrentValue = config.options.some((option) => option.value === currentValue);
+
+ if (!isValidCurrentValue) {
+ const defaultValue = getDefaultSelectValue(config);
+ if (defaultValue) {
+ nextValues[config.field] = defaultValue;
+ } else {
+ delete nextValues[config.field];
+ }
+ }
+ });
+
+ Object.keys(nextValues).forEach((field) => {
+ if (!validFields.has(field)) {
+ delete nextValues[field];
+ }
+ });
+
+ return nextValues;
+};
diff --git a/web/src/components/Agent/Chatbot/StartScreen.tsx b/web/src/components/Agent/Chatbot/StartScreen.tsx
new file mode 100644
index 0000000..f60f531
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/StartScreen.tsx
@@ -0,0 +1,55 @@
+import { useTranslation } from '@/hooks/useTranslation';
+import EnterIcon from '@/assets/svg/startscreen/enter.svg?react';
+import classNames from 'classnames';
+import React from 'react';
+
+export interface StartScreenProps {
+ greeting?: string | React.ReactNode;
+ prompts?: string[];
+ onPromptClick?: (prompt: string) => void;
+ disabled?: boolean;
+}
+
+const StartScreen: React.FC = (props) => {
+ const { t } = useTranslation();
+ const greeting = props.greeting !== undefined ? props.greeting : t('agent.default.greeting');
+ const prompts = props.prompts;
+ const onPromptClick = props.onPromptClick;
+ const disabled = props.disabled !== undefined ? props.disabled : false;
+
+ const handleClick = (prompt: string) => {
+ if (disabled) return;
+ onPromptClick?.(prompt);
+ };
+
+ return (
+ = ({ message, hasUserInput, className }) => {
+ const { setPipelineTargetMessage, layoutConfig, disableWorkspaceRendering } = useAgentStore();
+ const narrowMode = layoutConfig.narrowMode;
+
+ const [collapsed, setCollapsed] = useState(true);
+
+ if (message.type === 'plan' && !(message as MessagePlanChunk)?.children?.length) {
+ return null;
+ }
+
+ const isRunning = message.detail?.status === 'running' || message.detail?.status === 'pending';
+ const shouldRenderWhilePending = shouldRenderToolDetailWhilePending(message);
+
+ if (!narrowMode && disableWorkspaceRendering) {
+ return (
+ setPipelineTargetMessage(message)} active={isRunning} className={className}>
+
+ );
+ }
+
+ // embed Show detailed results of tools in mode
+ const DetailRenderer = registry.getDetailRenderer(message.type);
+
+ return (
+
{
+ const MockComponent = () => null;
+ return {
+ Radio: { Group: MockComponent },
+ Bubble: MockComponent,
+ Sender: MockComponent,
+ Button: MockComponent,
+ Input: MockComponent,
+ Tooltip: MockComponent,
+ };
+});
+vi.mock("@ant-design/icons", () => ({}));
+vi.mock("@ant-design/x", () => ({
+ Bubble: () => null,
+}));
+vi.mock("react-scroll-to-bottom", () => ({ default: () => null }));
+vi.mock("@/components/Infra", () => ({
+ Markdown: () => null,
+ Loading: () => null,
+}));
+vi.mock("@/components/Infra/Loading", () => ({ default: () => null }));
+vi.mock("@/registry/common/MessageBrief", () => ({ default: () => null }));
+vi.mock("../ToolRender", () => ({ default: () => null }));
+vi.mock("../Workspace/TaskProgress", () => ({ default: () => null }));
+vi.mock("../AgentHeader", () => ({ default: () => null }));
+vi.mock("../Chatbot/StartScreen", () => ({ default: () => null }));
+vi.mock("../Chatbot/PreviewScreen", () => ({ default: () => null }));
+vi.mock("@/registry/website_delivery/WebsiteDeliveryEndWindow", () => ({ default: () => null }));
+vi.mock("@/components/Agent/Chatbot/Sender", () => ({ default: () => null }));
+vi.mock("@/components/Agent/Chatbot/MessageAttachments", () => ({ default: () => null }));
+vi.mock("@/registry/website_delivery", () => ({
+ findCompletedWebsiteDelivery: () => undefined,
+ isWebsiteDeliveryMessage: () => false,
+ isWebsitePreviewMessage: () => false,
+ isWebsiteType: () => false,
+}));
+vi.mock("@/hooks/useTranslation", () => ({ useTranslation: () => ({ t: (k: string) => k }) }));
+vi.mock("@/store", () => ({ useAgentStore: () => ({}) }));
+
+import { getTraceUrl } from "../index";
+import * as utils from "@/utils";
+
+// Mock isDevOrTest from utils
+vi.mock("@/utils", async (importOriginal) => {
+ const original = await importOriginal();
+ return {
+ ...original,
+ isDevOrTest: vi.fn(),
+ };
+});
+
+describe("getTraceUrl", () => {
+ beforeEach(() => {
+ vi.resetAllMocks();
+ });
+
+ it("should return undefined if traceId is missing or empty", () => {
+ expect(getTraceUrl()).toBeUndefined();
+ expect(getTraceUrl(null)).toBeUndefined();
+ expect(getTraceUrl("")).toBeUndefined();
+ });
+
+ it("should generate BOE trace URL when in development/test", () => {
+ vi.mocked(utils.isDevOrTest).mockReturnValue(true);
+
+ const traceId = "test-trace-id-123";
+ const result = getTraceUrl(traceId);
+
+ const expectedTargetPath = `/project/cmpb1czn80005zi07nicibopt/traces/${traceId}`;
+ const expectedUrl = `https://langfuse.lingyiwanwu.net${expectedTargetPath}`;
+
+ expect(result).toBe(expectedUrl);
+ });
+
+ it("should generate production trace URL when not in development/test", () => {
+ vi.mocked(utils.isDevOrTest).mockReturnValue(false);
+
+ const traceId = "prod-trace-id-789";
+ const result = getTraceUrl(traceId);
+
+ const expectedTargetPath = `/project/cmpp7aas7000618077kps0pgo/traces/${traceId}`;
+ const expectedUrl = `https://trace.wanzhi.com${expectedTargetPath}`;
+
+ expect(result).toBe(expectedUrl);
+ });
+
+ it("should encode trace ids in direct URLs", () => {
+ vi.mocked(utils.isDevOrTest).mockReturnValue(true);
+
+ expect(getTraceUrl("trace/with spaces")).toBe(
+ "https://langfuse.lingyiwanwu.net/project/cmpb1czn80005zi07nicibopt/traces/trace%2Fwith%20spaces",
+ );
+ });
+});
diff --git a/web/src/components/Agent/Chatbot/index.tsx b/web/src/components/Agent/Chatbot/index.tsx
index dee5791..220b29a 100644
--- a/web/src/components/Agent/Chatbot/index.tsx
+++ b/web/src/components/Agent/Chatbot/index.tsx
@@ -1,212 +1,383 @@
-import React, { Fragment, useEffect, useRef } from 'react';
-import { Button, Flex, Layout, Typography, message as antdMessage } from 'antd';
-import { CopyOutlined, LinkOutlined, EyeOutlined, ExportOutlined } from '@ant-design/icons';
-import { Bubble, Actions } from '@ant-design/x';
-import { useAgentStore } from '@/store';
+import React, { Fragment, isValidElement, useCallback, useEffect, useRef } from 'react';
+import { CopyOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import { useAgentStore, useAgentStoreApi } from '@/store';
import Sender from '@/components/Agent/Chatbot/Sender';
import MessageAttachments from '@/components/Agent/Chatbot/MessageAttachments';
-import ClickableTool from '@/components/Agent/Chatbot/ClickableTool';
-import { AgentMode, MessageToolChunk } from '@/types';
-import ZoomIn from '@/assets/png/zoom-in.png';
-import Back from '@/assets/png/back.png';
-import { isFinishChunk, isToolMessage } from '@/hooks/useChat/utils';
-import footerBgUrl from '@/assets/png/footer-bg.png';
+import MessageMetadataRenderer from '@/components/Agent/Chatbot/MessageMetadataRenderer';
+import { resolveMessageMetadata } from '@/utils/messageMetadata';
+import { AgentMode, type HeaderNode, type MessageToolChunk } from '@/types';
+import { isToolMessage } from '@/hooks/useChat/utils';
import classNames from 'classnames';
-import { useTranslation } from '@/hooks/useTranslation';
import ScrollToBottom from 'react-scroll-to-bottom';
import { Markdown } from '@/components/Infra';
import MessageBrief from '@/registry/common/MessageBrief';
import Loading from '@/components/Infra/Loading';
+import ToolRender from './ToolRender';
+import TaskProgress from '../Workspace/TaskProgress';
+import StartScreen, { StartScreenProps } from './StartScreen';
+import PreviewScreen, { PreviewScreenProps } from './PreviewScreen';
+import AgentHeader from '../AgentHeader';
+import WebsiteDeliveryEndWindow from '@/registry/website_delivery/WebsiteDeliveryEndWindow';
+import { useTranslation } from '@/hooks/useTranslation';
+import { findCompletedWebsiteDelivery } from '@/registry/website_delivery';
+import { isDevOrTest } from '@/utils';
+import eventBus from '@/utils/eventBus';
+import { formatJsonUserMessageWithNearestForm } from '@/utils/formSubmissionDisplay';
+import { WelcomeScreenContext } from '@/types/agentx';
-const Chatbot = ({ shareButtonNode }: { shareButtonNode?: React.ReactNode }) => {
- const { Header } = Layout;
- const { Title, Text } = Typography;
- const { t } = useTranslation();
+export const getTraceUrl = (traceId?: string | null) => {
+ if (!traceId) {
+ return undefined;
+ }
+
+ const isBoe = isDevOrTest();
+ const projectId = isBoe ? 'cmpb1czn80005zi07nicibopt' : 'cmpp7aas7000618077kps0pgo';
+ const baseUrl = isBoe ? 'https://langfuse.lingyiwanwu.net' : 'https://trace.wanzhi.com';
+
+ const targetPath = `/project/${projectId}/traces/${encodeURIComponent(traceId)}`;
+ return `${baseUrl}${targetPath}`;
+};
+const Chatbot = ({
+ basePath,
+ agentId,
+ sessionId,
+ shareButtonNode,
+ backButtonNode,
+ welcomeScreen,
+ startScreen,
+ previewScreen,
+ menuItems,
+ showSenderActions = false,
+ headerNode,
+ className,
+}: {
+ basePath?: string;
+ agentId?: string;
+ sessionId?: string;
+ shareButtonNode?: React.ReactNode;
+ backButtonNode?: React.ReactNode;
+ welcomeScreen?: React.ReactNode | ((context: WelcomeScreenContext) => React.ReactNode);
+ startScreen?: StartScreenProps;
+ previewScreen?: PreviewScreenProps;
+ menuItems?: {
+ key: string;
+ label: string;
+ icon?: React.ReactNode;
+ }[];
+ showSenderActions?: boolean;
+ headerNode?: HeaderNode;
+ className?: string;
+}) => {
const {
mode,
- sessionInfo,
pipelineMessages,
- taskStage,
workspaceVisible,
setWorkspaceVisible,
- setPipelineTargetMessage,
workspaceMessages,
+ taskPlan,
+ fileViewerMaximized,
+ previewConfig,
+ rightPanelExternalControl,
+ setLastWorkspaceAction,
+ fileViewerFile,
+ autoOpenRightPanel,
+ disableWorkspaceRendering,
+ layoutConfig,
+ instanceId,
+ senderConfig,
+ renderMessageMetadata,
} = useAgentStore();
+ const { t } = useTranslation();
- const handleWorkspaceOpen = () => {
- setWorkspaceVisible(true);
- };
+ // useAgentStore always wraps the return value in { ...state, getState, setState },
+ // so selectors that return primitive falsy values will evaluate to truthy (!!{}).
+ // Read senderConfig as an object from the no-selector call above instead.
+ const disabled = !!(senderConfig?.inputDisabled || senderConfig?.sendDisabled);
+ const storeApi = useAgentStoreApi();
- // auto open workspace function
+ const send = useCallback(
+ (prompt: string) => {
+ if (disabled) return;
+ const { senderMetadata, setSenderMetadata } = storeApi.getState();
+ eventBus.emit(`call_send_${instanceId}`, {
+ content: prompt,
+ ...(senderMetadata !== undefined && { metadata: senderMetadata }),
+ });
+ setSenderMetadata(undefined);
+ },
+ [disabled, instanceId, storeApi],
+ );
+
+ const appendText = useCallback(
+ (text: string) => {
+ const { senderContent, setSenderContent } = storeApi.getState();
+ setSenderContent(senderContent + text);
+ },
+ [storeApi],
+ );
+
+ // Auto Open workspace Functions
const autoOpenRef = useRef(false);
+ const prevMessagesLengthRef = useRef(0);
+
useEffect(() => {
- // only auto open once
- if (workspaceMessages?.length > 0 && !workspaceVisible && !autoOpenRef.current) {
- setWorkspaceVisible(true);
- autoOpenRef.current = true;
+ if (!autoOpenRightPanel || disableWorkspaceRendering) {
+ return;
+ }
+ // New detected workspace message（Number from 0 And become 1+）
+ const hasNewMessages = workspaceMessages?.length > 0 && prevMessagesLengthRef.current === 0;
+
+ // Update Reference
+ prevMessagesLengthRef.current = workspaceMessages?.length || 0;
+
+ // If there's no new information, don't process it.
+ if (!hasNewMessages) {
+ return;
+ }
+
+ // If external control is clearly closed, it is not automatically opened (respect for external intent)
+ if (rightPanelExternalControl && previewConfig?.rightPanelVisible === false) {
+ console.log('[Chatbot Auto Open] Externally controlled and explicitly closed, not automatically open');
+ return;
+ }
+
+ // If fileViewer Opened, not automatically workspace（(c) Avoiding conflict)
+ if (fileViewerFile) {
+ console.log('[Chatbot Auto Open] fileViewer Opened, not automatically workspace');
+ return;
+ }
+
+ // If workspace Opened, not processed
+ if (workspaceVisible) {
+ console.log('[Chatbot Auto Open] workspace Opened, no automatic opening required');
+ return;
}
- }, [setWorkspaceVisible, workspaceMessages?.length, workspaceVisible]);
- // remove the original scroll logic, use ScrollToBottom component
+ console.log('[Chatbot Auto Open] Auto Open workspace', {
+ workspaceMessages: workspaceMessages?.length,
+ workspaceVisible,
+ fileViewerFile: !!fileViewerFile,
+ });
+
+ // Record trigger source and update status
+ setLastWorkspaceAction('auto');
+ setWorkspaceVisible(true);
+ }, [
+ setWorkspaceVisible,
+ setLastWorkspaceAction,
+ workspaceMessages?.length,
+ workspaceVisible,
+ previewConfig?.rightPanelVisible,
+ rightPanelExternalControl,
+ fileViewerFile,
+ autoOpenRightPanel,
+ disableWorkspaceRendering,
+ ]);
+
+ const renderMessages = () => {
+ return pipelineMessages.map((message, messageIndex) => {
+ if (message.role === 'user') {
+ return message.messages.map((msg, msgIndex) => {
+ const displayContent = formatJsonUserMessageWithNearestForm(
+ msg.content,
+ pipelineMessages,
+ msg,
+ messageIndex,
+ t,
+ );
+ const displayMessage = displayContent === msg.content ? msg : { ...msg, content: displayContent };
+
+ return (
+
+ {messagesWithoutFinishReason.map((msg, idx) => {
+ if (isToolMessage(msg as MessageToolChunk)) {
+ return (
+
+
+ );
+ }
+ return (
+
+
+ );
+ })}
+ {!layoutConfig.narrowMode && turnWebsiteDelivery && (
+
+ }
+ />
+ );
+ }
+ });
+ };
+
+ // Remove the original scroll logic, use ScrollToBottom Component
return (
- {fileUploadConfig.customUploadRequest && (
- 0 && !headerOpen}>
- = fileUploadConfig.maxCount}
- onStart={handleFileStartUpload}
- onFinish={handleFileFinishUpload}
- />
-
- )}
-
-
+ {topAddon ?
);
};
diff --git a/web/src/components/Agent/Chatbot/Sender/DisabledSender.tsx b/web/src/components/Agent/Chatbot/Sender/DisabledSender.tsx
new file mode 100644
index 0000000..9e95684
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/DisabledSender.tsx
@@ -0,0 +1,57 @@
+import { Button, ConfigProvider } from 'antd';
+import React from 'react';
+import NewChatIcon from '@/assets/svg/sender/new-chat.svg?react';
+import { useTranslation } from '@/hooks/useTranslation';
+
+interface DisabledSenderProps {
+ onNewChat: () => void;
+}
+
+const DisabledSender = ({ onNewChat }: DisabledSenderProps) => {
+ const { t } = useTranslation();
+
+ return (
+ {topAddon}
: null}
+ {senderMetadata ? (
+
+
+ ) : null}
+
+ {
+ const files = event.target.files;
+ if (files && files.length > 0) {
+ handlePaste(files);
+ }
+ event.target.value = '';
+ }}
+ />
+
+ {skills.length > 0 ? (
+
+ items={(info) => {
+ const search = info?.search ?? '';
+ const matched = skills
+ .filter(
+ (s) =>
+ !search ||
+ String(s.label ?? s.value)
+ .toLowerCase()
+ .includes(search.toLowerCase()) ||
+ s.value.toLowerCase().includes(search.toLowerCase()),
+ )
+ .map((s) => ({ value: s.value, label: s.label ?? s.value, icon: s.icon }));
+ if (matched.length === 0) {
+ return [{ value: '__not_found__', label: t('sender.skills.notFound'), disabled: true }];
+ }
+ return matched;
+ }}
+ onSelect={handleSkillSelect}
+ block
+ >
+ {({ onTrigger, onKeyDown }) => {
+ skillTriggerRef.current = onTrigger;
+ return renderSender({ onKeyDown });
+ }}
+
+ ) : (
+ renderSender()
+ )}
+
+
+ } onClick={onNewChat}>
+ {t('sender.disabled.new_chat')}
+
+
+
+ );
+};
+
+export default DisabledSender;
diff --git a/web/src/components/Agent/Chatbot/Sender/ReplaySender.tsx b/web/src/components/Agent/Chatbot/Sender/ReplaySender.tsx
index 74c9cda..da4cd2f 100644
--- a/web/src/components/Agent/Chatbot/Sender/ReplaySender.tsx
+++ b/web/src/components/Agent/Chatbot/Sender/ReplaySender.tsx
@@ -1,9 +1,11 @@
-import { CaretRightOutlined, StepForwardOutlined } from '@ant-design/icons';
-import { Button, Space } from 'antd';
+import { StepForwardOutlined } from '@ant-design/icons';
+import { Button, ConfigProvider, Space } from 'antd';
import React, { useCallback } from 'react';
import { useTranslation } from '@/hooks/useTranslation';
import { useAgentStore } from '@/store';
import useReplay from '@/hooks/useReplay';
+import RestartIcon from '@/assets/svg/sender/restart.svg?react';
+import './index.less';
const SenderContainer: React.FC = () => {
const { shareId, sharePassword } = useAgentStore();
@@ -11,45 +13,77 @@ const SenderContainer: React.FC = () => {
const { isPlaying, start, end, loaded } = useReplay(shareId.slice(2), shareId.startsWith('e-'), sharePassword);
- // handle jump to end
+ // Process to End
const handleJumpToEnd = useCallback(() => {
end();
}, [end]);
- // handle restart from the beginning
+ // Start processing the head start
const handleRestart = useCallback(() => {
start();
}, [start]);
return (
-
+
+ {t('sender.disabled.message')}
+
-
+ }
+ >
+
+ = ({ mode, source, onSetMode, onSetSource }) => {
+ const { t } = useTranslation();
+ const content = useMemo(() => {
+ const createSourceIcon = (letter: string) => (
+ = ({ fileList, onRemove }) => {
- return (
-
+ {showUpload && (
+
+ {t('sender.quick_actions.upload_tooltip_line1')}
+ {t('sender.quick_actions.upload_tooltip_line2')}
+
+ }
+ overlayClassName="agentx-ppt-tooltip"
+ overlayStyle={{ maxWidth: 'none' }}
+ placement="top"
+ arrow={{ pointAtCenter: true }}
+ >
+
+
+
+
+ )}
+ {showUpload && showKnowledgeBase && }
+ {showKnowledgeBase && (
+
+ )}
+
+
- {isPlaying ? (
- }
- onClick={handleJumpToEnd}
- disabled={!loaded}
- >
- {t('sender.replay.end')}
-
- ) : (
- }
- onClick={handleRestart}
- disabled={!loaded}
- >
- {t('sender.replay.restart')}
-
- )}
+
+ {isPlaying ? (
+ }
+ onClick={handleJumpToEnd}
+ className="agentx-replay-button"
+ >
+ {t('sender.replay.end')}
+
+ ) : (
+ }
+ onClick={handleRestart}
+ className="agentx-replay-button"
+ >
+ {t('sender.replay.restart')}
+
+ )}
+
);
diff --git a/web/src/components/Agent/Chatbot/Sender/components/DeepResearchFooter.tsx b/web/src/components/Agent/Chatbot/Sender/components/DeepResearchFooter.tsx
new file mode 100644
index 0000000..add6f54
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/components/DeepResearchFooter.tsx
@@ -0,0 +1,79 @@
+import React, { useMemo } from 'react';
+import { Dropdown } from 'antd';
+import { CheckOutlined, DownOutlined } from '@ant-design/icons';
+import { SearchIcon } from 'lucide-react';
+import { useTranslation } from '@/hooks/useTranslation';
+
+interface DeepResearchFooterProps {
+ mode: 'google_api' | 'self_configured';
+ source: string;
+ onSetMode: (mode: 'google_api' | 'self_configured') => void;
+ onSetSource: (source: string) => void;
+}
+
+const DeepResearchFooter: React.FC
{isPlaying ? t('task.replay.replaying') : loaded ? t('task.replay.finished') : ''}
+ {letter}
+
+ );
+
+ const sources = [
+ { key: 'serp', label: 'Google', icon: createSourceIcon('G') },
+ { key: 'bocha', label: 'Bocha', icon: createSourceIcon('B') },
+ { key: 'tavily', label: 'Tavily', icon: createSourceIcon('T') },
+ ];
+ const currentSource = sources.find((item) => item.key === source);
+
+ const menu = {
+ items: sources.map((item) => ({
+ key: item.key,
+ label: (
+
+
+ ),
+ onClick: () => onSetSource(item.key),
+ })),
+ };
+
+ const buttonBaseClass =
+ 'flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-all duration-200 border rounded-2xl';
+ const activeClass = 'bg-white text-[#0285ff] border-[#0285ff]';
+ const inactiveClass = 'bg-white text-gray-700 border-gray-200 hover:border-[#0285ff] hover:text-[#0285ff]';
+
+ return (
+
+ {item.icon}
+ {item.label}
+
+ {source === item.key &&
+
+
+
+
+
+ );
+ }, [mode, source, onSetMode, onSetSource, t]);
+
+ return content;
+};
+
+export default DeepResearchFooter;
diff --git a/web/src/components/Agent/Chatbot/Sender/components/FileList.tsx b/web/src/components/Agent/Chatbot/Sender/components/FileList.tsx
index 5c9aaef..9644d1e 100644
--- a/web/src/components/Agent/Chatbot/Sender/components/FileList.tsx
+++ b/web/src/components/Agent/Chatbot/Sender/components/FileList.tsx
@@ -1,34 +1,87 @@
-import { Attachments } from '@ant-design/x';
import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import type { FileItem } from '@/types';
+import { getFileIcon } from '@/utils/file';
interface FileListProps {
fileList: FileItem[];
onRemove: (uid: string) => void;
}
-const FileList: React.FC
- {fileList?.map((item, index) => (
- {
+ if (item) {
+ setSelectedKeys([...selectedKeys, item.agent_tool_id]);
+ setDisplayMCPItems((pre) => pre.map((preItem) => (preItem.id === item.id ? item : preItem)));
+ }
+ setCurrentMcp(null);
+ }}
+ />
+ )}
+
+ );
+};
+export default MCPToolModal;
diff --git a/web/src/components/Agent/Chatbot/Sender/components/ModelSelector.tsx b/web/src/components/Agent/Chatbot/Sender/components/ModelSelector.tsx
new file mode 100644
index 0000000..8efc1dd
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/components/ModelSelector.tsx
@@ -0,0 +1,279 @@
+import React, { useMemo } from 'react';
+import { Dropdown } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import type { ModelItem } from '@/types';
+import { getLanguage, useTranslation } from '@/hooks/useTranslation';
+import downArrowImg from '@/assets/svg/sender/down-arrow.svg';
+import selectedImg from '@/assets/svg/sender/selected.svg';
+
+const isImageUrl = (url?: string) => url?.startsWith('http') || url?.startsWith('data:');
+const DEFAULT_MENU_WIDTH = 268;
+const MAX_MENU_WIDTH = 520;
+
+const measureTextWidth = (text: string, font: string) => {
+ // In SSR / tests, document may be unavailable.
+ if (typeof document === 'undefined') return text.length * 8;
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return text.length * 8;
+ ctx.font = font;
+ return ctx.measureText(text).width;
+};
+
+const truncateToWidth = (text: string, maxWidthPx: number, font: string) => {
+ if (!text) return '';
+ if (maxWidthPx <= 0) return '…';
+ if (measureTextWidth(text, font) <= maxWidthPx) return text;
+
+ const ellipsis = '…';
+ const ellipsisW = measureTextWidth(ellipsis, font);
+ const target = Math.max(0, maxWidthPx - ellipsisW);
+
+ // Binary search longest prefix that fits.
+ let lo = 0;
+ let hi = text.length;
+ while (lo < hi) {
+ const mid = Math.ceil((lo + hi) / 2);
+ const candidate = text.slice(0, mid);
+ if (measureTextWidth(candidate, font) <= target) {
+ lo = mid;
+ } else {
+ hi = mid - 1;
+ }
+ }
+ return `${text.slice(0, lo)}${ellipsis}`;
+};
+
+interface ModelSelectorProps {
+ models?: ModelItem[];
+ selectedModels?: ModelItem[];
+ onModelSelect: (modelId: string) => void;
+ disabled?: boolean;
+ className?: string;
+}
+
+const getFeatureText = (model?: ModelItem) => {
+ const lang = getLanguage();
+ // It says it's system data.
+ if (model?.ext?.feature_en) {
+ // Prefer to user-set languages
+ if (model?.ext?.[`feature_${lang}`]) {
+ return model?.ext?.[`feature_${lang}`];
+ }
+ // In Chinese, usefeature
+ if (lang === 'zh') {
+ return model?.ext?.feature;
+ }
+ // If no user language is available, use English as afallback
+ return model?.ext?.feature_en;
+ }
+ // User created data
+ return model?.ext?.feature;
+};
+const getDescText = (model?: ModelItem) => {
+ const lang = getLanguage();
+ // It says it's system data.
+ if (model?.ext?.desc_en) {
+ // Prefer to user-set languages
+ if (model?.ext?.[`desc_${lang}`]) {
+ return model?.ext?.[`desc_${lang}`];
+ }
+ // In Chinese, usedesc
+ if (lang === 'zh') {
+ return model?.ext?.desc;
+ }
+ // If no user language is available, use English as afallback
+ return model?.ext?.desc_en;
+ }
+ // User created data
+ return model?.ext?.desc;
+};
+
+const ModelSelector: React.FC = ({
+ models,
+ selectedModels = [],
+ onModelSelect,
+ disabled = false,
+ className = '',
+}) => {
+ const { t } = useTranslation();
+ const currentModel = useMemo(() => selectedModels?.[0], [selectedModels]);
+ const currentModelId = currentModel?.id || '';
+ const hasSelection = !!currentModel;
+
+ const menuWidth = useMemo(() => {
+ if (!models?.length) return DEFAULT_MENU_WIDTH;
+
+ // Match menu title font in Figma (14px, medium)
+ const font = `500 14px PingFang SC, PingFangSC-Medium, -apple-system, system-ui, sans-serif`;
+ const gap = 4; // from .agentx-model-option__title gap
+ const iconW = 16;
+ const checkW = 20;
+ const optionPaddingX = 16; // 8 left + 8 right
+ const menuPaddingAndBorder = 12; // menu padding/border safety
+ const scrollbarSafety = 12;
+
+ let max = DEFAULT_MENU_WIDTH;
+
+ for (const m of models) {
+ const featureText = getFeatureText(m);
+ const featureDisplayText = featureText;
+ const titleText = `${featureDisplayText ? `${featureDisplayText}·` : ''}${m.model_display_name || ''}`;
+ const textW = measureTextWidth(titleText, font);
+
+ // Children: [feature?] [icon] [name]
+ const gapCount = featureDisplayText ? 2 : 1;
+ const titleRowW = textW + iconW + gapCount * gap;
+ const optionMinW = optionPaddingX + titleRowW + checkW + menuPaddingAndBorder + scrollbarSafety;
+
+ max = Math.max(max, Math.ceil(optionMinW));
+ }
+
+ // Avoid going beyond viewport
+ const viewportMax =
+ typeof window !== 'undefined' ? Math.max(DEFAULT_MENU_WIDTH, window.innerWidth - 40) : MAX_MENU_WIDTH;
+ return Math.min(max, MAX_MENU_WIDTH, viewportMax);
+ }, [models]);
+
+ // --- 1. Build the Dropdown Menu Item (Signure) Figma: Frame 1597880231 / node 27101:36176） ---
+ const menuItems = useMemo(() => {
+ if (!models || models.length === 0) return [];
+
+ // Match menu desc font in Figma (12px, regular, #999)
+ const descFont = `400 12px PingFang SC, PingFangSC-Regular, -apple-system, system-ui, sans-serif`;
+ // Available width for description line: menu width minus option padding and check icon.
+ // (The description does not include the left 16px avatar, but shares the same text container
+ // which is laid out with space reserved for the checkmark on the right.)
+ const optionPaddingX = 16; // 8 left + 8 right
+ const checkW = 20;
+ const safety = 12; // extra buffer for scrollbar/rounding
+ const descMaxWidthPx = Math.max(80, menuWidth - optionPaddingX - checkW - safety);
+
+ const itemRender = (item: any) => {
+ const isSelected = item.id === currentModelId;
+ const featureText = getFeatureText(item);
+ const featureDisplayText = featureText;
+ const descText = getDescText(item);
+ // The text is cut by the width of the menu.hover It's possible. title View full content)(Discarded, changed.cssAchievedline-clamp)
+ // const descDisplayText = descText ? truncateToWidth(descText, descMaxWidthPx, descFont) : '';
+ const descDisplayText = descText;
+ return {
+ key: item.id,
+ label: (
+ {
+ onModelSelect(key as string);
+ },
+ className: 'agentx-model-menu',
+ }}
+ trigger={['click']}
+ placement="bottomLeft"
+ disabled={disabled}
+ // overlayStyle={{ width: menuWidth }}
+ arrow={false}
+ styles={{
+ item: {
+ width: menuWidth - 16
+ }
+ }}
+ >
+ {renderTrigger()}
+
+ );
+};
+
+export default ModelSelector;
diff --git a/web/src/components/Agent/Chatbot/Sender/components/SenderFooter.tsx b/web/src/components/Agent/Chatbot/Sender/components/SenderFooter.tsx
new file mode 100644
index 0000000..44efc76
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/components/SenderFooter.tsx
@@ -0,0 +1,309 @@
+import React from 'react';
+import { Button, Dropdown, Tooltip } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import type { FileItem, ModelItem, SenderOptionConfig } from '@/types';
+import { useTranslation } from '@/hooks/useTranslation';
+import ToolIcon from '@/assets/svg/labels/tool.svg?react';
+import KnowledgeBaseIcon from '@/assets/svg/labels/select-knowledge-base.svg?react';
+import SendIcon from '@/assets/svg/sender/sender-icon.svg?react';
+import GreySendIcon from '@/assets/svg/sender/grey-send.svg?react';
+import { saveSelectedModel } from '@/utils/modelStorage';
+import FileUpload from './FileUpload';
+import KnowledgeBaseModal from './KnowledgeBaseModal';
+import ModelSelector from './ModelSelector';
+import SenderOptionsFields from './SenderOptionsFields';
+import SenderQuickActions from './SenderQuickActions';
+import DeepResearchFooter from './DeepResearchFooter';
+
+interface SenderMenuItem {
+ key: string;
+ label: string;
+ icon?: React.ReactNode;
+ agent_tools?: string[];
+}
+
+interface SenderFooterProps {
+ state: {
+ senderDisabled: boolean;
+ isPPTAssistant: boolean;
+ knowledgeReadonly?: boolean;
+ knowledgeBaseOpen: boolean;
+ quickActionOpen: boolean;
+ headerOpen: boolean;
+ selectedScene: string | null;
+ selectedItem?: SenderMenuItem;
+ senderContentLength: number;
+ maxContentLength: number;
+ senderSending: boolean;
+ senderStopping: boolean;
+ previewSendDisabled?: boolean;
+ previewSendDisabledTooltip?: string;
+ isSendDisabled: boolean;
+ shouldShowDeepResearch: boolean;
+ deepResearchMode: 'google_api' | 'self_configured';
+ deepResearchSource: string;
+ };
+ upload: {
+ senderFiles: FileItem[];
+ senderFilesConfig: {
+ maxLength: number;
+ };
+ fileUploadRef: React.RefObject;
+ fileInputRef: React.RefObject;
+ fileUploadDisabled?: boolean;
+ onFileStartUpload: (params: FileItem) => void;
+ onFileFinishUpload: (params: FileItem) => void;
+ onQuickActionOpenChange: (open: boolean) => void;
+ };
+ scene: {
+ showSenderActions: boolean;
+ senderKnowledgeBasesLength: number;
+ selectedSenderKnowledgeBasesLength: number;
+ menuItems: SenderMenuItem[];
+ menuProps: any;
+ agentId: string;
+ onKnowledgeBaseOpenChange: (open: boolean) => void;
+ onSelectedSceneChange: (scene: string | null) => void;
+ onClearKnowledgeBases: () => void;
+ };
+ options: {
+ senderSelectOptions: SenderOptionConfig[];
+ senderOptionsValues: Record;
+ onSenderOptionChange: (field: string, value: string) => void;
+ };
+ model: {
+ senderModels?: ModelItem[];
+ selectedSenderModels: ModelItem[];
+ setSelectedSenderModels: (models: ModelItem[]) => void;
+ };
+ actions: {
+ stop: () => void;
+ onSetDeepResearchMode: (mode: 'google_api' | 'self_configured') => void;
+ onSetDeepResearchSource: (source: string) => void;
+ };
+ SendButton: any;
+}
+
+const SenderFooter: React.FC = ({
+ state,
+ upload,
+ scene,
+ options,
+ model,
+ actions,
+ SendButton,
+}) => {
+ const { t } = useTranslation();
+ const {
+ senderDisabled,
+ isPPTAssistant,
+ knowledgeReadonly,
+ knowledgeBaseOpen,
+ quickActionOpen,
+ headerOpen,
+ selectedScene,
+ selectedItem,
+ senderContentLength,
+ maxContentLength,
+ senderSending,
+ senderStopping,
+ previewSendDisabled,
+ previewSendDisabledTooltip,
+ isSendDisabled,
+ shouldShowDeepResearch,
+ deepResearchMode,
+ deepResearchSource,
+ } = state;
+ const { senderFiles, senderFilesConfig, fileUploadRef, fileInputRef, fileUploadDisabled } = upload;
+ const {
+ showSenderActions,
+ senderKnowledgeBasesLength,
+ selectedSenderKnowledgeBasesLength,
+ menuItems,
+ menuProps,
+ agentId,
+ onKnowledgeBaseOpenChange,
+ onSelectedSceneChange,
+ onClearKnowledgeBases,
+ } = scene;
+ const { senderSelectOptions, senderOptionsValues, onSenderOptionChange } = options;
+ const { senderModels, selectedSenderModels, setSelectedSenderModels } = model;
+ const { stop, onSetDeepResearchMode, onSetDeepResearchSource } = actions;
+
+ return (
+ ;
+ disabled: boolean;
+ onChange: (field: string, value: string) => void;
+}
+
+const SenderOptionsFields: React.FC = ({ options, values, disabled, onChange }) => {
+ // Render currently-supported option fields (select). Other field types can be added here later.
+ if (!options.length) return null;
+
+ return (
+ <>
+ {options.map((optionConfig) => (
+ ;
+}
+
+const SenderQuickActions: React.FC = ({
+ isPPTAssistant,
+ fileUploadDisabled,
+ showSenderActions,
+ hasKnowledgeBases,
+ sessionActive,
+ knowledgeReadonly,
+ senderFilesLength,
+ maxFileLength,
+ headerOpen,
+ quickActionOpen,
+ setQuickActionOpen,
+ selectedKnowledgeBaseCount,
+ openKnowledgeBaseModal,
+ fileInputRef,
+}) => {
+ const { t } = useTranslation();
+ if (isPPTAssistant) {
+ return (
+
+ }
+ disabled={!sessionActive || knowledgeReadonly}
+ onClick={openKnowledgeBaseModal}
+ />
+
+ )}
+
+ );
+ }
+
+ const showPlusIcon = !fileUploadDisabled || (showSenderActions && hasKnowledgeBases);
+ if (!showPlusIcon) return null;
+
+ const showUpload = !fileUploadDisabled;
+ const showKnowledgeBase = showSenderActions && hasKnowledgeBases;
+
+ return (
+
- {item.status === 'done' ? (
- (item.url);
+
+ useEffect(() => {
+ if (item.url) {
+ setImgSrc(item.url);
+ } else if (item.originFileObj && isImage) {
+ const url = URL.createObjectURL(item.originFileObj);
+ setImgSrc(url);
+ return () => URL.revokeObjectURL(url);
+ }
+ }, [item.url, item.originFileObj, isImage]);
+
+ if (isImage) {
+ return (
+
+
+ {currentMcp && (
+
+ ([]);
+ const [displaySandboxItems, setDisplaySandboxItems] = useState([]);
+ const [displayBuiltinItems, setDisplayBuiltinItems] = useState([]);
+ const [displayWorkflowItems, setDisplayWorkflowItems] = useState([]);
+ const [displaySkillItems, setDisplaySkillItems] = useState([]);
+ const [selectedKeys, setSelectedKeys] = useState<(string | number)[]>([]);
+ const [currentMcp, setCurrentMcp] = useState(null);
+
+ const {
+ senderMCPTools,
+ senderSandboxTools,
+ senderPluginTools,
+ senderWorkflowTools,
+ senderSkillTools,
+ selectedSenderMCPTools,
+ setSelectedSenderMCPTools,
+ } = useAgentStore();
+
+ const tabItems = [
+ {
+ key: 'mcp',
+ label: getTranslation('tool.tab.mcp'),
+ },
+ {
+ key: 'sandbox',
+ label: getTranslation('tool.tab.sandbox'),
+ },
+ ...(senderPluginTools?.length > 0 ? [{ key: 'plugins', label: getTranslation('tool.tab.plugins') }] : []),
+ ...(senderWorkflowTools?.length > 0 ? [{ key: 'workflow', label: getTranslation('tool.tab.workflow') }] : []),
+ ...(senderSkillTools?.length > 0 ? [{ key: 'skills', label: getTranslation('tool.tab.skills') }] : []),
+ // {
+ // key: 'ai-app',
+ // label: getTranslation('tool.tab.ai-app'),
+ // disabled: true,
+ // },
+ ];
+
+ const handleSelectedItemChange = useCallback(
+ (ele: any) => {
+ const id = ele.agent_tool_id;
+
+ // Select not supported for the time being COMING and INACTIVE State tool, INACTIVEThe government has not yet secured the mobile phone.COMINGFor an imminent state of uplink
+ if (['COMING', 'INACTIVE'].includes(ele?.status)) {
+ return;
+ }
+
+ if (selectedKeys.includes(id)) {
+ setSelectedKeys(selectedKeys.filter((key) => key !== id));
+ return;
+ }
+
+ // For the time being, I'm not limited. MCP Number of services
+ // if (selectedKeys.length === 3) {
+ // return;
+ // }
+
+ if (ele?.need_config) {
+ setCurrentMcp(ele);
+ } else {
+ setSelectedKeys([...selectedKeys, id]);
+ }
+ },
+ [selectedKeys],
+ );
+
+ const handleOk = useCallback(() => {
+ const selectedMCPTools = senderMCPTools.filter((item) => selectedKeys.includes(item.agent_tool_id));
+ const selectedSandboxTools = senderSandboxTools.filter((item) => selectedKeys.includes(item.agent_tool_id));
+ const selectedPluginTools = senderPluginTools.filter((item) => selectedKeys.includes(item.agent_tool_id));
+ const selectedWorkflowTools = senderWorkflowTools.filter((item) => selectedKeys.includes(item.agent_tool_id));
+ const selectedSkillTools = senderSkillTools.filter((item) => selectedKeys.includes(item.agent_tool_id));
+
+ setSelectedSenderMCPTools([
+ ...selectedMCPTools,
+ ...selectedSandboxTools,
+ ...selectedPluginTools,
+ ...selectedWorkflowTools,
+ ...selectedSkillTools,
+ ]);
+ onClose();
+ }, [
+ onClose,
+ setSelectedSenderMCPTools,
+ senderMCPTools,
+ senderSandboxTools,
+ senderPluginTools,
+ senderWorkflowTools,
+ senderSkillTools,
+ selectedKeys,
+ ]);
+
+ useEffect(() => {
+ setSelectedKeys(selectedSenderMCPTools.map((item) => item.agent_tool_id));
+ }, [selectedSenderMCPTools]);
+
+ useEffect(() => {
+ setDisplayMCPItems(senderMCPTools);
+ }, [senderMCPTools]);
+
+ useEffect(() => {
+ setDisplaySandboxItems(senderSandboxTools);
+ }, [senderSandboxTools]);
+
+ useEffect(() => {
+ setDisplayBuiltinItems(senderPluginTools);
+ }, [senderPluginTools]);
+
+ useEffect(() => {
+ setDisplayWorkflowItems(senderWorkflowTools);
+ }, [senderWorkflowTools]);
+
+ useEffect(() => {
+ setDisplaySkillItems(senderSkillTools);
+ }, [senderSkillTools]);
+
+ const onChange = (key: string) => {
+ setActiveTab(key);
+ };
+
+ const contentRender = (type: string) => {
+ const displayMap: any = { plugins: displayBuiltinItems, workflow: displayWorkflowItems, skills: displaySkillItems };
+ const displayItems = displayMap[type] || [];
+
+ if (!displayItems?.length) return null;
+
+ return (
+ <>
+ {displayItems.map((item) => (
+
+ ))}
+
+ );
+ };
+
+ return (
+ <>
+
+ {imgSrc ? (
+ 
) : (
- = ({ currentMcp, onChange }) => {
+ const [form] = Form.useForm();
+ const { t } = useTranslation();
+ const requestClient = useRequestClient();
+ const [configLoading, setConfigLoading] = useState(false);
+
+ const handleConfigConfirm = async () => {
+ try {
+ const values = await form.validateFields();
+ setConfigLoading(true);
+ const configList = currentMcp?.config ?? [];
+ const config = configList.reduce((acc, curItem) => {
+ acc[curItem.param_name] = values[curItem.param_name];
+ return acc;
+ }, {});
+ const id = currentMcp.agent_tool_id;
+ await requestClient.mcp
+ .edit({
+ mcp_server_id: id,
+ config,
+ })
+ .then(() => {
+ onChange({
+ ...currentMcp,
+ config: configList.map((item) => ({ ...item, param_value: values[item.param_name] })),
+ });
+ })
+ .catch((error) => {
+ const data = error?.response?.data || {};
+ if (data?.code === 7501) {
+ message.error(data.message);
+ }
+ })
+ .finally(() => setConfigLoading(false));
+ } catch (error) {
+ console.info(error);
+ }
+ };
+
+ useEffect(() => {
+ if (currentMcp) {
+ if (currentMcp?.need_config) {
+ form.resetFields();
+ setConfigLoading(false);
+ const configList = currentMcp?.config ?? [];
+ configList.forEach((item) => {
+ form.setFieldsValue({
+ [item.param_name]: item.param_value,
+ });
+ });
+ }
+ }
+ }, [currentMcp, form]);
+
+ return (
+
+
+
+ );
+};
+
+export default MCPConfigModal;
diff --git a/web/src/components/Agent/Chatbot/Sender/components/MCPToolModal.tsx b/web/src/components/Agent/Chatbot/Sender/components/MCPToolModal.tsx
new file mode 100644
index 0000000..4ed684e
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/components/MCPToolModal.tsx
@@ -0,0 +1,315 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { Modal, Tabs, Tooltip } from 'antd';
+import { getLanguage, getTranslation, useTranslation } from '@/hooks/useTranslation';
+import { useAgentStore } from '@/store';
+import checkedImg from '@/assets/svg/sender/checked.svg';
+import { MCPToolItem, SandboxToolItem } from '@/types';
+import MCPConfigModal from './MCPConfigModal';
+
+const getLinkedText = (text: string) => {
+ if (!text) return '';
+ return text.replace(/(https?:\/\/[^\s]+)/g, (url) => {
+ return `${url}`;
+ });
+};
+
+export const getToolName = (item: MCPToolItem | SandboxToolItem) => {
+ const lang = getLanguage();
+ if ((item as MCPToolItem).ext?.name_en || (item as SandboxToolItem).tool_name_en) {
+ if ((item as MCPToolItem).ext?.[`name_${lang}`] || (item as SandboxToolItem)[`tool_name_${lang}`]) {
+ return (item as MCPToolItem).ext?.[`name_${lang}`] || (item as SandboxToolItem)[`tool_name_${lang}`];
+ }
+ if (lang === 'zh') {
+ return (item as MCPToolItem).name || (item as SandboxToolItem).tool_name;
+ }
+ return (item as MCPToolItem).ext?.name_en || (item as SandboxToolItem).tool_name_en;
+ }
+ return (item as MCPToolItem).name || (item as SandboxToolItem).tool_name;
+
+};
+
+const getDesc = (item: MCPToolItem | SandboxToolItem) => {
+ const lang = getLanguage();
+ if ((item as MCPToolItem).ext?.desc_en || (item as SandboxToolItem).desc_en) {
+ if ((item as MCPToolItem).ext?.[`desc_${lang}`] || (item as SandboxToolItem)[`desc_${lang}`]) {
+ return (item as MCPToolItem).ext?.[`desc_${lang}`] || (item as SandboxToolItem)[`desc_${lang}`];
+ }
+ if (lang === 'zh') {
+ return (item as MCPToolItem).brief_introduction || (item as SandboxToolItem).desc;
+ }
+ return (item as MCPToolItem).ext?.desc_en || (item as SandboxToolItem).desc_en;
+ }
+ return (item as MCPToolItem).brief_introduction || (item as SandboxToolItem).desc;
+};
+
+const MCPToolModal: React.FC<{
+ onClose: () => void;
+}> = ({ onClose }) => {
+ const { t } = useTranslation();
+
+ const [activeTab, setActiveTab] = useState('sandbox');
+ const [displayMCPItems, setDisplayMCPItems] = useState
+
= ({ fileList, onRemove }) => {
+ return (
+ ;
@@ -19,67 +25,115 @@ interface FileUploadProps {
onFinish: (params: FileItem) => void;
}
+const MAX_FILE_LIMIT = 10;
+
const FileUpload = forwardRef((props, ref) => {
const { disabled, onStart, onFinish } = props;
- const { senderFiles, fileUploadConfig } = useAgentStore();
+ const { senderFiles, senderFilesConfig } = useAgentStore();
+ const requestClient = useRequestClient();
const { t } = useTranslation();
- const handleUpload: UploadProps['customRequest'] = async (option) => {
- if (!fileUploadConfig.customUploadRequest || typeof fileUploadConfig.customUploadRequest !== 'function') {
- message.error('Custom upload request is not supported');
- return;
- }
+ const effectiveMaxCount = senderFilesConfig.maxLength && senderFilesConfig.maxLength !== Infinity
+ ? senderFilesConfig.maxLength
+ : MAX_FILE_LIMIT;
+ const handleUpload = async (option: any) => {
const file = option.file as AntdUploadFile;
- onStart?.({ uid: file.uid, status: 'uploading', name: '', key: '' });
- const url = await fileUploadConfig.customUploadRequest(file as File);
- if (!url) {
- message.error('Custom upload request failed');
- return;
- }
-
- onFinish?.({
- uid: file.uid,
+ const uid = generateSecureUid();
+ onStart?.({
+ uid: uid,
+ status: 'uploading',
name: file.name,
- key: url,
- status: 'done',
- url: url,
- size: file.size,
+ key: '',
type: file.type,
+ size: file.size,
+ originFileObj: file as unknown as File,
});
+
+ try {
+ const chunkList = splitFile(file as unknown as File);
+ const md5 = await calculateHash(chunkList);
+
+ // Use new API Service Get Pre-Signation URL
+ const presignedResponse = await requestClient.file.getPresignedUrl(
+ md5 + getFileExtensionFromFileName(file.name),
+ );
+ const data = presignedResponse.data;
+
+ const url = data.url;
+ const formData = new FormData();
+
+ Object.entries(data.fields).forEach(([key, value]) => {
+ formData.append(key, value as string);
+ });
+ formData.append('file', file as unknown as File);
+
+ // Use new API Service Uploading File
+ await requestClient.file.upload(url, formData);
+
+ const fileUrl = `${url.replace(/\/+$/, '')}/${data.fields.key.replace(/^\/+/, '')}`;
+
+ onFinish?.({
+ uid,
+ name: file.name,
+ key: data.fields.key,
+ status: 'done',
+ url: fileUrl,
+ size: file.size,
+ type: file.type,
+ originFileObj: file as unknown as File,
+ });
+ } catch (error) {
+ onFinish?.({ uid, status: 'error', name: '', key: '' });
+ console.error('Error uploading file:', error);
+ }
};
const beforeUpload = async (file: File, fileList: File[]) => {
- // 检查文件类型
- const fileExtension = file.name.toLowerCase().substring(file.name.lastIndexOf('.'));
- if (fileUploadConfig.accept && !fileUploadConfig.accept.includes(fileExtension)) {
- message.error(`${t('file.upload.format.error')} ${fileUploadConfig.accept}`);
- return false;
- }
+ const maxSize = 100 * 1024 * 1024; // 100MB
- if (fileUploadConfig.maxSize && file.size > fileUploadConfig.maxSize) {
- message.error(`${t('file.upload.size.error')} 200MB`);
+ if (file.size > maxSize) {
+ message.error(`${t('file.upload.size.error')} 100MB`);
return false;
}
- // 结合当前已有文件数量和即将上传的文件数量判断总数不能超过MAX_FILE_LIMIT个
+ // 2026-05-21：Remove File Type Limit
+ // Validate the file type.
+ // if (!isFileAllowed(file.name)) {
+ // message.error(`${t('file.upload.format.error')} ${ALLOWED_FILES_DESC}`);
+ // return false;
+ // }
+
+ // The total number of files that are currently available and are about to be uploaded cannot be exceeded effectiveMaxCount individual
const currentFileCount = senderFiles?.length || 0;
const newFileCount = fileList.length;
const totalFileCount = currentFileCount + newFileCount;
- if (fileUploadConfig.maxCount && totalFileCount > fileUploadConfig.maxCount) {
- message.error(`${t('file.upload.count.error')} ${fileUploadConfig.maxCount}`);
+ if (totalFileCount > effectiveMaxCount) {
+ const isFirstFile = fileList.indexOf(file) === 0;
+ if (isFirstFile) {
+ // Only popup error alarm box when first file is shown to avoid repeated displays
+ message.error(`${t('file.upload.count.error')} ${effectiveMaxCount}`);
+ }
+ return false;
+ }
+ if (senderFilesConfig.beforeUpload && !senderFilesConfig.beforeUpload(fileList, file)) {
return false;
}
return true;
};
+ useImperativeHandle(ref, () => ({
+ beforeUpload,
+ handleUpload,
+ }));
+
const uploadProps: UploadProps = {
name: 'file',
- accept: fileUploadConfig.accept || '',
- multiple: fileUploadConfig.multiple || false,
- maxCount: fileUploadConfig.maxCount || 1,
+ // 2026-05-21：Remove File Type Limit
+ // accept: senderFilesConfig.accept || ALLOWED_FILES,
+ multiple: senderFilesConfig.maxLength ? senderFilesConfig.maxLength > 1 : true,
showUploadList: false,
disabled,
beforeUpload,
@@ -88,12 +142,16 @@ const FileUpload = forwardRef((props, ref) => {
return (
- }
- />
+ {senderFilesConfig.Button ? (
+
);
});
diff --git a/web/src/components/Agent/Chatbot/Sender/components/KnowledgeBaseModal.tsx b/web/src/components/Agent/Chatbot/Sender/components/KnowledgeBaseModal.tsx
new file mode 100644
index 0000000..cd7c0ff
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/components/KnowledgeBaseModal.tsx
@@ -0,0 +1,282 @@
+import React, { useMemo, useEffect, useState, useCallback, useDeferredValue } from 'react';
+import { Modal, Input, Button, Empty, ConfigProvider } from 'antd';
+import { SearchOutlined, UserOutlined, ClockCircleOutlined, CloseOutlined } from '@ant-design/icons';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useAgentStore } from '@/store';
+import SelectedIcon from '@/assets/svg/tools/selected.svg?react';
+import FileIcon from '@/assets/svg/tools/file.svg?react';
+import DeleteIcon from '@/assets/svg/tools/delete.svg?react';
+import classNames from 'classnames';
+
+const KnowledgeBaseModal: React.FC<{
+ onClose: () => void;
+}> = ({ onClose }) => {
+ const { t } = useTranslation();
+
+ const [filterType, setFilterType] = useState<'ALL' | 'PUBLIC' | 'PERSONAL'>('ALL');
+ const [searchText, setSearchText] = useState('');
+ const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+
+ const { senderKnowledgeBases, selectedSenderKnowledgeBases, setSelectedSenderKnowledgeBases } = useAgentStore();
+
+ useEffect(() => {
+ setSelectedRowKeys(selectedSenderKnowledgeBases.map((item) => item.knowledge_id));
+ }, [selectedSenderKnowledgeBases]);
+
+ const filteredItems = useMemo(() => {
+ return senderKnowledgeBases.filter((item) => {
+ const matchSearch = item.name?.toLowerCase().includes(searchText.toLowerCase());
+ let matchType = true;
+ if (filterType === 'PUBLIC') matchType = item.visible_range !== 1;
+ if (filterType === 'PERSONAL') matchType = item.visible_range === 1;
+ return matchSearch && matchType;
+ });
+ }, [senderKnowledgeBases, searchText, filterType]);
+
+ const deferredItems = useDeferredValue(filteredItems);
+
+ const handleSelect = (item: any) => {
+ const id = item.knowledge_id;
+ const isSelected = selectedRowKeys.includes(id);
+ let newKeys;
+
+ // Multi-select Logic
+ if (isSelected) {
+ newKeys = selectedRowKeys.filter((k) => k !== id);
+ } else {
+ newKeys = [...selectedRowKeys, id];
+ }
+ setSelectedRowKeys(newKeys);
+ };
+
+ const handleOk = useCallback(() => {
+ setSelectedSenderKnowledgeBases(senderKnowledgeBases.filter((item) => selectedRowKeys.includes(item.knowledge_id)));
+ onClose();
+ }, [onClose, setSelectedSenderKnowledgeBases, senderKnowledgeBases, selectedRowKeys]);
+
+ const handleRemoveTag = (id: string) => {
+ setSelectedRowKeys(selectedRowKeys.filter((k) => k !== id));
+ };
+
+ const selectedKnowledgeBases = useMemo(() => {
+ return selectedRowKeys
+ .map((id) => senderKnowledgeBases.find((item) => item.knowledge_id === id))
+ .filter((item): item is any => item !== undefined);
+ }, [selectedRowKeys, senderKnowledgeBases]);
+
+ const renderCard = (item: any) => {
+ const isSelected = selectedRowKeys.includes(item.knowledge_id);
+
+ return (
+
+
+ {selectedKnowledgeBases.length > 0 && (
+
+ }
+ closeIcon={ onRemove(item.uid)}
- >
-
+ );
+ }
+
+ return (
+
-
+
+
+ )}
+ onRemove(item.uid)}>
+
+
+
+ );
+};
+
+const FileList: React.FC
+
+
+ {item.status === 'uploading' ?
+
+
+
+ {item.name || (item.status === 'uploading' ? 'Uploading...' : '')}
+ {formatFileSize(item.size || 0)}
onRemove(item.uid)}>
+
+
+ {fileList?.map((item, index) => (
+
);
diff --git a/web/src/components/Agent/Chatbot/Sender/components/FileUpload.tsx b/web/src/components/Agent/Chatbot/Sender/components/FileUpload.tsx
index 3f8f90b..d0b8c3b 100644
--- a/web/src/components/Agent/Chatbot/Sender/components/FileUpload.tsx
+++ b/web/src/components/Agent/Chatbot/Sender/components/FileUpload.tsx
@@ -1,12 +1,18 @@
+import {
+ calculateHash,
+ splitFile,
+ generateSecureUid,
+ getFileExtensionFromFileName,
+ ALLOWED_FILES,
+ ALLOWED_FILES_DESC,
+ isFileAllowed,
+} from '@/utils/file';
import { CustomIcon } from '@/components/Agent/Chatbot/Sender/components';
import { Button, Upload, UploadProps, message } from 'antd';
import React, { forwardRef, useImperativeHandle } from 'react';
import type { AntdUploadFile, FileItem } from '@/types';
-
-import { useAgentStore } from '@/store';
+import { useAgentStore, useRequestClient } from '@/store';
import { useTranslation } from '@/hooks/useTranslation';
-import { calculateHash, generateSecureUid, getFileExtensionFromFileName } from '@/utils/file';
-import http from '@/services/request';
interface FileUploadRef {
beforeUpload?: (file: File, fileList: File[]) => Promise handleSelect(item)}
+ className={`
+ relative p-3 mb-2 rounded-xl border transition-all cursor-pointer group
+ ${isSelected
+ ? 'border-[#F2F2F2] bg-[#F6F6F8]'
+ : 'border-gray-200 hover:border-gray-300 bg-white hover:shadow-sm'
+ }
+ `}
+ >
+ {/* Title with compact typography. */}
+
+ );
+ };
+
+ /**
+ * Render Filter
+ */
+ const renderFilters = () => {
+ const filterOptions = [
+ { key: 'ALL', label: t('knowledge.filter.all') },
+ { key: 'PUBLIC', label: t('knowledge.filter.public') },
+ { key: 'PERSONAL', label: t('knowledge.filter.personal') },
+ ];
+ return (
+ {item.name || '-'}
+
+ {/* Description with reduced type size and bottom spacing. */}
+
+ {item.description || t('knowledge.no_desc')}
+
+
+ {/* Compact footer metadata. */}
+
+
+
+ {/* Keep the selected checkmark in its original position. */}
+ {isSelected && (
+
+
+
+
+
+
+ )}
+
+
+ );
+ };
+
+ return (
+
+ {filterOptions.map((tab) => (
+
+ ))}
+
+
+ }
+ className="!w-[180px] h-8 mr-5 rounded-lg border-gray-200 text-[12px] focus:!border-gray-200 focus:!border-none "
+ value={searchText}
+ onChange={(e) => setSearchText(e.target.value)}
+ allowClear
+ />
+
+
+ )}
+
+ {selectedKnowledgeBases.map((item) => (
+
+
+ {
+ e.stopPropagation();
+ handleRemoveTag(item.knowledge_id);
+ }}
+ />
+
+ ))}
+
+
+
+
+
+ {deferredItems.length > 0 ? (
+ deferredItems.map(renderCard)
+ ) : (
+
+
+
+ );
+};;
+export default KnowledgeBaseModal;
diff --git a/web/src/components/Agent/Chatbot/Sender/components/MCPConfigModal.tsx b/web/src/components/Agent/Chatbot/Sender/components/MCPConfigModal.tsx
new file mode 100644
index 0000000..986da68
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/components/MCPConfigModal.tsx
@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from 'react';
+import { Form, Input, Modal, message, Tooltip } from 'antd';
+import { getLanguage, useTranslation } from '@/hooks/useTranslation';
+import { MCPToolItem } from '@/types';
+import { useRequestClient } from '@/store';
+import leftIcon from '@/assets/svg/sender/mcp-config-left.svg';
+
+const getLinkedText = (text: string) => {
+ if (!text) return '';
+ return text.replace(/(https?:\/\/[^\s]+)/g, (url) => {
+ return `${url}`;
+ });
+};
+
+const getMcpName = (item: any) => {
+ const lang = getLanguage();
+ // It says it's system data.
+ if (item.ext?.name_en) {
+ // Prefer to user-set languages
+ if (item.ext?.[`name_${lang}`]) {
+ return item.ext?.[`name_${lang}`];
+ }
+ // In Chinese, usename
+ if (lang === 'zh') {
+ return item.name;
+ }
+ // If no user language is available, use English as afallback
+ return item.ext?.name_en;
+ }
+ // User created data
+ return item.name;
+};
+
+const getMcpDesc = (item: any) => {
+ const lang = getLanguage();
+ // It says it's system data.
+ if (item.ext?.desc_en) {
+ if (item.ext?.[`desc_${lang}`]) {
+ return item.ext?.[`desc_${lang}`];
+ }
+ if (lang === 'zh') {
+ return item.details;
+ }
+ return item.ext?.desc_en;
+ }
+ // User created data
+ return item.details;
+};
+
+interface mcpConfigModalProps {
+ currentMcp: MCPToolItem | null;
+ onChange: (item: MCPToolItem | null) => void;
+}
+
+const MCPConfigModal: React.FC
+
+ )}
+ onChange(null)}
+ >
+ 
+
+ {t('mcp.config.modal.title')}
+
+ }
+ width={730}
+ open
+ onCancel={() => onChange(null)}
+ onOk={handleConfigConfirm}
+ okButtonProps={{ loading: configLoading }}
+ >
+
+
+
+
+
+
+ 
+
+
+
+ {getMcpName(currentMcp)}
+
+
}>
+ {getMcpDesc(currentMcp)}
+
+ handleSelectedItemChange(item)}
+ >
+
+
+ 
+
+
+
+ {getToolName(item)}
+
+
}>
+ {getDesc(item)}
+
+
+ 
+
+
+ {activeTab === 'mcp' &&
+ displayMCPItems?.length > 0 &&
+ displayMCPItems.map((item) => (
+
+ ))}
+ {activeTab === 'sandbox' &&
+ displaySandboxItems?.length > 0 &&
+ displaySandboxItems.map((item, index) => (
+ handleSelectedItemChange(item)}
+ >
+
+
+
+
+
+
+ {getToolName(item)}
+
+
}>
+ {getDesc(item)}
+
+
+
+
+ handleSelectedItemChange(item)}
+ >
+
+ ))}
+ {activeTab === 'plugins' && contentRender('plugins')}
+ {activeTab === 'workflow' && contentRender('workflow')}
+ {activeTab === 'skills' && contentRender('skills')}
+
+
+
+
+
+ {getToolName(item)}
+
+ {getDesc(item)}
+
+
+
+
+ {item.status === 'COMING' && (
+ {getTranslation('mcp.tool.coming')}
+ )}
+
+
+ ),
+ };
+ };
+
+ const groups: any[] = [
+ {
+ key: 'official',
+ type: 'group',
+ label: t('models.official'),
+ children: models
+ .filter((item: any) => !item?.is_owner)
+ .map(itemRender),
+ },
+ ];
+
+ const myModels = models.filter((item: any) => item?.is_owner);
+
+ if (myModels.length > 0) {
+ groups.push({
+ key: 'my',
+ type: 'group',
+ label: t('models.my'),
+ children: myModels.map(itemRender),
+ });
+ }
+
+ return groups;
+ }, [models, t, currentModelId, menuWidth]);
+
+ // --- 2. Build the trigger button. ---
+ const renderTrigger = () => {
+ const baseClasses = `agentx-model-trigger ${disabled ? 'is-disabled' : ''} ${className}`;
+
+ // --- Status A：Selected (A capsule with color. + Clear button) ---
+ if (hasSelection) {
+ return (
+
+
+ {isSelected && (
+
+ {!!featureDisplayText && (
+
+ {featureDisplayText}
+
+ )}
+ {isImageUrl(item.icon) ? (
+
+ ) : (
+ {item.icon || ''}
+ )}
+
+ {item.model_display_name}
+
+
+ {!!descDisplayText && (
+
+ {descDisplayText}
+
+ )}
+
+ 
+
+ )}
+
+ 
+
+ );
+ }
+
+ // --- Status B：Not Selected (Circle button, consistent with left tool assembly) ---
+ return (
+
+ {isImageUrl(currentModel.icon) ? (
+ 
+ ) : (
+
+ {currentModel.icon || '🧠'}
+
+ )}
+ {currentModel.model_display_name}
+
+
+ 🧠
+
+ );
+ };
+
+ if (!models || models.length === 0) return null;
+
+ return (
+
+
+ );
+};
+
+export default SenderFooter;
diff --git a/web/src/components/Agent/Chatbot/Sender/components/SenderOptionsFields.tsx b/web/src/components/Agent/Chatbot/Sender/components/SenderOptionsFields.tsx
new file mode 100644
index 0000000..cb8d7e6
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/components/SenderOptionsFields.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Select } from 'antd';
+import type { SenderOptionConfig } from '@/types';
+
+interface SenderOptionsFieldsProps {
+ options: SenderOptionConfig[];
+ values: Record
+
+
+ {shouldShowDeepResearch && (
+
+ 0}
+ sessionActive={!senderDisabled}
+ knowledgeReadonly={knowledgeReadonly}
+ senderFilesLength={senderFiles.length}
+ maxFileLength={senderFilesConfig.maxLength}
+ headerOpen={headerOpen}
+ quickActionOpen={quickActionOpen}
+ setQuickActionOpen={upload.onQuickActionOpenChange}
+ selectedKnowledgeBaseCount={selectedSenderKnowledgeBasesLength}
+ openKnowledgeBaseModal={() => onKnowledgeBaseOpenChange(true)}
+ fileInputRef={fileInputRef}
+ />
+
+ {knowledgeBaseOpen && onKnowledgeBaseOpenChange(false)} />}
+
+ {menuItems.length > 0 && showSenderActions && !isPPTAssistant && (
+
+ }
+ disabled={senderDisabled}
+ >
+ {!selectedScene && t('tool')}
+
+
+ )}
+ {showSenderActions && selectedScene && !isPPTAssistant && (
+
+ )}
+
+ {(agentId === '01' || isPPTAssistant) && selectedSenderKnowledgeBasesLength > 0 && (
+
+
+
+ = senderFilesConfig.maxLength}
+ ref={fileUploadRef}
+ onStart={upload.onFileStartUpload}
+ onFinish={upload.onFileFinishUpload}
+ />
+
+
+
+
+
+ )}
+
+
+
+ )}
+ maxContentLength ? 'text-[#f5222d]' : ''}>{senderContentLength}
/
+ {maxContentLength}
+
+ {agentId === '01' && (
+ {
+ if (modelId === '') {
+ setSelectedSenderModels([]);
+ saveSelectedModel(null);
+ return;
+ }
+ const selectedModel = senderModels?.find((model) => model.id === modelId);
+ if (selectedModel) {
+ setSelectedSenderModels([selectedModel]);
+ saveSelectedModel(selectedModel);
+ }
+ }}
+ disabled={senderDisabled}
+ />
+ )}
+
+ {senderSending ? (
+
+
+
+ ) : (
+
+
+ )}
+
+
+
+ )}
+
+ {optionConfig.label}
+
+ ))}
+
+ );
+};
+
+export default SenderOptionsFields;
diff --git a/web/src/components/Agent/Chatbot/Sender/components/SenderQuickActions.tsx b/web/src/components/Agent/Chatbot/Sender/components/SenderQuickActions.tsx
new file mode 100644
index 0000000..1256d3e
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/components/SenderQuickActions.tsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import { Badge, Button, Popover, Tooltip } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import AddFileIcon from '@/assets/svg/labels/add-files.svg?react';
+import KnowledgeBaseIcon from '@/assets/svg/labels/select-knowledge-base.svg?react';
+import { useTranslation } from '@/hooks/useTranslation';
+
+interface SenderQuickActionsProps {
+ isPPTAssistant: boolean;
+ fileUploadDisabled?: boolean;
+ showSenderActions: boolean;
+ hasKnowledgeBases: boolean;
+ sessionActive: boolean;
+ knowledgeReadonly?: boolean;
+ senderFilesLength: number;
+ maxFileLength: number;
+ headerOpen: boolean;
+ quickActionOpen: boolean;
+ setQuickActionOpen: (open: boolean) => void;
+ selectedKnowledgeBaseCount: number;
+ openKnowledgeBaseModal: () => void;
+ fileInputRef: React.RefObject
+
+ {t('sender.quick_actions.upload_ppt_template_tooltip_template')}
+ {t('sender.quick_actions.upload_ppt_template_tooltip_copy')}
+
+ }
+ overlayClassName="agentx-ppt-tooltip"
+ overlayStyle={{ maxWidth: 'none' }}
+ placement="topLeft"
+ arrow={{ pointAtCenter: true }}
+ >
+ }
+ disabled={!sessionActive || senderFilesLength >= maxFileLength}
+ onClick={() => fileInputRef.current?.click()}
+ >
+ {t('sender.quick_actions.upload_ppt_template')}
+
+
+ {hasKnowledgeBases && selectedKnowledgeBaseCount === 0 && (
+
+ {icon && (
+
+ );
+};
+
+export default ToolItem;
diff --git a/web/src/components/Agent/Chatbot/Sender/components/index.tsx b/web/src/components/Agent/Chatbot/Sender/components/index.tsx
index ee69685..908c67a 100644
--- a/web/src/components/Agent/Chatbot/Sender/components/index.tsx
+++ b/web/src/components/Agent/Chatbot/Sender/components/index.tsx
@@ -1 +1,10 @@
export { default as CustomIcon } from './CustomIcon';
+export { default as FileUpload } from './FileUpload';
+export { default as FileList } from './FileList';
+export { default as KnowledgeBaseModal } from './KnowledgeBaseModal';
+export { default as MCPToolModal } from './MCPToolModal';
+export { default as ModelSelector } from './ModelSelector';
+export { default as SenderOptionsFields } from './SenderOptionsFields';
+export { default as SenderFooter } from './SenderFooter';
+export { default as SenderQuickActions } from './SenderQuickActions';
+export { default as DeepResearchFooter } from './DeepResearchFooter';
diff --git a/web/src/components/Agent/Chatbot/Sender/hooks/useSenderFileHandlers.ts b/web/src/components/Agent/Chatbot/Sender/hooks/useSenderFileHandlers.ts
new file mode 100644
index 0000000..2cb83ac
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/Sender/hooks/useSenderFileHandlers.ts
@@ -0,0 +1,92 @@
+import { useCallback } from 'react';
+import type { FileItem } from '@/types';
+
+interface FileUploadRef {
+ beforeUpload?: (file: File, fileList: File[]) => Promise
+ 
+
+ )}
+
+ {name}
+
+
+ {typeof greeting === 'string' ? (
+
+ );
+};
+
+export default StartScreen;
diff --git a/web/src/components/Agent/Chatbot/ToolRender.tsx b/web/src/components/Agent/Chatbot/ToolRender.tsx
new file mode 100644
index 0000000..1cd1c6b
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/ToolRender.tsx
@@ -0,0 +1,69 @@
+import { MessagePlanChunk, MessageToolChunk } from '@/types';
+import React, { useState } from 'react';
+import ClickableTool from './ClickableTool';
+import { useAgentStore } from '@/store';
+import MessageBrief from '@/registry/common/MessageBrief';
+import registry from '@/registry';
+import Loading from '@/components/Infra/Loading';
+import ExpandCollapseIcon from './ExpandCollapseIcon';
+import { shouldRenderToolDetailWhilePending } from '@/registry/common/imageTool';
+
+interface ToolRenderProps {
+ message: MessageToolChunk;
+ hasUserInput?: boolean;
+ className?: string;
+}
+
+const ToolRender: React.FC{greeting}
+ ) : (
+ greeting
+ )}
+ {prompts?.length > 0 && (
+
+ {prompts?.map((prompt) => (
+
+ )}
+ handleClick(prompt)}
+ >
+
+ ))}
+ {prompt}
+
+
+
+
+ );
+ }
+
+ if (!narrowMode) {
+ return (
+
+ {/* Tool title and status. */}
+
+ );
+};
+
+export default ToolRender;
diff --git a/web/src/components/Agent/Chatbot/Welcome.tsx b/web/src/components/Agent/Chatbot/Welcome.tsx
index 58a00c2..9582446 100644
--- a/web/src/components/Agent/Chatbot/Welcome.tsx
+++ b/web/src/components/Agent/Chatbot/Welcome.tsx
@@ -1,14 +1,15 @@
import { Welcome } from '@ant-design/x';
import React from 'react';
+import { useTranslation } from '@/hooks/useTranslation';
const WelcomeContainer: React.FC = () => {
+ const { t } = useTranslation();
return (
setCollapsed(!collapsed)}>
+
+ {!collapsed && (!isRunning || shouldRenderWhilePending) && (
+
+
+ )}
+
+ {msg.loading ?
+ );
+ });
+ } else if (message.role === 'assistant') {
+ const hasUserInput = message.messages.some((msg) => msg.type === 'user_input');
+
+ const turnWebsiteDelivery = findCompletedWebsiteDelivery(message.messages);
+
+ // Will finish_reason Stand up, and... trace link Peer presentation (compatible draft)
+ let finishReasonMsg: any | undefined;
+ for (let i = message.messages.length - 1; i >= 0; i--) {
+ if (message.messages[i]?.type === 'finish_reason') {
+ finishReasonMsg = message.messages[i];
+ break;
+ }
+ }
+ // Do Not Show client_tool_call
+ const messagesWithoutFinishReason = message.messages.filter(
+ (msg) => msg.type !== 'finish_reason' && msg.type !== 'client_tool_call',
+ );
+
+ const showFinishReason = Boolean(
+ finishReasonMsg && !hasUserInput && (finishReasonMsg?.detail?.status || 'completed') !== 'user_input',
+ );
+
+ const traceUrl = getTraceUrl(message.trace_id);
+ return (
+
+
+
+ {showFinishReason &&
+ )}
+
-
-
-
-
- }
- onClick={() => {
- useAgentStore.getState().resetStore();
- }}
- />
-
-
-
- {sessionInfo?.title || ''}
-
-
-
- {shareButtonNode ? shareButtonNode : null}
- {!workspaceVisible && (
- } onClick={handleWorkspaceOpen} className="ml-[12px]" />
- )}
-
-
-
-
- {pipelineMessages.map((message, idx) => {
- if (message.role === 'user') {
- return message.messages.map((msg, idx) => {
- const actionItems = msg.loading
- ? []
- : [
- {
- key: 'copy',
- icon:
- {message.messages.map((msg, idx) => {
- if (isToolMessage(msg as MessageToolChunk)) {
- return (
-
- {msg.content && setPipelineTargetMessage(msg)}
- active={(msg as MessageToolChunk).detail?.status === 'pending'}
- >
-
-
- );
- }
- return (
-
-
- );
- })}
- {message.messages.some((msg) => isFinishChunk(msg)) && message.trace_id && (
-
- }
- />
- );
+ {layoutConfig.headerPosition === 'inner' && (
+
- {
- if (info.key === 'copy') {
- try {
- if (navigator.clipboard && navigator.clipboard.writeText) {
- navigator.clipboard.writeText(msg.content);
- } else {
- // fallback solution: use the traditional copy method
- const textArea = document.createElement('textarea');
- textArea.value = msg.content;
- document.body.appendChild(textArea);
- textArea.select();
- document.execCommand('copy');
- document.body.removeChild(textArea);
- }
- antdMessage.success(t('code.copy.success'));
- } catch (error) {
- console.error('Copy failed:', error);
- }
- }
- }}
- />
- {msg.loading ?
-
- );
- });
- } else if (message.role === 'assistant') {
- const hasUserInput = message.messages.some((msg) => msg.type === 'user_input');
- return (
-
-
- View trace
-
- )}
-
+ {pipelineMessages.length > 0 ? (
+
+ {renderMessages()}
+
+ ) : sessionId ? (
+
);
};
diff --git a/web/src/components/Agent/Chatbot/planner.less b/web/src/components/Agent/Chatbot/planner.less
new file mode 100644
index 0000000..0a85e51
--- /dev/null
+++ b/web/src/components/Agent/Chatbot/planner.less
@@ -0,0 +1,97 @@
+.planner {
+ .ant-thought-chain,
+ .ant-thought-chain-node,
+ .ant-thought-chain-node-header,
+ .ant-thought-chain-node-content-box {
+ background: transparent !important;
+ }
+
+ /* Backward-compatible selectors for older ThoughtChain DOM (`ant-thought-chain-item-*`) */
+ .ant-thought-chain-item-index-icon {
+ display: none !important;
+ }
+
+ .ant-thought-chain-node-index-icon,
+ .ant-thought-chain-node-icon,
+ .ant-thought-chain-node-collapse-icon {
+ display: none !important;
+ }
+
+ .ant-thought-chain-node-header {
+ align-items: flex-start;
+ gap: 8px;
+ }
+
+ .ant-thought-chain-node-title {
+ display: flex;
+ align-items: center;
+ min-height: 20px;
+ }
+
+ .planner-step-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .planner-step-title-icon {
+ width: 20px;
+ height: 20px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 20px;
+ margin-top: 1px;
+ }
+
+ .planner-step-title-text {
+ color: #000;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ .planner-step-expand-icon {
+ color: #000;
+ display: flex;
+ align-items: center;
+ }
+
+ /* Tighten vertical rhythm to match design */
+ .ant-thought-chain-node {
+ padding-block: 6px;
+ }
+
+ /* Sub description text */
+ .ant-thought-chain-node-content-box {
+ font-size: 13px;
+ line-height: 18px;
+ color: rgba(0, 0, 0, 0.65);
+ }
+
+ /* Make the main connector line dashed */
+ .ant-thought-chain-node-tail,
+ .ant-thought-chain-item-tail {
+ background-color: transparent !important;
+ border-inline-start: 1px dashed #eaeaea !important;
+ border-left: 1px dashed #eaeaea !important;
+ }
+}
+
+.ant-thought-chain-node {
+ &:not(:last-child) {
+ .agentx-plan-step-content {
+ position: relative;
+ &::before {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 0;
+ bottom: -24px;
+ border-left: 1px dashed #dddddd;
+ }
+ }
+ }
+}
diff --git a/web/src/components/Agent/FileViewer/index.tsx b/web/src/components/Agent/FileViewer/index.tsx
index f758390..4484344 100644
--- a/web/src/components/Agent/FileViewer/index.tsx
+++ b/web/src/components/Agent/FileViewer/index.tsx
@@ -1,18 +1,52 @@
import React from 'react';
-import { Button } from 'antd';
-import { CloseOutlined, DownloadOutlined } from '@ant-design/icons';
+
import { useAgentStore } from '@/store';
import FileReader from '@/components/Infra/FileReader';
import { E2BFile, FileItem } from '@/types';
+import FileViewerCloseSvg from '@/assets/svg/fileviewer/close.svg?react';
+import FileViewerDownloadSvg from '@/assets/svg/fileviewer/download.svg?react';
+import FileViewerFileViewSvg from '@/assets/svg/fileviewer/file-view.svg?react';
+import FileViewerZoomOutSvg from '@/assets/svg/fileviewer/zoom-out.svg?react';
+import classNames from 'classnames';
+import { downloadAttachment } from '@/utils/file';
+import { useTranslation } from '@/hooks/useTranslation';
+import { appendQueryParam } from '@/utils/parser';
const FileViewer = () => {
- const { fileViewerFile, setFileViewerFile } = useAgentStore();
+ const { t } = useTranslation();
+ const {
+ fileViewerFile,
+ setFileViewerFile,
+ fileViewerMaximized,
+ setFileViewerMaximized,
+ setLastWorkspaceAction,
+ fileViewerSiblings,
+ } = useAgentStore();
+
+ const isImage = (file: E2BFile | FileItem) => {
+ const contentType = (file as E2BFile)?.content_type || (file as FileItem)?.type;
+ return contentType?.startsWith('image/');
+ };
+
+ const allSiblingsAreImages =
+ fileViewerSiblings &&
+ fileViewerSiblings.length > 1 &&
+ fileViewerSiblings.every((file) => isImage(file));
const fileViewerRenderer = () => {
+ if (!fileViewerFile) return null;
+ const fileUrl = fileViewerFile.url;
+ if (!fileUrl) return null;
+
+ // const size = fileViewerFile.size;
+ // Append size=xxx to the URL to invalidate cached content after the model modifies a file.
+ // const url = typeof size === 'number' ? appendQueryParam(fileUrl, 'size', size) : fileUrl;
+ const url = fileUrl;
+
return (
+
+ ) : welcomeScreen ? (
+
+ {typeof welcomeScreen === 'function' ? welcomeScreen({ send, appendText, disabled }) : welcomeScreen}
+
+ ) : previewScreen ? (
+
+
+ ) : startScreen ? (
+
+
+ ) : (
+
+ )}
+
+
-
-
+
-
-
{renderTitle()}
- } onClick={handleDownloadFile} />
- } onClick={handleFileViewerClose} />
+
+
+
-
+
+
+
+
+
+
+ {filename}
+
+
+
+
+ {!fileViewerMaximized && (
+
+ )}
+
+
+
-
);
diff --git a/web/src/components/Agent/Workspace/Controller.tsx b/web/src/components/Agent/Workspace/Controller.tsx
index ef9e2b8..1b67a81 100644
--- a/web/src/components/Agent/Workspace/Controller.tsx
+++ b/web/src/components/Agent/Workspace/Controller.tsx
@@ -8,16 +8,16 @@ import { useTranslation } from '@/hooks/useTranslation';
import './index.less';
const Controller: React.FC<{ onRealTimeChange: (isRealTime: boolean) => void }> = ({ onRealTimeChange }) => {
- // current displayed step
+ // Current Displayed
const [step, setStep] = useState(0);
const { t } = useTranslation();
const { senderSending, workspaceMessages, pipelineTargetMessage, setPipelineTargetMessage } = useAgentStore();
- // total steps
+ // Total steps
const totalSteps = useMemo(() => workspaceMessages.length, [workspaceMessages]);
- // if pipelineTargetMessage is empty or the number of steps in sending is equal to the total number of steps, it is considered to be real-time
+ // IfpipelineTargetMessageis empty or send a medium step to the total step, which is considered real time
const isRealTime = useMemo(
() => !pipelineTargetMessage || (senderSending && step === totalSteps),
[pipelineTargetMessage, senderSending, step, totalSteps],
@@ -31,7 +31,7 @@ const Controller: React.FC<{ onRealTimeChange: (isRealTime: boolean) => void }>
onRealTimeChange(!showRealTime);
}, [showRealTime, onRealTimeChange]);
- // manually jump to the specified step, at this time, pipelineTargetMessage needs to be set
+ // Manually jump to specified step, and this time you need settingspipelineTargetMessage
const manualToStep = useCallback(
(step: number) => {
setStep(step);
@@ -40,7 +40,7 @@ const Controller: React.FC<{ onRealTimeChange: (isRealTime: boolean) => void }>
[setPipelineTargetMessage, workspaceMessages],
);
- // handle the previous step
+ // Deal with previous step
const handlePreStep = useCallback(() => {
const currentStep = step - 1;
if (currentStep > 0) {
@@ -48,12 +48,12 @@ const Controller: React.FC<{ onRealTimeChange: (isRealTime: boolean) => void }>
}
}, [manualToStep, step]);
- // handle the next step
+ // Deal with next steps
const handleNextStep = useCallback(() => {
manualToStep(step + 1 < totalSteps ? step + 1 : totalSteps);
}, [manualToStep, step, totalSteps]);
- // handle step change
+ // Process step changes
const handleStepChange = useCallback(
(value) => {
if (value !== 0) {
@@ -63,20 +63,20 @@ const Controller: React.FC<{ onRealTimeChange: (isRealTime: boolean) => void }>
[manualToStep],
);
- // return to real-time
+ // Return real time
const returnToRealTime = useCallback(() => {
setStep(totalSteps);
setPipelineTargetMessage(null);
}, [setPipelineTargetMessage, totalSteps]);
- // if the current is real-time, when the number of steps changes, jump to the total number of steps
+ // If the current is real time, then jump to the total number of steps when the number of steps changes
useEffect(() => {
if (isRealTime) {
setStep(totalSteps);
}
}, [isRealTime, totalSteps]);
- // if pipelineTargetMessage changes, jump to the corresponding step
+ // IfpipelineTargetMessageChange, jump to the corresponding step
useEffect(() => {
if (pipelineTargetMessage) {
setStep(workspaceMessages.findIndex((message) => message.id === pipelineTargetMessage.id) + 1);
@@ -84,7 +84,7 @@ const Controller: React.FC<{ onRealTimeChange: (isRealTime: boolean) => void }>
}, [pipelineTargetMessage, workspaceMessages]);
return (
- {fileViewerRenderer()}
+
+
{fileViewerRenderer()}
+ {allSiblingsAreImages && fileViewerMaximized && (
+
+ {fileViewerSiblings.map((sibling, idx) => {
+ const isSelected = sibling.url === fileViewerFile.url;
+ return (
+
+ )}
{
+ setLastWorkspaceAction('user');
+ setFileViewerFile(sibling, fileViewerSiblings);
+ }}
+ >
+
+
+ );
+ })}
+
+
{!isRealTime && step !== totalSteps && (
void }>
)}
-
+
}
- style={{ width: 20, padding: 0, fontSize: '20px', color: '#000' }}
+ type="text"
+ icon={
-
- {totalSteps <= 1 && = ({ children }) => (
+ (false);
- const { taskPlan } = useAgentStore();
+ const { taskPlan, setWorkspaceVisible, setLastWorkspaceAction, pipelineMessages, disableWorkspaceRendering } = useAgentStore();
+
+ const isFinish = useMemo(() => {
+ const lastAiMessage = pipelineMessages.findLast((message) => message.role === 'assistant');
+ if (!lastAiMessage) {
+ return false;
+ }
+ return isMessageFinish(lastAiMessage);
+ }, [pipelineMessages]);
const totalSteps = useMemo(() => taskPlan?.length ?? 0, [taskPlan]);
const currentIndex = useMemo(() => {
+ if (isFinish) {
+ return Math.max(0, totalSteps - 1);
+ }
const workingStepIndex = taskPlan?.findLastIndex((item) => item.status === TaskStatus.Running);
if (workingStepIndex !== -1) {
return workingStepIndex;
@@ -35,26 +87,165 @@ const TaskProgress: React.FC = () => {
return completedStepIndex;
}
return 0;
- }, [taskPlan]);
+ }, [isFinish, taskPlan, totalSteps]);
- // use useMemo to cache icon mapping, avoid re-creating every time
- const iconMap = useMemo(
+ // Use useMemo Cache icon map to avoid recreated every rendering
+ const iconMap = useMemo>>(
() => ({
- [TaskStatus.Success]:
+ {totalSteps <= 1 && (
+
-
-
);
diff --git a/web/src/components/Agent/Workspace/TaskProgress.tsx b/web/src/components/Agent/Workspace/TaskProgress.tsx
index 26cb318..1d34808 100644
--- a/web/src/components/Agent/Workspace/TaskProgress.tsx
+++ b/web/src/components/Agent/Workspace/TaskProgress.tsx
@@ -1,31 +1,83 @@
import React, { useMemo, useState } from 'react';
import { useTranslation } from '@/hooks/useTranslation';
-import { CheckOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { useAgentStore } from '@/store';
import { TaskStatus } from '@/types';
import Loading from '@/components/Infra/Loading';
+import { isMessageFinish } from '@/hooks/useChat/utils';
-// extract constants
+// Rip constant
const ICON_STYLES = {
- success: { color: '#4AC90F' },
- default: { fontSize: '12px' },
+ success: { color: '#4AC90F', fontSize: '20px' },
+ default: { fontSize: '20px' },
} as const;
-// extract default number circle component
+// SVG Icons from Frame 1597880295.svg
+const TaskListIcon = () => (
+
+);
+
+const MaximizeIcon = () => (
+
+);
+
+const GreenCheckIcon = () => (
+
+);
+
+// Extracting the default digital circle component
const NumberCircle: React.FC<{ number: number }> = ({ number }) => (
+
+
+
{number}
);
-const TaskProgress: React.FC = () => {
+// Harmonization icon Packaging sizes, avoid differences. SVG/Component size leads to icon-text spacing“Looks different.”
+const TaskIconBox: React.FC{children}
+);
+
+type CompactBehavior = 'toggleList' | 'openWorkspace';
+type CompactExpandedStyle = 'overlay' | 'workspaceCard';
+
+const TaskProgress: React.FC<{
+ variant?: 'default' | 'compact' | 'inputTop';
+ compactBehavior?: CompactBehavior;
+ compactExpandedStyle?: CompactExpandedStyle;
+}> = ({ variant = 'default', compactBehavior = 'toggleList', compactExpandedStyle = 'overlay' }) => {
const { t } = useTranslation();
const [isExpanded, setIsExpanded] = useState
+
+ );
+ }
+
+ if (variant === 'compact') {
+ // Workspace-bottom: expanded card should match the screenshot style
+ if (isExpanded && compactExpandedStyle === 'workspaceCard') {
+ return (
+
+
+
+ {!disableWorkspaceRendering && (
+
+ )}
+
+
+
+
+
+
+ {t('workspace.task.current_progress')}
+ {`${currentIndex + 1}/${totalSteps}`}
+
+
+ {currentTitle ? (
+
+ {iconRender(currentIndex)}
+
+ ) : null}
+ {currentTitle}
+
+
+ );
+ }
+
+ return (
+
+
+
+ {/* Auto height: let content decide height; spacing tuned to match design */}
+ {t('workspace.task.progress')}
+
+
+ {taskPlan?.map((item, index) => (
+
+
+ {iconRender(index)}
+
+ ))}
+ {item.title}
+
+
+ );
+ }
+
return (
+
+
+ {isExpanded && compactExpandedStyle === 'overlay' && (
+
+ {iconRender(currentIndex)}
+
+ {taskPlan?.[currentIndex]?.title}
+
+ {`${currentIndex + 1}/${totalSteps}`}
+
+
+
+
+ )}
+
+ {taskPlan?.map((item, index) => (
+
+
+ {iconRender(index)}
+
+ ))}
+ {item.title}
+ {
{t('workspace.task.progress')}
) : (
();
+ const isWebsitePreview = isWebsitePreviewMessage(renderMessage);
+
const [isRealTime, setIsRealTime] = useState(false);
- const { needTakeOverPhone, innerMessage } = useTakeOverPhone(isRealTime);
+ const [forceShowPhone, setForceShowPhone] = useState(false);
+
+ const { needTakeOverPhone, authInfo, canTakeOverPhone } = useTakeOverPhone(isRealTime);
const workspaceRenderer = (message) => {
- if (needTakeOverPhone) {
+ if (needTakeOverPhone || forceShowPhone) {
+ // Use a stable key so React reuses the cloud phone component while its ID is unchanged.
+ const stableKey = `phone-${authInfo?.user_id}-${authInfo?.instance_no}`;
return (
-
- {iconRender(currentIndex)}
+ {iconRender(currentIndex)}
)}
@@ -93,7 +284,7 @@ const TaskProgress: React.FC = () => {
<>
{taskPlan?.map((item, index) => (
{taskPlan?.at(currentIndex)?.title}
- {iconRender(index)}
+ {iconRender(index)}
))}
diff --git a/web/src/components/Agent/Workspace/index.less b/web/src/components/Agent/Workspace/index.less
index 585d9fb..896537c 100644
--- a/web/src/components/Agent/Workspace/index.less
+++ b/web/src/components/Agent/Workspace/index.less
@@ -1,20 +1,57 @@
.agentx-controller {
.ant-slider {
+ margin: 0;
+ // AntD v6 uses CSS-in-JS; avoid overriding `transform` (it controls X centering).
+ // Use the `translate` property to adjust vertical centering without breaking AntD's transform.
+ padding: 6px 0;
+ width: 100%;
+
+ .ant-slider-rail {
+ background-color: #EAEAEA;
+ height: 4px;
+ top: 50%;
+ translate: 0 -50%;
+ }
+
.ant-slider-track {
- background-color: #2051c9;
- border-radius: 2px;
+ background-color: #2781FF;
+ height: 4px;
+ border-radius: 4px;
+ top: 50%;
+ translate: 0 -50%;
}
- .ant-slider-handle::after {
- background-color: #2051c9;
- outline: 2px solid #ffffff;
- box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.25);
+ .ant-slider-handle {
+ width: 12px;
+ height: 12px;
+ top: 50%;
+ margin-top: 0;
+ translate: 0 -50%;
+
+ &::after {
+ width: 12px;
+ height: 12px;
+ background-color: #2781FF;
+ outline: 2px solid #ffffff;
+ box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
+ inset-inline-start: 0;
+ inset-block-start: 0;
+ }
+
+ &:hover, &:focus {
+ &::after {
+ width: 14px;
+ height: 14px;
+ margin-top: -1px;
+ margin-left: -1px;
+ }
+ }
}
}
.ant-badge.ant-badge-status .ant-badge-status-dot {
- width: 8px;
- height: 8px;
+ width: 6px;
+ height: 6px;
}
.ant-badge.ant-badge-status .ant-badge-status-default {
diff --git a/web/src/components/Agent/Workspace/index.tsx b/web/src/components/Agent/Workspace/index.tsx
index e598307..cdb5b7e 100644
--- a/web/src/components/Agent/Workspace/index.tsx
+++ b/web/src/components/Agent/Workspace/index.tsx
@@ -1,39 +1,66 @@
-import React, { useEffect, useState } from 'react';
-import { Button, Flex, List, Skeleton, Spin, Typography } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, List, Skeleton, Spin } from 'antd';
import { useAgentStore } from '@/store';
import registry from '@/registry';
import Controller from './Controller';
import TaskProgress from './TaskProgress';
-import ZoomOut from '@/assets/png/zoom-out.png';
import notActiveUrl from '@/assets/svg/workspace-not-active.svg';
import { useTranslation } from '@/hooks/useTranslation';
import { MessageToolChunk } from '@/types';
import { ToolIconEmpty } from '@/registry/common/icons';
-import MessageBrief from '@/registry/common/MessageBrief';
import useTakeOverPhone from './useTakeOverPhone';
import { CloudPhone } from '@/components/Infra';
+import { isDevOrTest } from '@/utils';
+import CollapseSvg from '@/assets/svg/collapse.svg?react';
+import { isWebsitePreviewMessage } from '@/registry/website_delivery';
+import classNames from 'classnames';
+import { shouldRenderToolDetailWhilePending } from '@/registry/common/imageTool';
+
+const CollapseIcon = () => ;
const Workspace = () => {
const { t } = useTranslation();
- const { Title } = Typography;
- const { workspaceVisible, setWorkspaceVisible, workspaceMessages, pipelineTargetMessage } = useAgentStore();
+ const {
+ workspaceVisible,
+ setWorkspaceVisible,
+ workspaceMessages,
+ pipelineTargetMessage,
+ previewConfig,
+ rightPanelExternalControl,
+ setLastWorkspaceAction,
+ fileViewerFile,
+ taskPlan,
+ cloudPhoneAuthInfo,
+ autoOpenRightPanel,
+ disableWorkspaceRendering,
+ } = useAgentStore();
const [renderMessage, setRenderMessage] = useState{item.title}
-
);
}
+ // Picture Generation: Need pending/running displays the place of the script (by detailRenderer I'll handle it myself.
+ if (shouldRenderToolDetailWhilePending(message)) {
+ return
+
+ );
+ }
+
+ if (cloudPhoneAuthInfo && message?.type?.startsWith('phone_rpa_')) {
+ // Use exactly the same key Format
+ const stableKey = `phone-${cloudPhoneAuthInfo?.user_id}-${cloudPhoneAuthInfo?.instance_no}`;
+ return (
+
+
);
}
@@ -46,7 +73,7 @@ const Workspace = () => {
}
const Detail = registry.getDetailRenderer(message?.type);
if (message?.type.startsWith('browser')) {
- // browser related, pending also renders sandbox, so handle it yourself
+ // The browser is related,pendingRenderingsandbox，So take care of it.
return
+
(null);
+ useEffect(() => {
+ preMessageId.current = pipelineTargetMessage?.id;
+ }, [pipelineTargetMessage]);
- const renderTitle = () => {
- if (!renderMessage) {
- return null;
+ // Auto Open workspace The logic of the useEffect）
+ useEffect(() => {
+ if (!autoOpenRightPanel || disableWorkspaceRendering) {
+ return;
+ }
+ // If fileViewer Opened, not automatically workspace（(c) Avoiding conflict)
+ if (fileViewerFile) {
+ console.log('[Workspace Auto Open] fileViewer Opened, not automatically workspace');
+ return;
}
- return (
-
-
-
-
- {t('workspace')}
-
- } onClick={handleWorkspaceClose} style={{ fontSize: 20 }} />
-
-
-
-
- {getMessageTypeIcon(renderMessage?.type)}
-
-
-
-
- );
- };
+
+ // If external control is clearly closed, it is not automatically opened (respect for external intent)
+ const externallyClosed = rightPanelExternalControl && previewConfig?.rightPanelVisible === false;
+ if (externallyClosed) {
+ console.log('[Workspace Auto Open] Externally controlled and explicitly closed, not automatically open');
+ return;
+ }
+
+ // If workspace Opened, not processed
+ if (workspaceVisible) {
+ console.log('[Workspace Auto Open] workspace Opened, no automatic opening required');
+ return;
+ }
+
+ if (preMessageId.current === pipelineTargetMessage?.id) {
+ console.log('[Workspace Auto Open] Message unchanged, no automatic opening required');
+ return;
+ }
+
+ // Only users clicked.tool，Just open it.workspace
+ if (pipelineTargetMessage?.type && !!registry.getMessageType(pipelineTargetMessage?.type)?.detailRenderer) {
+ console.log('[Workspace Auto Open] - It\'s hit. tool，Auto Open workspace', {
+ type: pipelineTargetMessage.type,
+ fileViewerFile: !!fileViewerFile,
+ workspaceVisible,
+ });
+ // Record trigger source and update status
+ setLastWorkspaceAction('tool');
+ setWorkspaceVisible(true);
+ }
+ }, [
+ pipelineTargetMessage,
+ setWorkspaceVisible,
+ setLastWorkspaceAction,
+ previewConfig?.rightPanelVisible,
+ rightPanelExternalControl,
+ fileViewerFile,
+ workspaceVisible,
+ autoOpenRightPanel,
+ disableWorkspaceRendering,
+ ]);
+
+ // Show only in the development and test environment
+ const showTakeOver = canTakeOverPhone && isDevOrTest();
return (
workspaceVisible && (
- {renderTitle()}
-
-
- {renderMessage?.detail?.action ||
- renderMessage?.type
+
-
-
+
+ {layoutConfig.headerPosition !== 'inner' && (
+
);
};
diff --git a/web/src/components/Home/Footer/index.tsx b/web/src/components/Home/Footer/index.tsx
new file mode 100644
index 0000000..a2d0382
--- /dev/null
+++ b/web/src/components/Home/Footer/index.tsx
@@ -0,0 +1,73 @@
+import React, { FC, useCallback, useState } from 'react';
+import cn from 'classnames';
+import { listData, EmployeeType } from '../mock';
+import styled from './styled.module.less';
+import AreaSvg from '@/assets/svg/staff/area-icon.svg';
+import { useTranslation } from '@/hooks/useTranslation';
+
+interface FooterProps {
+ onSelect?: (item: EmployeeType) => void;
+}
+
+const Footer: FC = ({ onSelect }) => {
+ const { t } = useTranslation();
+ const [currentItem, setCurrentItem] = useState(null);
+ const onSelectItem = useCallback(
+ (item: EmployeeType) => {
+ setCurrentItem(item);
+ onSelect?.(item);
+ },
+ [onSelect],
+ );
+
+ return (
+ <>
+ = ({ agent }) => {
+ const { t } = useTranslation();
+ const onApply = useCallback(() => {}, []);
+
+ return (
+ = {}) => {
+ return render(
+
+ ,
+ );
+};
+
+describe('Home', () => {
+ it('applies custom layout class names to home, content, and sender containers', () => {
+ const { container } = renderHome({
+ homeClassName: 'custom-home',
+ homeContentClassName: 'custom-content',
+ homeSenderClassName: 'custom-sender',
+ footerNode: ,
+ });
+
+ const home = container.firstElementChild;
+ const content = screen.getByTestId('home-header').parentElement;
+ const sender = screen.getByTestId('mock-sender').parentElement;
+
+ expect(home?.classList.contains('custom-home')).toBe(true);
+ expect(home?.classList.contains('h-full')).toBe(true);
+ expect(home?.classList.contains('py-14')).toBe(false);
+ expect(home?.hasAttribute('style')).toBe(false);
+ expect(content?.classList.contains('custom-content')).toBe(true);
+ expect(content?.classList.contains('max-w-[760px]')).toBe(true);
+ expect(content?.classList.contains('gap-[60px]')).toBe(false);
+ expect(content?.classList.contains('justify-center')).toBe(false);
+ expect(sender?.classList.contains('custom-sender')).toBe(true);
+ expect(sender?.classList.contains('w-full')).toBe(true);
+ expect(screen.getByTestId('home-footer')).toBeTruthy();
+ });
+
+ it('keeps the default home padding and content gap when custom class names are absent', () => {
+ const { container } = renderHome();
+
+ const home = container.firstElementChild;
+ const content = screen.getByTestId('home-header').parentElement;
+
+ expect(home?.classList.contains('py-14')).toBe(true);
+ expect(content?.classList.contains('gap-[60px]')).toBe(true);
+ expect(content?.classList.contains('justify-center')).toBe(true);
+ });
+});
diff --git a/web/src/components/Home/index.tsx b/web/src/components/Home/index.tsx
index 7a714fc..a08dac6 100644
--- a/web/src/components/Home/index.tsx
+++ b/web/src/components/Home/index.tsx
@@ -1,17 +1,85 @@
import React from 'react';
import Sender from '@/components/Agent/Chatbot/Sender';
import Welcome from '@/components/Agent/Chatbot/Welcome';
-import bgUrl from '@/assets/png/bg.png';
+import { ChatTitle, ChatTitleProps } from '@/components/Agent/Chatbot/ChatTitle';
+import { ChatFiles, ChatFilesProps } from '@/components/Agent/Chatbot/ChatFiles';
+import { useAgentStore, useAgentStoreApi } from '@/store';
+import { HeaderNode } from '@/types';
+import classNames from 'classnames';
+
+export interface HomeProps {
+ senderVisible?: boolean;
+ /**
+ * Custom Header Nodes
+ * Two approaches are supported:
+ * 1. Directly in ReactNode
+ * 2. Import render function，Receive AgentX Internal component
+ */
+ headerNode?: HeaderNode;
+ footerNode?: React.ReactNode;
+ menuItems?: {
+ key: string;
+ label: string;
+ icon?: React.ReactNode;
+ }[];
+ showSenderActions?: boolean;
+ homeClassName?: string;
+ homeContentClassName?: string;
+ homeSenderClassName?: string;
+}
+
+const Home: React.FC = ({
+ senderVisible = true,
+ headerNode,
+ footerNode,
+ menuItems,
+ showSenderActions = false,
+ homeClassName,
+ homeContentClassName,
+ homeSenderClassName,
+}) => {
+ const { sessionInfo } = useAgentStore();
+ const storeApi = useAgentStoreApi();
+ const newChat = () => {
+ storeApi.getState().resetStore();
+ };
+ // Render header：Support render props Or render it directly.
+ const renderHeader = () => {
+ if (!headerNode) {
+ return
+ {isWebsitePreview ? (
+ // website preview: only show the tool detail, without the surrounding workspace chrome.
+
)
);
};
diff --git a/web/src/components/Agent/Workspace/useTakeOverPhone.ts b/web/src/components/Agent/Workspace/useTakeOverPhone.ts
index 025f742..f87ebd4 100644
--- a/web/src/components/Agent/Workspace/useTakeOverPhone.ts
+++ b/web/src/components/Agent/Workspace/useTakeOverPhone.ts
@@ -1,48 +1,70 @@
import { isPhoneHIL } from '@/registry/common/useHumanInTheLoop';
import { useAgentStore } from '@/store';
-import { InnerMessageChunk } from '@/types';
+import { CloudPhoneAuthInfo, InnerMessageChunk, UserInputChunk } from '@/types';
import dayjs from 'dayjs';
import { useMemo } from 'react';
const useTakeOverPhone = (isRealTime: boolean) => {
const { pipelineMessages, sessionInfo, chunks } = useAgentStore();
- const innerMessage = useMemo(() => {
- return chunks.findLast((item) => {
- const m = item as InnerMessageChunk;
+ const authInfo: CloudPhoneAuthInfo | null = useMemo(() => {
+ // New Protocol (chunkLoadauth_info）
+ const authChunk = chunks.findLast((item) => {
+ const userInputChunk = item as UserInputChunk;
return (
- m.role === 'inner_message' &&
- m.detail?.access_key &&
- m.detail?.access_secret_key &&
- m.detail?.instance_no &&
- m.detail?.user_id &&
- dayjs(m.detail?.expire_time).isAfter(dayjs())
+ userInputChunk.detail?.interrupt_data?.intervention_info?.auth_info &&
+ dayjs(userInputChunk.detail?.interrupt_data?.intervention_info?.auth_info.expire_time).isAfter(dayjs())
);
});
+ if (authChunk) {
+ return authChunk?.detail?.interrupt_data?.intervention_info?.auth_info;
+ }
+ // Old agreement (historical existence)inner_message）
+ const innerMessageChunk = chunks.findLast((item) => {
+ const chunk = item as InnerMessageChunk;
+ return (
+ chunk.role === 'inner_message' &&
+ chunk.detail?.access_key &&
+ chunk.detail?.access_secret_key &&
+ chunk.detail?.instance_no &&
+ chunk.detail?.user_id &&
+ dayjs(chunk.detail?.expire_time).isAfter(dayjs())
+ );
+ });
+ if (innerMessageChunk) {
+ return {
+ instance_no: innerMessageChunk.detail?.instance_no,
+ access_key: innerMessageChunk.detail?.access_key,
+ access_secret_key: innerMessageChunk.detail?.access_secret_key,
+ user_id: innerMessageChunk.detail?.user_id,
+ expire_time: innerMessageChunk.detail?.expire_time,
+ } as CloudPhoneAuthInfo;
+ }
+ return null;
}, [chunks]);
const needTakeOverPhone = useMemo(() => {
if (sessionInfo?.status === 'ARCHIVED') {
return false;
}
- if (!innerMessage) {
+ if (!authInfo) {
return false;
}
- // find the last message
+ // Found the last message.
const lastMessage = pipelineMessages[pipelineMessages.length - 1];
- // if the last message is assistant, then it may need user operation
+ // If the last message is:assistant，This may require user action
if (lastMessage?.role === 'assistant') {
- // find the message with type user_input in the last message
+ // Found the last messagetypeYesuser_inputMessages
const userInputMessage = lastMessage.messages.find((item) => isPhoneHIL(item));
- // if found, then need user operation
+ // If found, user action is required
if (userInputMessage && isRealTime) {
return true;
}
}
return false;
- }, [sessionInfo?.status, innerMessage, pipelineMessages, isRealTime]);
+ }, [sessionInfo?.status, authInfo, pipelineMessages, isRealTime]);
- return { needTakeOverPhone, innerMessage };
+ return { needTakeOverPhone, authInfo, canTakeOverPhone: !!authInfo };
};
export default useTakeOverPhone;
diff --git a/web/src/components/Agent/index.less b/web/src/components/Agent/index.less
new file mode 100644
index 0000000..daad516
--- /dev/null
+++ b/web/src/components/Agent/index.less
@@ -0,0 +1,76 @@
+.agentx-two-column {
+ /**
+ * Layout requirements:
+ * - left padding: 0 (gap handled by margin)
+ * - right padding: 12px
+ * - chat column: up to 760px
+ * - gap between columns: at least 20px
+ * - small widths: workspace width == chat width
+ * - once chat hits 760px: only gap + workspace width increase
+ */
+ padding-left: 0;
+ padding-right: 12px;
+
+ display: flex;
+ flex: 1 1 auto;
+ min-width: 0;
+ height: 100%;
+
+ /* Base tokens */
+ --agentx-gap-min: 20px;
+ --agentx-chat-max: 760px;
+
+ /**
+ * When viewport is small:
+ * base = (100% - 2 * gapMin) / 2 => chat == workspace
+ * When viewport is large enough:
+ * base caps at chatMax
+ * extra = 100% - (2*chatMax + 2*gapMin)
+ * extra is split between (gap growth) and (workspace growth)
+ * workspace should grow faster than gap
+ */
+ --agentx-base: min(var(--agentx-chat-max), calc((100% - 2 * var(--agentx-gap-min)) / 2));
+ --agentx-extra: max(0px, calc(100% - (2 * var(--agentx-chat-max) + 2 * var(--agentx-gap-min))));
+ /* Growth split for extra width once chat hits max width */
+ --agentx-gap-grow-share: 0.125; /* 12.5% of extra goes to EACH gap (total 25%) */
+ --agentx-workspace-grow-share: calc(1 - 2 * var(--agentx-gap-grow-share)); /* remaining goes to workspace */
+ --agentx-gap: calc(var(--agentx-gap-min) + (var(--agentx-extra) * var(--agentx-gap-grow-share)));
+
+ column-gap: var(--agentx-gap);
+}
+
+.agentx-single-column {
+ /* Workspace hidden: keep left spacing consistent and cap chat width at 760px */
+ padding-left: 20px;
+ padding-right: 12px;
+
+ display: flex;
+ flex: 1 1 auto;
+ min-width: 0;
+ height: 100%;
+ justify-content: center;
+}
+
+.agentx-chat-single {
+ /* Centered, responsive up to 760px */
+ flex: 0 1 760px;
+ width: min(100%, 760px);
+ max-width: 760px;
+ min-width: 0;
+ height: 100%;
+}
+
+.agentx-chat-column {
+ flex: 0 0 var(--agentx-base);
+ min-width: 0;
+ height: 100%;
+ margin-left: var(--agentx-gap);
+}
+
+.agentx-right-column {
+ flex: 0 0 calc(var(--agentx-base) + (var(--agentx-extra) * var(--agentx-workspace-grow-share)));
+ min-width: 0;
+ height: 100%;
+}
+
+
diff --git a/web/src/components/Agent/index.tsx b/web/src/components/Agent/index.tsx
index a00b886..4fe29bc 100644
--- a/web/src/components/Agent/index.tsx
+++ b/web/src/components/Agent/index.tsx
@@ -1,17 +1,119 @@
import React from 'react';
-import { Flex, Layout } from 'antd';
+import { Layout } from 'antd';
import Chatbot from '@/components/Agent/Chatbot';
import Workspace from '@/components/Agent/Workspace';
import FileViewer from '@/components/Agent/FileViewer';
+import classNames from 'classnames';
+import { StartScreenProps } from './Chatbot/StartScreen';
+import { PreviewScreenProps } from './Chatbot/PreviewScreen';
+
+import AgentHeader from './AgentHeader';
+import { useAgentStore } from '@/store';
+
+import './index.less';
+import { AgentxClassNames, AgentxStyles, HeaderNode, WelcomeScreenContext } from '@/types/agentx';
+
+const DEFAULT_CONVERSATION_AREA_BACKGROUND = '#FCFCFC';
+
+const Agent = ({
+ basePath,
+ agentId,
+ sessionId,
+ shareButtonNode,
+ backButtonNode,
+ welcomeScreen,
+ startScreen,
+ previewScreen,
+ menuItems,
+ showSenderActions = false,
+ headerNode,
+ classNames: slotClassNames,
+ styles: slotStyles,
+}: {
+ basePath?: string;
+ agentId?: string;
+ sessionId?: string;
+ shareButtonNode?: React.ReactNode;
+ backButtonNode?: React.ReactNode;
+ welcomeScreen?: React.ReactNode | ((context: WelcomeScreenContext) => React.ReactNode);
+ startScreen?: StartScreenProps;
+ previewScreen?: React.ReactNode | PreviewScreenProps;
+ menuItems?: {
+ key: string;
+ label: string;
+ icon?: React.ReactNode;
+ }[];
+ showSenderActions?: boolean;
+ headerNode?: HeaderNode;
+ classNames?: AgentxClassNames;
+ styles?: AgentxStyles;
+}) => {
+ const { workspaceVisible, fileViewerFile, fileViewerMaximized, disableWorkspaceRendering, layoutConfig } = useAgentStore();
+ // embedded Mode (%1)showWorkspace=false）Do not show right working area
+ const showWorkspace = layoutConfig.showWorkspace;
+
+ // Only show on the right Workspace or FileViewer One of them (one of them)store (Intra- and intra-specific)
+ const rightPanelVisible = showWorkspace && ((!disableWorkspaceRendering && workspaceVisible) || !!fileViewerFile);
+ const useTwoColumnSizing = rightPanelVisible && !fileViewerMaximized;
+ const useSingleChatSizing = !rightPanelVisible && !fileViewerMaximized;
+
+ const chatFlex = fileViewerMaximized ? '0 0 0px' : '1 1 0px';
+ const rightPanelFlex = fileViewerMaximized ? '1 1 0px' : '1 1 0px';
-const Agent = ({ shareButtonNode }: { shareButtonNode?: React.ReactNode }) => {
return (
- {workspaceRenderer(renderMessage)}
+ ) : (
+
+ {/* Card Header */}
+
+ )}
+
+
+
+ {/* Inner Preview Frame */}
+
+
+ }
+ onClick={handleWorkspaceClose}
+ aria-label={t('workspace.collapse')}
+ />
+
+
+
+ {getMessageTypeIcon(renderMessage?.type)}
+
+
+ {renderMessage?.detail?.action || ''}
+
+
+
-
-
+ {/* Inner Frame Subheader */}
+
-
+ {renderMessage?.type
?.split?.('_')
?.map((word) => word?.charAt(0)?.toUpperCase() + word?.slice(1))
- ?.join(' ') ||
- 'Tool'}
+ ?.join(' ') || t('tool')}
+
+
+ {/* Content area */}
+ {workspaceRenderer(renderMessage)}
+
+ {/* Controller Strip */}
+
+
{workspaceRenderer(renderMessage)}
-
+
+ )}
+ = 20px, and after chat hits 760px only gap + workspace grow.
+ 'agentx-two-column': useTwoColumnSizing,
+ // Workspace hidden: cap chat at 760px.
+ 'agentx-single-column': useSingleChatSizing,
+ // If file viewer is active (and not maximized), remove right padding to let it touch the edge
+ '!pr-0': !!fileViewerFile && !fileViewerMaximized,
+ // Preserve existing spacing in other edge modes to avoid regressions.
+ 'px-8': !useTwoColumnSizing && !useSingleChatSizing && !fileViewerFile,
+ })}
+ style={{ backgroundColor: DEFAULT_CONVERSATION_AREA_BACKGROUND, ...slotStyles?.conversationArea }}
+ >
+
+
+
+ {rightPanelVisible && (
+
+ {!disableWorkspaceRendering &&
+ )}
+
+
+ {t('home.cases.title')}
+
+ {listData.map((item: EmployeeType) => (
+
+ onSelectItem(item)}
+ >
+
+ ))}
+
+ 
+
+
+
+ {item.name}
+
+ {item.agent_tools.map((tool, index) => (
+
+
+ 
+ {tool.tool_name}
+
+ ))}
+ {item.desc}
+
+
+
+ 
+ {t('home.core_capability')}
+
+ -
+ {item.desc_items.map((str: string) => (
+
- {str} + ))} +
{t('home.coming_soon')}
+ + ); +}; + +export default Footer; diff --git a/web/src/components/Home/Footer/styled.module.less b/web/src/components/Home/Footer/styled.module.less new file mode 100644 index 0000000..4770758 --- /dev/null +++ b/web/src/components/Home/Footer/styled.module.less @@ -0,0 +1,125 @@ +.staff-section { + width: 100%; + margin-top: 20px; + margin-bottom: 40px; + h2 { + color: #000; + font-size: 20px; + font-weight: 600; + margin-bottom: 24px; + } +} + +.staff-card-wrapper { + min-height: 300px; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 21px; +} + +.staff-card { + min-width: 310px; + width: 100%; + border-radius: 16px; + border: 1px solid #f3f3f3; + outline: 1px solid transparent; + background: #fff; + padding: 24px; + line-height: 24px; + cursor: pointer; + transition: all 0.3s ease-out; + &:hover { + border-color: #91b1ff; + box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.04); + } + &.active { + border: 1px solid #a3beff; + outline-color: #a3beff; + box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.16); + } +} + +.staff-card-header { + img { + width: 72px; + height: 72px; + } + + h3 { + color: #000; + font-size: 20px; + font-weight: 600; + } +} + +.staff-card-label { + padding: 2px 8px 2px 6px; + border-radius: 11px; + border: 1px solid #eaeaea; + color: #999; + font-size: 12px; + img { + width: 14px; + height: 14px; + } +} + +.staff-card-desc { + min-height: 48px; + color: rgba(0, 0, 0, 0.5); + font-size: 14px; + line-height: 24px; +} + +.staff-card-area { + border-radius: 12px; + background: #f6fafe; + padding: 12px; + flex: 1; + ul { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + grid-auto-flow: dense; + li { + white-space: nowrap; + min-width: 0; + max-width: 100%; + overflow-wrap: anywhere; + line-height: 1; + padding-left: 12px; + display: inline-block; + width: fit-content; + &:has(> span:only-child) { + grid-column: span 2; + } + position: relative; + &::before { + content: ''; + width: 5px; + height: 5px; + background: #000; + border-radius: 5px; + display: block; + position: absolute; + left: 0; + top: 4px; + } + } + } +} + +.staff-area-hd { + color: #456cff; + font-size: 12px; + margin-bottom: 10px; +} + +.staff-more { + width: 100%; + text-align: center; + color: rgba(0, 0, 0, 0.5); + + text-align: center; + font-size: 20px; +} diff --git a/web/src/components/Home/Header/index.tsx b/web/src/components/Home/Header/index.tsx new file mode 100644 index 0000000..c3091aa --- /dev/null +++ b/web/src/components/Home/Header/index.tsx @@ -0,0 +1,30 @@ +import React, { FC, useCallback } from 'react'; +import { Button } from 'antd'; +import ApplySvg from '@/assets/svg/staff/apply-icon.svg?react'; +import styled from './styled.module.less'; +import { EmployeeType } from '../mock'; +import { cn } from '@/lib/utils'; +import { useTranslation } from '@/hooks/useTranslation'; + +interface HeaderProps { + agent?: EmployeeType | null; +} + +const Header: FC
+
+ );
+};
+
+export default Header;
diff --git a/web/src/components/Home/Header/styled.module.less b/web/src/components/Home/Header/styled.module.less
new file mode 100644
index 0000000..8fa3fa3
--- /dev/null
+++ b/web/src/components/Home/Header/styled.module.less
@@ -0,0 +1,33 @@
+.staff-header {
+ width: 100%;
+ font-size: 28px;
+ line-height: 36px;
+ font-weight: 400;
+ color: #28263b;
+ h1 {
+ font-size: 48px;
+ line-height: 64px;
+ font-weight: 500;
+ margin-bottom: 12px;
+ }
+}
+
+.staff-apply-btn {
+ width: 166px;
+ height: 60px;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ &,
+ &:hover {
+ color: #fff !important;
+ background: #000 !important;
+ }
+ span {
+ line-height: 1;
+ }
+ svg {
+ width: 30px;
+ height: 30px;
+ }
+}
diff --git a/web/src/components/Home/index.test.tsx b/web/src/components/Home/index.test.tsx
new file mode 100644
index 0000000..50c7a9a
--- /dev/null
+++ b/web/src/components/Home/index.test.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import Home from './index';
+import { AgentStoreProvider } from '@/store';
+
+vi.mock('@/components/Agent/Chatbot/Sender', () => ({
+ default: () => ,
+}));
+
+vi.mock('@/components/Agent/Chatbot/Welcome', () => ({
+ default: () => ,
+}));
+
+vi.mock('@/components/Agent/Chatbot/ChatTitle', () => ({
+ ChatTitle: () => ,
+}));
+
+vi.mock('@/components/Agent/Chatbot/ChatFiles', () => ({
+ ChatFiles: () => ,
+}));
+
+const renderHome = (props: React.ComponentProps
+
+ } onClick={onApply}>
+ {t('home.apply')}
+
+ {agent?.name || t('home.welcome.title')}
+{agent?.desc || t('home.welcome.desc')}
+
- = ({ content }) => {
const ref = useRef(null);
const size = useSize(ref);
+ const { t } = useTranslation();
+
+ const { data, columns, validationError } = useMemo(() => {
+ // Return empty data if content is empty or undefined (no error shown)
+ // This avoids displaying an error while content is loading.
+ if (!content || !content.trim()) {
+ return { data: [], columns: [], validationError: null };
+ }
- const { data, columns } = useMemo(() => {
- if (!content) {
- return { data: [], columns: [] };
+ // Validate the CSV before parsing it.
+ const validation = validateCSV(content);
+ if (!validation.isValid) {
+ console.warn('Invalid CSV:', validation.error);
+ return { data: [], columns: [], validationError: validation.error };
}
try {
- // detect and process BOM (byte order mark)
+ // Detect and remove a byte-order mark (BOM).
let processedContent = content;
if (content.charCodeAt(0) === 0xfeff) {
- // remove UTF-8 BOM
+ // Remove the UTF-8 BOM.
processedContent = content.slice(1);
} else if (content.charCodeAt(0) === 0xfffe) {
- // remove UTF-16 LE BOM
+ // Remove the UTF-16 LE BOM.
processedContent = content.slice(1);
}
- // parse CSV content
+ // Parse the CSV content.
const lines = processedContent.trim().split('\n');
- if (lines.length === 0) {
- return { data: [], columns: [] };
- }
- // parse headers
- const headers = lines[0].split(',').map((header) => header.trim().replace(/^["']|["']$/g, ''));
+ // Parse the header using the same logic as data rows.
+ const headerLine = lines[0];
+ const headers: string[] = [];
+ let headerCurrent = '';
+ let headerInQuotes = false;
- // parse data rows
+ for (let j = 0; j < headerLine.length; j++) {
+ const char = headerLine[j];
+ if (char === '"') {
+ headerInQuotes = !headerInQuotes;
+ } else if (char === ',' && !headerInQuotes) {
+ // headers.push(headerCurrent.trim().replace(/^["']|["']$/g, ''));
+ // Use a default name such as "Column_1" when a header is empty.
+ const finalHeader = headerCurrent.trim().replace(/^["']|["']$/g, '');
+ headers.push(finalHeader || `Column_${headers.length + 1}`);
+ headerCurrent = '';
+ } else {
+ headerCurrent += char;
+ }
+ }
+ const lastHeader = headerCurrent.trim().replace(/^["']|["']$/g, '');
+ headers.push(lastHeader || `Column_${headers.length + 1}`);
+
+ // Parse data rows.
const data: CSVData[] = [];
for (let i = 1; i < lines.length; i++) {
const line = lines[i];
if (!line.trim()) continue;
- // simple CSV parsing, handle commas inside quotes
+ // Handle commas inside quoted values.
const values: string[] = [];
let current = '';
let inQuotes = false;
@@ -62,7 +203,7 @@ const CSVViewer: React.FC = ({ content }) => {
current += char;
}
}
- values.push(current.trim()); // add the last value
+ values.push(current.trim()); // Add Last Value
const row: CSVData = {};
headers.forEach((header, index) => {
@@ -71,38 +212,65 @@ const CSVViewer: React.FC = ({ content }) => {
data.push(row);
}
- // generate table column configuration
+ // Generate the table column configuration.
const tableColumns: ColumnsType = headers.map((header) => ({
title: header,
dataIndex: header,
key: header,
ellipsis: true,
- render: (text: string) => (
-
-
);
diff --git a/web/src/components/Home/mock.ts b/web/src/components/Home/mock.ts
new file mode 100644
index 0000000..93f8a86
--- /dev/null
+++ b/web/src/components/Home/mock.ts
@@ -0,0 +1,145 @@
+import PhoneSvg from '@/assets/svg/staff/phone-icon.svg';
+import SuitCaseSvg from '@/assets/svg/staff/suitcase-icon.svg';
+import Locked from '@/assets//svg/staff/locked.svg';
+
+export interface EmployeeType {
+ id: number;
+ super_employee_id: string;
+ name: string;
+ avatar: string;
+ desc: string;
+ desc_items: string[];
+ status: 'ACTIVE' | 'COMING';
+ created_at: string;
+ updated_at: string;
+ agent_tools: { tool_name: string; tool_avatar: string }[];
+}
+
+export const listData: EmployeeType[] = [
+ {
+ id: 1,
+ super_employee_id: '1',
+ name: 'Travel agent',
+ avatar: Locked,
+ status: 'ACTIVE',
+ desc: 'Helps staff and businesses to quickly complete standardized travel requests and list processes',
+ desc_items: ['Smart planning of the trip', 'Cost budget management', 'Travel policy compliance'],
+ updated_at: '',
+ created_at: '',
+ agent_tools: [
+ {
+ tool_avatar: PhoneSvg,
+ tool_name: 'Cloud cell phone.',
+ },
+ {
+ tool_avatar: SuitCaseSvg,
+ tool_name: 'Code Compiler',
+ },
+ ],
+ },
+ {
+ id: 2,
+ super_employee_id: '2',
+ name: 'Logistics optimizer',
+ avatar: Locked,
+ status: 'ACTIVE',
+ desc: 'Call internal and external data sources and use scientific software for circuit optimization',
+ desc_items: ['Enterprise in-house database', 'External data sources', 'Sandbox Smart Body (AIProgramming)'],
+ updated_at: '',
+ created_at: '',
+ agent_tools: [
+ {
+ tool_avatar: PhoneSvg,
+ tool_name: 'Cloud cell phone.',
+ },
+ {
+ tool_avatar: SuitCaseSvg,
+ tool_name: 'Code Compiler',
+ },
+ ],
+ },
+ {
+ id: 3,
+ super_employee_id: '3',
+ name: 'Patent Engineer',
+ avatar: Locked,
+ status: 'ACTIVE',
+ desc: 'Helps staff and businesses to quickly complete standardized travel requests and list processes',
+ desc_items: ['Patent Retrieval', 'Patent Office database', 'AIWriting (including process)/(Framework)'],
+ updated_at: '',
+ created_at: '',
+ agent_tools: [
+ {
+ tool_avatar: PhoneSvg,
+ tool_name: 'Cloud cell phone.',
+ },
+ {
+ tool_avatar: SuitCaseSvg,
+ tool_name: 'Code Compiler',
+ },
+ ],
+ },
+ {
+ id: 4,
+ super_employee_id: '4',
+ name: 'Recruitment Commissioner',
+ avatar: Locked,
+ status: 'ACTIVE',
+ desc: 'Call internal and external data sources and use scientific software for circuit optimization',
+ desc_items: ['Enterprise in-house database', 'External data sources', 'Sandbox Smart Body (AIProgramming)'],
+ updated_at: '',
+ created_at: '',
+ agent_tools: [
+ {
+ tool_avatar: PhoneSvg,
+ tool_name: 'Cloud cell phone.',
+ },
+ {
+ tool_avatar: SuitCaseSvg,
+ tool_name: 'Code Compiler',
+ },
+ ],
+ },
+ {
+ id: 5,
+ super_employee_id: '5',
+ name: 'Assistant to the Chief of the Shop',
+ avatar: Locked,
+ status: 'ACTIVE',
+ desc: 'Call internal and external data sources and use scientific software for circuit optimization',
+ desc_items: ['Enterprise in-house database', 'External data sources', 'Sandbox Smart Body (AIProgramming)'],
+ updated_at: '',
+ created_at: '',
+ agent_tools: [
+ {
+ tool_avatar: PhoneSvg,
+ tool_name: 'Cloud cell phone.',
+ },
+ {
+ tool_avatar: SuitCaseSvg,
+ tool_name: 'Code Compiler',
+ },
+ ],
+ },
+ {
+ id: 6,
+ super_employee_id: '6',
+ name: 'Insurance agent',
+ avatar: Locked,
+ status: 'COMING',
+ desc: 'Call internal and external data sources and use scientific software for circuit optimization',
+ desc_items: ['Enterprise in-house database', 'External data sources', 'Sandbox Smart Body (AIProgramming)'],
+ updated_at: '',
+ created_at: '',
+ agent_tools: [
+ {
+ tool_avatar: PhoneSvg,
+ tool_name: 'Cloud cell phone.',
+ },
+ {
+ tool_avatar: SuitCaseSvg,
+ tool_name: 'Code Compiler',
+ },
+ ],
+ },
+];
diff --git a/web/src/components/Infra/CSVViewer/index.tsx b/web/src/components/Infra/CSVViewer/index.tsx
index 504b82e..5c05ddf 100644
--- a/web/src/components/Infra/CSVViewer/index.tsx
+++ b/web/src/components/Infra/CSVViewer/index.tsx
@@ -2,6 +2,7 @@ import React, { useMemo, useRef } from 'react';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useSize } from 'ahooks';
+import { getTranslation, useTranslation } from '@/hooks/useTranslation';
interface CSVViewerProps {
content: string;
@@ -11,42 +12,182 @@ interface CSVData {
[key: string]: string;
}
+interface CSVValidationResult {
+ isValid: boolean;
+ error?: string;
+}
+
+// Validate the CSV format.
+const validateCSV = (content: string): CSVValidationResult => {
+ if (!content || !content.trim()) {
+ return { isValid: false, error: getTranslation('csv.error.empty') };
+ }
+
+ try {
+ // Detect and remove a byte-order mark (BOM).
+ let processedContent = content;
+ if (content.charCodeAt(0) === 0xfeff) {
+ processedContent = content.slice(1);
+ } else if (content.charCodeAt(0) === 0xfffe) {
+ processedContent = content.slice(1);
+ }
+
+ const lines = processedContent.trim().split('\n');
+
+ // At least one header row is required.
+ if (lines.length < 1) {
+ return { isValid: false, error: getTranslation('csv.error.missing_header') };
+ }
+
+ // The header row must not be empty.
+ const headerLine = lines[0].trim();
+ if (!headerLine) {
+ return { isValid: false, error: getTranslation('csv.error.empty_header') };
+ }
+
+ // Count the header columns.
+ const headers: string[] = [];
+ let current = '';
+ let inQuotes = false;
+
+ for (let j = 0; j < headerLine.length; j++) {
+ const char = headerLine[j];
+ if (char === '"') {
+ inQuotes = !inQuotes;
+ } else if (char === ',' && !inQuotes) {
+ headers.push(current.trim());
+ current = '';
+ } else {
+ current += char;
+ }
+ }
+ headers.push(current.trim());
+
+ const expectedColumnCount = headers.length;
+
+ // At least one column is required.
+ if (expectedColumnCount === 0) {
+ return { isValid: false, error: getTranslation('csv.error.zero_columns') };
+ }
+
+ // Check for at least one valid data row.
+ let validDataRowCount = 0;
+ for (let i = 1; i < lines.length; i++) {
+ const line = lines[i].trim();
+ if (!line) continue;
+
+ // Count the columns in this row.
+ const values: string[] = [];
+ let cellCurrent = '';
+ let cellInQuotes = false;
+
+ for (let j = 0; j < line.length; j++) {
+ const char = line[j];
+ if (char === '"') {
+ cellInQuotes = !cellInQuotes;
+ } else if (char === ',' && !cellInQuotes) {
+ values.push(cellCurrent.trim());
+ cellCurrent = '';
+ } else {
+ cellCurrent += char;
+ }
+ }
+ values.push(cellCurrent.trim());
+
+ // Check that this row matches the header column count.
+ if (values.length !== expectedColumnCount) {
+ return {
+ isValid: false,
+ error: getTranslation('csv.error.column_mismatch', {
+ row: i + 1,
+ expected: expectedColumnCount,
+ actual: values.length,
+ }),
+ };
+ }
+
+ validDataRowCount++;
+ }
+
+ // At least one data row is required in addition to the header.
+ if (validDataRowCount === 0) {
+ return { isValid: false, error: getTranslation('csv.error.no_data') };
+ }
+
+ return { isValid: true };
+ } catch (error) {
+ return {
+ isValid: false,
+ error: getTranslation('csv.error.validation_failed', {
+ message: error instanceof Error ? error.message : getTranslation('csv.error.unknown'),
+ }),
+ };
+ }
+};
+
const CSVViewer: React.FC
+ {renderHeader()}
+ {senderVisible && (
+
+
+ )}
+ {footerNode ? footerNode : null}
- {text}
+ render: (text: unknown) => (
+
Object.values(record).join('-')}
columns={columns}
dataSource={data}
- pagination={{
- pageSize: 20,
- showSizeChanger: true,
- showQuickJumper: true,
+ virtual
+ pagination={false}
+ scroll={{
+ x: Math.max(columns.length * 160, size?.width ?? 0),
+ y: size?.height ? size.height - 60 : 600,
}}
- scroll={{ x: 'max-content', y: size?.height ? size.height - 100 : '100%' }}
className="h-full"
size="small"
bordered
diff --git a/web/src/components/Infra/CloudPhone/index.tsx b/web/src/components/Infra/CloudPhone/index.tsx
index b6a2f1c..0bdca14 100644
--- a/web/src/components/Infra/CloudPhone/index.tsx
+++ b/web/src/components/Infra/CloudPhone/index.tsx
@@ -5,41 +5,43 @@ import { isFunction, set } from 'lodash-es';
import phoneBgTopUrl from '@/assets/svg/phone-bg-top.svg';
import phoneBgBottomUrl from '@/assets/svg/phone-bg-bottom.svg';
import phoneHighlightUrl from '@/assets/png/phone-highlight.png';
+import { CloudPhoneAuthInfo } from '@/types';
+import { useTranslation } from '@/hooks/useTranslation';
-// dynamically load NzCp SDK
+// Dynamic Load NzCp SDK
const loadNzCpSDK = (): Promise
+ {String(text ?? '')}
),
}));
- return { data, columns: tableColumns };
+ return { data, columns: tableColumns, validationError: null };
} catch (error) {
console.error('CSV parsing error:', error);
- return { data: [], columns: [] };
+ return {
+ data: [],
+ columns: [],
+ validationError: error instanceof Error ? error.message : getTranslation('csv.error.unknown'),
+ };
}
}, [content]);
+ // Display an error when CSV validation fails.
+ if (validationError) {
+ return (
+
+
+ );
+ }
+
+ // Show the empty state when there is no data.
+ if (data.length === 0) {
+ return (
+
+
+ ❌ {t('csv.format_error')}
+ {validationError}
+
+
+ );
+ }
+
return (
+
+ {t('csv.no_data')}
+