@opensumi/ide-ai-native 3.7.2-next-1740107209.0 → 3.7.2-next-1740365741.0

package/src/browser/chat/chat-model.ts

@@ -80,9 +80,29 @@ export class ChatResponseModel extends Disposable {
     return this.#onDidChange.event;
   }
 
-  constructor(requestId: string, public readonly session: IChatModel, public readonly agentId: string) {
+  constructor(
+    requestId: string,
+    public readonly session: IChatModel,
+    public readonly agentId: string,
+    initParams?: {
+      isComplete: boolean;
+      isCanceled: boolean;
+      responseContents: IChatProgressResponseContent[];
+      responseText: string;
+      errorDetails: IChatResponseErrorDetails | undefined;
+      followups: IChatFollowup[] | undefined;
+    },
+  ) {
     super();
     this.#requestId = requestId;
+    if (initParams) {
+      this.#responseContents = initParams.responseContents;
+      this.#responseText = initParams.responseText;
+      this.#isComplete = initParams.isComplete;
+      this.#isCanceled = initParams.isCanceled;
+      this.#errorDetails = initParams.errorDetails;
+      this.#followups = initParams.followups;
+    }
   }
 
   updateContent(progress: IChatProgress, quiet?: boolean): void {
@@ -215,6 +235,16 @@ export class ChatResponseModel extends Disposable {
     this.#followups = followups;
     this.#onDidChange.fire();
   }
+
+  toJSON() {
+    return {
+      isCanceled: this.isCanceled,
+      responseContents: this.responseContents,
+      responseText: this.responseText,
+      errorDetails: this.errorDetails,
+      followups: this.followups,
+    };
+  }
 }
 
 export class ChatRequestModel implements IChatRequestModel {
@@ -231,19 +261,29 @@ export class ChatRequestModel implements IChatRequestModel {
   ) {
     this.#requestId = requestId;
   }
+
+  toJSON() {
+    return {
+      requestId: this.requestId,
+      message: this.message,
+      response: this.response,
+    };
+  }
 }
 
-@Injectable({ multiple: true })
 export class ChatModel extends Disposable implements IChatModel {
   private static requestIdPool = 0;
 
-  @Autowired(ILogger)
-  protected readonly logger: ILogger;
-
-  @Autowired(INJECTOR_TOKEN)
-  injector: Injector;
+  constructor(initParams?: { sessionId?: string; history?: MsgHistoryManager; requests?: ChatRequestModel[] }) {
+    super();
+    this.#sessionId = initParams?.sessionId ?? uuid();
+    this.history = initParams?.history ?? new MsgHistoryManager();
+    if (initParams?.requests) {
+      this.#requests = new Map(initParams.requests.map((r) => [r.requestId, r]));
+    }
+  }
 
-  #sessionId: string = uuid();
+  #sessionId: string;
   get sessionId(): string {
     return this.#sessionId;
   }
@@ -253,11 +293,12 @@ export class ChatModel extends Disposable implements IChatModel {
     return Array.from(this.#requests.values());
   }
 
-  @memoize
-  get history(): MsgHistoryManager {
-    return this.injector.get(MsgHistoryManager, []);
+  restoreRequests(requests: ChatRequestModel[]): void {
+    this.#requests = new Map(requests.map((r) => [r.requestId, r]));
   }
 
+  readonly history: MsgHistoryManager;
+
   addRequest(message: IChatRequestMessage): ChatRequestModel {
     const requestId = `${this.sessionId}_request_${ChatModel.requestIdPool++}`;
     const response = new ChatResponseModel(requestId, this, message.agentId);
@@ -279,7 +320,8 @@ export class ChatModel extends Disposable implements IChatModel {
     if (basicKind.includes(kind)) {
       request.response.updateContent(progress, quiet);
     } else {
-      this.logger.error(`Couldn't handle progress: ${JSON.stringify(progress)}`);
+      // eslint-disable-next-line no-console
+      console.error(`Couldn't handle progress: ${JSON.stringify(progress)}`);
     }
   }
 
@@ -291,6 +333,14 @@ export class ChatModel extends Disposable implements IChatModel {
     super.dispose();
     this.#requests.forEach((r) => r.response.dispose());
   }
+
+  toJSON() {
+    return {
+      sessionId: this.sessionId,
+      history: this.history,
+      requests: this.requests,
+    };
+  }
 }
 
 @Injectable({ multiple: true })

package/src/browser/chat/chat-proxy.service.ts

@@ -39,7 +39,7 @@ import { ChatFeatureRegistry } from './chat.feature.registry';
 @Injectable()
 export class ChatProxyService extends Disposable {
   // 避免和插件注册的 agent id 冲突
-  static readonly AGENT_ID = 'Default_Chat_Agent_' + uuid(6);
+  static readonly AGENT_ID = 'Default_Chat_Agent';
 
   @Autowired(IChatAgentService)
   private readonly chatAgentService: IChatAgentService;

package/src/browser/chat/chat.internal.service.ts

@@ -43,9 +43,15 @@ export class ChatInternalService extends Disposable {
     return this.#sessionModel;
   }
 
-  constructor() {
-    super();
-    this.#sessionModel = this.chatManagerService.startSession();
+  init() {
+    this.chatManagerService.onStorageInit(() => {
+      const sessions = this.chatManagerService.getSessions();
+      if (sessions.length > 0) {
+        this.activateSession(sessions[sessions.length - 1].sessionId);
+      } else {
+        this.createSessionModel();
+      }
+    });
   }
 
   public setLatestRequestId(id: string): void {
@@ -70,12 +76,24 @@ export class ChatInternalService extends Disposable {
     this._onCancelRequest.fire();
   }
 
-  clearSessionModel() {
-    this.chatManagerService.clearSession(this.#sessionModel.sessionId);
+  createSessionModel() {
     this.#sessionModel = this.chatManagerService.startSession();
     this._onChangeSession.fire(this.#sessionModel.sessionId);
   }
 
+  clearSessionModel(sessionId?: string) {
+    sessionId = sessionId || this.#sessionModel.sessionId;
+    this.chatManagerService.clearSession(sessionId);
+    if (sessionId === this.#sessionModel.sessionId) {
+      this.#sessionModel = this.chatManagerService.startSession();
+    }
+    this._onChangeSession.fire(this.#sessionModel.sessionId);
+  }
+
+  getSessions() {
+    return this.chatManagerService.getSessions();
+  }
+
   activateSession(sessionId: string) {
     const targetSession = this.chatManagerService.getSession(sessionId);
     if (!targetSession) {

package/src/browser/chat/chat.module.less

@@ -4,7 +4,7 @@
   height: 100%;
   border-radius: 12px;
   overflow: hidden;
-  font-size: 14px;
+  font-size: 12px;
   user-select: text;
 
   border-top-left-radius: 12px;
@@ -75,53 +75,14 @@
 
   .header_container {
     height: 36px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 0 12px 16px;
+    padding: 8px 8px 8px 16px;
     box-sizing: border-box;
     background-color: var(--editorGroupHeader-tabsBackground);
     user-select: none;
 
-    .left {
+    .header {
       display: flex;
       align-items: center;
-      height: 16px;
-      color: var(--design-title-foreground);
-      font-size: 12px;
-
-      .ai_avatar_icon {
-        width: 18px;
-        height: 18px;
-      }
-
-      .avatar_icon_normal {
-        width: 18px;
-        height: 18px;
-        font-size: 14px !important;
-      }
-
-      & > * {
-        margin-right: 8px;
-      }
-    }
-
-    .right {
-      display: flex;
-      align-items: center;
-      padding-right: 10px;
-      .popover_icon {
-        margin-left: 2px;
-      }
-
-      .action_btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 22px;
-        height: 22px;
-        padding: 0;
-      }
     }
   }
 
@@ -317,3 +278,8 @@
     }
   }
 }
+
+.chat_history {
+  width: calc(100% - 60px);
+  color: var(--design-text-foreground);
+}

package/src/browser/chat/chat.view.tsx

@@ -21,6 +21,7 @@ import {
   ChatRenderRegistryToken,
   ChatServiceToken,
   Disposable,
+  DisposableCollection,
   IAIReporter,
   IChatComponent,
   IChatContent,
@@ -43,6 +44,7 @@ import { LLMContextService, LLMContextServiceToken } from '../../common/llm-cont
 import { ChatAgentPromptProvider } from '../../common/prompts/context-prompt-provider';
 import { ChatContext } from '../components/ChatContext';
 import { CodeBlockWrapperInput } from '../components/ChatEditor';
+import ChatHistory, { IChatHistoryItem } from '../components/ChatHistory';
 import { ChatInput } from '../components/ChatInput';
 import { ChatMarkdown } from '../components/ChatMarkdown';
 import { ChatNotify, ChatReply } from '../components/ChatReply';
@@ -67,6 +69,8 @@ interface TDispatchAction {
   payload?: MessageData[];
 }
 
+const MAX_TITLE_LENGTH = 100;
+
 export const AIChatView = () => {
   const aiChatService = useInjectable<ChatInternalService>(IChatInternalService);
   const chatApiService = useInjectable<ChatService>(ChatServiceToken);
@@ -78,12 +82,9 @@ export const AIChatView = () => {
   const promptProvider = useInjectable<ChatAgentPromptProvider>(ChatAgentPromptProvider);
 
   const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
-  const mcpServerProxyService = useInjectable<MCPServerProxyService>(TokenMCPServerProxyService);
   const msgHistoryManager = aiChatService.sessionModel.history;
   const containerRef = React.useRef<HTMLDivElement>(null);
   const chatInputRef = React.useRef<{ setInputValue: (v: string) => void } | null>(null);
-  const dialogService = useInjectable<IDialogService>(IDialogService);
-  const aiNativeConfigService = useInjectable<AINativeConfigService>(AINativeConfigService);
 
   const [shortcutCommands, setShortcutCommands] = React.useState<ChatSlashCommandItemModel[]>([]);
 
@@ -105,7 +106,6 @@ export const AIChatView = () => {
   const [defaultAgentId, setDefaultAgentId] = React.useState<string>('');
   const [command, setCommand] = React.useState('');
   const [theme, setTheme] = React.useState<string | null>(null);
-  const [mcpToolsCount, setMcpToolsCount] = React.useState<number>(0);
 
   React.useEffect(() => {
     const featureSlashCommands = chatFeatureRegistry.getAllShortcutSlashCommand();
@@ -448,7 +448,9 @@ export const AIChatView = () => {
               setLoading(false);
             }}
             onRegenerate={() => {
-              aiChatService.sendRequest(request, true);
+              if (request) {
+                aiChatService.sendRequest(request, true);
+              }
             }}
             msgId={msgId}
           />
@@ -611,7 +613,8 @@ export const AIChatView = () => {
           });
         } else if (msg.role === ChatMessageRole.Assistant && msg.requestId) {
           const request = aiChatService.sessionModel.getRequest(msg.requestId)!;
-          if (!request.response.isComplete) {
+          // 从storage恢复时，request为undefined
+          if (request && !request.response.isComplete) {
             setLoading(true);
           }
           await renderReply({
@@ -621,7 +624,7 @@ export const AIChatView = () => {
             agentId: msg.agentId,
             command: msg.agentCommand,
             startTime: msg.replyStartTime!,
-            request: aiChatService.sessionModel.getRequest(msg.requestId)!,
+            request,
           });
         } else if (msg.role === ChatMessageRole.Assistant && msg.content) {
           await renderSimpleMarkdownReply({
@@ -654,25 +657,6 @@ export const AIChatView = () => {
     };
   }, [aiChatService.sessionModel]);
 
-  useEventEffect(
-    mcpServerProxyService.onChangeMCPServers,
-    () => {
-      mcpServerProxyService.getAllMCPTools().then((tools) => {
-        setMcpToolsCount(tools.length);
-      });
-    },
-    [mcpServerProxyService],
-  );
-
-  const handleShowMCPTools = React.useCallback(async () => {
-    const tools = await mcpServerProxyService.getAllMCPTools();
-    dialogService.open({
-      message: <MCPToolsDialog tools={tools} />,
-      type: MessageType.Empty,
-      buttons: ['关闭'],
-    });
-  }, [mcpServerProxyService, dialogService]);
-
   return (
     <div id={styles.ai_chat_view}>
       <div className={styles.header_container}>
@@ -705,13 +689,6 @@ export const AIChatView = () => {
                   </Popover>
                 ))}
               </div>
-              <div className={styles.header_operate_right}>
-                {aiNativeConfigService.capabilities.supportsMCP && (
-                  <div className={styles.tag} onClick={handleShowMCPTools}>
-                    {`MCP Tools: ${mcpToolsCount}`}
-                  </div>
-                )}
-              </div>
             </div>
             <ChatInputWrapperRender
               onSend={(value, agentId, command) =>
@@ -750,44 +727,150 @@ export function DefaultChatViewHeader({
   handleClear: () => any;
   handleCloseChatView: () => any;
 }) {
-  const aiAssistantName = React.useMemo(() => localize('aiNative.chat.ai.assistant.name'), []);
+  const dialogService = useInjectable<IDialogService>(IDialogService);
+  const aiNativeConfigService = useInjectable<AINativeConfigService>(AINativeConfigService);
+  const mcpServerProxyService = useInjectable<MCPServerProxyService>(TokenMCPServerProxyService);
+  const aiChatService = useInjectable<ChatInternalService>(IChatInternalService);
+  const [historyList, setHistoryList] = React.useState<IChatHistoryItem[]>([]);
+  const [currentTitle, setCurrentTitle] = React.useState<string>('');
+  const handleNewChat = React.useCallback(() => {
+    if (aiChatService.sessionModel.history.getMessages().length > 0) {
+      aiChatService.createSessionModel();
+    }
+  }, [aiChatService]);
+  const handleHistoryItemSelect = React.useCallback(
+    (item: IChatHistoryItem) => {
+      aiChatService.activateSession(item.id);
+    },
+    [aiChatService],
+  );
+  const handleHistoryItemDelete = React.useCallback(
+    (item: IChatHistoryItem) => {
+      aiChatService.clearSessionModel(item.id);
+    },
+    [aiChatService],
+  );
+
+  const handleShowMCPTools = React.useCallback(async () => {
+    const tools = await mcpServerProxyService.getAllMCPTools();
+    dialogService.open({
+      message: <MCPToolsDialog tools={tools} />,
+      type: MessageType.Empty,
+      buttons: ['关闭'],
+    });
+  }, [mcpServerProxyService, dialogService]);
+
+  React.useEffect(() => {
+    const getHistoryList = () => {
+      const currentMessages = aiChatService.sessionModel.history.getMessages();
+      setCurrentTitle(
+        currentMessages.length > 0
+          ? currentMessages[currentMessages.length - 1].content.slice(0, MAX_TITLE_LENGTH)
+          : '',
+      );
+      setHistoryList(
+        aiChatService.getSessions().map((session) => {
+          const history = session.history;
+          const messages = history.getMessages();
+          const title = messages.length > 0 ? messages[0].content.slice(0, MAX_TITLE_LENGTH) : '';
+          const updatedAt = messages.length > 0 ? messages[messages.length - 1].replyStartTime || 0 : 0;
+          // const loading = session.requests[session.requests.length - 1]?.response.isComplete;
+          return {
+            id: session.sessionId,
+            title,
+            updatedAt,
+            // TODO: 后续支持
+            loading: false,
+          };
+        }),
+      );
+    };
+    getHistoryList();
+    const toDispose = new DisposableCollection();
+    const sessionListenIds = new Set<string>();
+    toDispose.push(
+      aiChatService.onChangeSession((sessionId) => {
+        getHistoryList();
+        if (sessionListenIds.has(sessionId)) {
+          return;
+        }
+        sessionListenIds.add(sessionId);
+        toDispose.push(
+          aiChatService.sessionModel.history.onMessageChange(() => {
+            getHistoryList();
+          }),
+        );
+      }),
+    );
+    toDispose.push(
+      aiChatService.sessionModel.history.onMessageChange(() => {
+        getHistoryList();
+      }),
+    );
+    return () => {
+      toDispose.dispose();
+    };
+  }, [aiChatService]);
 
   return (
-    <>
-      <div className={styles.left}>
-        <span className={styles.title}>{aiAssistantName}</span>
-      </div>
-      <div className={styles.right}>
+    <div className={styles.header}>
+      <ChatHistory
+        className={styles.chat_history}
+        // 取对话名称
+        currentId={aiChatService.sessionModel.sessionId}
+        title={currentTitle || localize('aiNative.chat.ai.assistant.name')}
+        historyList={historyList}
+        onNewChat={handleNewChat}
+        onHistoryItemSelect={handleHistoryItemSelect}
+        onHistoryItemDelete={handleHistoryItemDelete}
+        onHistoryItemChange={() => {}}
+      />
+      <Popover
+        overlayClassName={styles.popover_icon}
+        id={'ai-chat-header-clear'}
+        title={localize('aiNative.operate.clear.title')}
+      >
+        <EnhanceIcon
+          wrapperClassName={styles.action_btn}
+          className={getIcon('clear')}
+          onClick={handleClear}
+          tabIndex={0}
+          role='button'
+          ariaLabel={localize('aiNative.operate.clear.title')}
+        />
+      </Popover>
+      {aiNativeConfigService.capabilities.supportsMCP && (
         <Popover
           overlayClassName={styles.popover_icon}
-          id={'ai-chat-header-clear'}
-          title={localize('aiNative.operate.clear.title')}
-        >
-          <EnhanceIcon
-            wrapperClassName={styles.action_btn}
-            className={getIcon('clear')}
-            onClick={handleClear}
-            tabIndex={0}
-            role='button'
-            ariaLabel={localize('aiNative.operate.clear.title')}
-          />
-        </Popover>
-        <Popover
-          overlayClassName={styles.popover_icon}
-          id={'ai-chat-header-close'}
+          id={'ai-chat-header-tools'}
           position={PopoverPosition.left}
-          title={localize('aiNative.operate.close.title')}
+          title={localize('aiNative.operate.tools.title')}
         >
           <EnhanceIcon
             wrapperClassName={styles.action_btn}
-            className={getIcon('window-close')}
-            onClick={handleCloseChatView}
+            className={getIcon('menubar-tool')}
+            onClick={handleShowMCPTools}
             tabIndex={0}
             role='button'
-            ariaLabel={localize('aiNative.operate.close.title')}
+            ariaLabel={localize('aiNative.operate.tools.title')}
           />
         </Popover>
-      </div>
-    </>
+      )}
+      <Popover
+        overlayClassName={styles.popover_icon}
+        id={'ai-chat-header-close'}
+        position={PopoverPosition.left}
+        title={localize('aiNative.operate.close.title')}
+      >
+        <EnhanceIcon
+          wrapperClassName={styles.action_btn}
+          className={getIcon('window-close')}
+          onClick={handleCloseChatView}
+          tabIndex={0}
+          role='button'
+          ariaLabel={localize('aiNative.operate.close.title')}
+        />
+      </Popover>
+    </div>
   );
 }

package/src/browser/components/ChatContext/index.tsx

@@ -18,6 +18,11 @@ import { FileContext, LLMContextService, LLMContextServiceToken } from '../../..
 import { ContextSelector } from './ContextSelector';
 import styles from './style.module.less';
 
+const getCollapsedHeight = () => ({ height: 0, opacity: 0 });
+const getRealHeight = (node) => ({ height: node.scrollHeight, opacity: 1 });
+const getCurrentHeight = (node) => ({ height: node.offsetHeight });
+const skipOpacityTransition = (_, event) => (event as TransitionEvent).propertyName === 'height';
+
 export const ChatContext = memo(() => {
   const [addedFiles, updateAddedFiles] = useState<FileContext[]>([]);
   const [contextOverlay, toggleContextOverlay] = useState(false);
@@ -76,13 +81,24 @@ export const ChatContext = memo(() => {
       <Collapse
         // @ts-ignore
         expandIcon={({ isActive }) => (isActive ? <Icon icon='down' /> : <Icon icon='right' />)}
-        defaultActiveKey={['context-panel']}
-        onChange={() => {}}
+        openMotion={{
+          motionName: 'rc-collapse-motion',
+          onEnterStart: getCollapsedHeight,
+          onEnterActive: getRealHeight,
+          onLeaveStart: getCurrentHeight,
+          onLeaveActive: getCollapsedHeight,
+          onEnterEnd: skipOpacityTransition,
+          onLeaveEnd: skipOpacityTransition,
+          motionDeadline: 100,
+          leavedClassName: styles.collapse_hide,
+        }}
       >
         <Panel
           header={
             <div className={styles.context_header}>
-              <h3 className={styles.chat_context_title}>Context</h3>
+              <h3 className={styles.chat_context_title}>
+                Context {addedFiles.length > 0 ? ` (${addedFiles.length} files)` : ''}
+              </h3>
               <Popover
                 overlayClassName={styles.popover_icon}
                 id={'ai-context-header-clear'}

package/src/browser/components/ChatContext/style.module.less

@@ -5,6 +5,7 @@
   padding: 10px;
   border-radius: 4px;
   border: 1px solid var(--design-borderColor);
+  user-select: none;
 
   :global(.rc-collapse) {
     background-color: transparent !important;
@@ -19,6 +20,16 @@
 
   :global(.rc-collapse-expand-icon) {
     line-height: 1;
+
+    :global(.kt-icon) {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .collapse_hide {
+    display: none;
   }
 
   :global(.rc-collapse-header) {
@@ -63,6 +74,7 @@
     .context_list {
       font-size: 12px;
       overflow-y: auto;
+      user-select: none;
 
       .list_desc {
         margin: 0px 10px;