feat: replace Drawer with Modal in AiAgentWidget and enhance styles for better UI

2026-05-30 12:39:52 +08:00 · 2026-01-16 15:05:53 +08:00
parent 1d66fb56c8
commit d6eb6e1605
2 changed files with 141 additions and 59 deletions
--- a/web/src/components/AiAgentWidget.tsx
+++ b/web/src/components/AiAgentWidget.tsx
@@ -1,8 +1,8 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Avatar, Button, Divider, Drawer, Flex, Input, List, Space, Switch, Tag, Typography, message, theme } from 'antd';
-import { RobotOutlined, SendOutlined, FolderOpenOutlined, DeleteOutlined, ToolOutlined, DownOutlined, UpOutlined, CodeOutlined, CopyOutlined, LoadingOutlined } from '@ant-design/icons';
+import { Avatar, Button, Divider, Flex, Input, List, Modal, Space, Switch, Tag, Typography, message, theme } from 'antd';
+import { RobotOutlined, SendOutlined, DeleteOutlined, ToolOutlined, DownOutlined, UpOutlined, CodeOutlined, CopyOutlined, LoadingOutlined } from '@ant-design/icons';
 import ReactMarkdown from 'react-markdown';
-import PathSelectorModal from './PathSelectorModal';
+import type { TextAreaRef } from 'antd/es/input/TextArea';
 import { agentApi, type AgentChatMessage, type PendingToolCall } from '../api/agent';
 import { useI18n } from '../i18n';
 import '../styles/ai-agent.css';
@@ -68,11 +68,11 @@ const AiAgentWidget = memo(function AiAgentWidget({ currentPath, open, onOpenCha
  const [loading, setLoading] = useState(false);
  const [messages, setMessages] = useState<AgentChatMessage[]>([]);
  const [pending, setPending] = useState<PendingToolCall[]>([]);
-  const [pathModalOpen, setPathModalOpen] = useState(false);
  const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>({});
  const [expandedRaw, setExpandedRaw] = useState<Record<string, boolean>>({});
  const [runningTools, setRunningTools] = useState<Record<string, string>>({});
  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<TextAreaRef | null>(null);
  const streamControllerRef = useRef<AbortController | null>(null);
  const streamSeqRef = useRef(0);
  const baseMessagesRef = useRef<AgentChatMessage[]>([]);
@@ -93,6 +93,14 @@ const AiAgentWidget = memo(function AiAgentWidget({ currentPath, open, onOpenCha
    return () => window.clearTimeout(t);
  }, [messages, open, pending, scrollToBottom]);

+  useEffect(() => {
+    if (!open || loading || pending.length > 0) return;
+    const t = window.setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+    return () => window.clearTimeout(t);
+  }, [open, loading, messages.length, pending.length]);
+
  useEffect(() => {
    return () => {
      streamControllerRef.current?.abort();
@@ -296,12 +304,6 @@ const AiAgentWidget = memo(function AiAgentWidget({ currentPath, open, onOpenCha
    await runStream({ messages, rejected_tool_call_ids: ids });
  }, [messages, pending, runStream]);

-  const handlePathSelected = useCallback((path: string) => {
-    const p = normalizePath(path) || '/';
-    setInput((prev) => (prev.trim() ? `${prev.trim()} ${p}` : p));
-    setPathModalOpen(false);
-  }, []);
-
  const messageItems = useMemo(() => {
    return messages.filter((m) => {
      if (!m || typeof m !== 'object') return false;
@@ -650,36 +652,44 @@ const AiAgentWidget = memo(function AiAgentWidget({ currentPath, open, onOpenCha

  return (
    <>
-      <Drawer
-        title={t('AI Agent')}
+      <Modal
+        title={(
+          <Flex align="center" justify="space-between" gap={12} wrap>
+            <Text strong>{t('AI Agent')}</Text>
+            <Space align="center">
+              <Text type="secondary">{t('Auto execute')}</Text>
+              <Switch size="small" checked={autoExecute} onChange={setAutoExecute} />
+              <Button
+                type="text"
+                size="small"
+                icon={<DeleteOutlined />}
+                onClick={clearChat}
+                disabled={loading || messageItems.length === 0}
+              >
+                {t('Clear')}
+              </Button>
+            </Space>
+          </Flex>
+        )}
        open={open}
-        onClose={() => { streamControllerRef.current?.abort(); onOpenChange(false); }}
-        width={520}
-        mask={false}
+        onCancel={() => { streamControllerRef.current?.abort(); onOpenChange(false); }}
+        width={720}
+        centered
+        closable={false}
        destroyOnHidden
+        footer={null}
        styles={{
          body: {
            padding: 8,
            background: token.colorBgContainer,
+            height: '70vh',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
          },
        }}
-        extra={
-          <Space align="center">
-            <Text type="secondary">{t('Auto execute')}</Text>
-            <Switch size="small" checked={autoExecute} onChange={setAutoExecute} />
-            <Button
-              type="text"
-              size="small"
-              icon={<DeleteOutlined />}
-              onClick={clearChat}
-              disabled={loading || messageItems.length === 0}
-            >
-              {t('Clear')}
-            </Button>
-          </Space>
-        }
      >
-        <Flex vertical gap={0} style={{ height: '100%' }} className="fx-agent-container">
+        <Flex vertical gap={0} style={{ flex: 1, minHeight: 0 }} className="fx-agent-container">
          <div
            ref={scrollRef}
            className="fx-agent-chat-scroll"
@@ -880,19 +890,18 @@ const AiAgentWidget = memo(function AiAgentWidget({ currentPath, open, onOpenCha
          <div className="fx-agent-composer">
            <Flex vertical gap={8}>
              <Space wrap>
-                <Button size="small" icon={<FolderOpenOutlined />} onClick={() => setPathModalOpen(true)} disabled={loading}>
-                  {t('Select Path')}
-                </Button>
                {effectivePath && (
                  <Tag bordered={false} color="blue">{t('Current')}: {effectivePath}</Tag>
                )}
              </Space>

              <Input.TextArea
+                ref={inputRef}
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder={t('Type a message')}
                autoSize={{ minRows: 2, maxRows: 6 }}
+                autoFocus
                disabled={loading || pending.length > 0}
                variant="borderless"
                onPressEnter={(e) => {
@@ -916,15 +925,7 @@ const AiAgentWidget = memo(function AiAgentWidget({ currentPath, open, onOpenCha
            </Flex>
          </div>
        </Flex>
-      </Drawer>
-
-      <PathSelectorModal
-        open={pathModalOpen}
-        mode="any"
-        initialPath={effectivePath || '/'}
-        onOk={handlePathSelected}
-        onCancel={() => setPathModalOpen(false)}
-      />
+      </Modal>
    </>
  );
 });
--- a/web/src/styles/ai-agent.css
+++ b/web/src/styles/ai-agent.css
@@ -5,7 +5,7 @@
 .fx-agent-chat-scroll {
  flex: 1;
  overflow-y: auto;
-  padding: 0;
+  padding: 8px 4px 12px;
  border-radius: 0;
  background: transparent;
  border: 0;
@@ -54,8 +54,12 @@
 }

 .fx-agent-assistant-block {
-  max-width: 100%;
-  padding: 2px 2px;
+  max-width: 92%;
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid var(--ant-color-border-secondary);
+  background: var(--ant-color-bg-container);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
 }

 .fx-agent-tool-block {
@@ -75,9 +79,11 @@
 }

 .fx-agent-content {
-  font-size: 13px;
-  line-height: 1.75;
+  font-size: 14px;
+  line-height: 1.7;
  word-break: break-word;
+  overflow-wrap: anywhere;
+  color: var(--ant-color-text);
 }

 .fx-agent-tool-pills .ant-tag {
@@ -122,19 +128,58 @@
 }

 .fx-agent-md p {
-  margin: 0 0 0.5em;
+  margin: 0 0 0.65em;
+  white-space: pre-wrap;
 }

 .fx-agent-md p:last-child {
  margin-bottom: 0;
 }

+.fx-agent-md > :first-child {
+  margin-top: 0;
+}
+
+.fx-agent-md > :last-child {
+  margin-bottom: 0;
+}
+
+.fx-agent-md h1,
+.fx-agent-md h2,
+.fx-agent-md h3,
+.fx-agent-md h4 {
+  margin: 0.9em 0 0.4em;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.fx-agent-md h1 {
+  font-size: 18px;
+}
+
+.fx-agent-md h2 {
+  font-size: 16px;
+}
+
+.fx-agent-md h3 {
+  font-size: 15px;
+}
+
+.fx-agent-md h4 {
+  font-size: 14px;
+}
+
 .fx-agent-md ul,
 .fx-agent-md ol {
-  margin: 0 0 0.5em;
+  margin: 0 0 0.65em;
  padding-left: 1.2em;
 }

+.fx-agent-md li {
+  margin-bottom: 0.35em;
+  white-space: pre-wrap;
+}
+
 .fx-agent-md code {
  padding: 1px 6px;
  border-radius: 6px;
@@ -145,12 +190,13 @@
 }

 .fx-agent-md pre {
-  margin: 0 0 0.5em;
-  padding: 8px 10px;
+  margin: 0 0 0.65em;
+  padding: 10px 12px;
  border-radius: 10px;
-  background: var(--ant-color-bg-container);
+  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--ant-color-border-secondary);
  overflow: auto;
+  white-space: pre;
 }

 .fx-agent-md pre code {
@@ -158,19 +204,54 @@
  padding: 0;
  border: 0;
  background: transparent;
-  font-size: 11px;
-  line-height: 1.55;
+  font-size: 12px;
+  line-height: 1.6;
 }

 .fx-agent-md blockquote {
-  margin: 0 0 0.65em;
-  padding: 0 0 0 10px;
+  margin: 0 0 0.7em;
+  padding: 6px 10px;
+  border-radius: 8px;
  border-left: 3px solid var(--ant-color-border);
+  background: rgba(0, 0, 0, 0.03);
  color: var(--ant-color-text-tertiary);
 }

 .fx-agent-md a {
  color: var(--ant-color-primary);
+  text-decoration: underline;
+}
+
+.fx-agent-md hr {
+  margin: 0.8em 0;
+  border: 0;
+  border-top: 1px solid var(--ant-color-border-secondary);
+}
+
+.fx-agent-md img {
+  max-width: 100%;
+  border-radius: 8px;
+  border: 1px solid var(--ant-color-border-secondary);
+}
+
+.fx-agent-md table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0 0 0.8em;
+  font-size: 13px;
+}
+
+.fx-agent-md th,
+.fx-agent-md td {
+  padding: 6px 8px;
+  border: 1px solid var(--ant-color-border-secondary);
+  text-align: left;
+  vertical-align: top;
+}
+
+.fx-agent-md thead th {
+  background: rgba(0, 0, 0, 0.04);
+  font-weight: 600;
 }

 .fx-agent-tool-details {
@@ -228,8 +309,8 @@
 }

 .fx-agent-composer .ant-input {
-  font-size: 12px;
-  line-height: 1.6;
+  font-size: 14px;
+  line-height: 1.7;
 }

 .fx-agent-running {