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

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 { Avatar, Button, Divider, Flex, Input, List, Modal, Space, Switch, Tag, Typography, message, theme } from 'antd';
-import { RobotOutlined, SendOutlined, FolderOpenOutlined, DeleteOutlined, ToolOutlined, DownOutlined, UpOutlined, CodeOutlined, CopyOutlined, LoadingOutlined } from '@ant-design/icons';
+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
+      <Modal
-        title={t('AI Agent')}
+        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); }}
+        onCancel={() => { streamControllerRef.current?.abort(); onOpenChange(false); }}
-        width={520}
+        width={720}
-        mask={false}
+        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>
+      </Modal>
-
-      <PathSelectorModal
-        open={pathModalOpen}
-        mode="any"
-        initialPath={effectivePath || '/'}
-        onOk={handlePathSelected}
-        onCancel={() => setPathModalOpen(false)}
-      />
     </>
   );
 });

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%;
+  max-width: 92%;
-  padding: 2px 2px;
+  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;
+  font-size: 14px;
-  line-height: 1.75;
+  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;
+  margin: 0 0 0.65em;
-  padding: 8px 10px;
+  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;
+  font-size: 12px;
-  line-height: 1.55;
+  line-height: 1.6;
 }
 
 .fx-agent-md blockquote {
-  margin: 0 0 0.65em;
+  margin: 0 0 0.7em;
-  padding: 0 0 0 10px;
+  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;
+  font-size: 14px;
-  line-height: 1.6;
+  line-height: 1.7;
 }
 
 .fx-agent-running {