@opensumi/ide-ai-native 3.7.2-next-1740323956.0 → 3.7.2-next-1740366031.0

package/src/browser/components/ChatHistory.tsx

@@ -0,0 +1,292 @@
+import cls from 'classnames';
+import React, { FC, memo, useCallback, useEffect, useRef, useState } from 'react';
+
+import { Icon, Input, Loading, Popover, PopoverPosition, PopoverTriggerType, getIcon } from '@opensumi/ide-components';
+import './chat-history.css';
+import { localize } from '@opensumi/ide-core-browser';
+import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
+
+export interface IChatHistoryItem {
+  id: string;
+  title: string;
+  updatedAt: number;
+  loading: boolean;
+}
+
+export interface IChatHistoryProps {
+  title: string;
+  historyList: IChatHistoryItem[];
+  currentId?: string;
+  className?: string;
+  onNewChat: () => void;
+  onHistoryItemSelect: (item: IChatHistoryItem) => void;
+  onHistoryItemDelete: (item: IChatHistoryItem) => void;
+  onHistoryItemChange: (item: IChatHistoryItem, title: string) => void;
+}
+
+// 最大历史记录数
+const MAX_HISTORY_LIST = 100;
+
+const ChatHistory: FC<IChatHistoryProps> = memo(
+  ({
+    title,
+    historyList,
+    currentId,
+    onNewChat,
+    onHistoryItemSelect,
+    onHistoryItemChange,
+    onHistoryItemDelete,
+    className,
+  }) => {
+    const [historyTitleEditable, setHistoryTitleEditable] = useState<{
+      [key: string]: boolean;
+    } | null>(null);
+    const [searchValue, setSearchValue] = useState('');
+    const inputRef = useRef<any>(null);
+
+    // 处理搜索输入变化
+    const handleSearchChange = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchValue(event.target.value);
+      },
+      [searchValue],
+    );
+
+    // 处理历史记录项选择
+    const handleHistoryItemSelect = useCallback(
+      (item: IChatHistoryItem) => {
+        onHistoryItemSelect(item);
+        setSearchValue('');
+      },
+      [onHistoryItemSelect, searchValue],
+    );
+
+    // 处理标题编辑
+    const handleTitleEdit = useCallback(
+      (item: IChatHistoryItem) => {
+        setHistoryTitleEditable({
+          [item.id]: true,
+        });
+      },
+      [historyTitleEditable],
+    );
+
+    // 处理标题编辑完成
+    const handleTitleEditComplete = useCallback(
+      (item: IChatHistoryItem, newTitle: string) => {
+        setHistoryTitleEditable({
+          [item.id]: false,
+        });
+        onHistoryItemChange(item, newTitle);
+      },
+      [onHistoryItemChange, historyTitleEditable],
+    );
+
+    // 处理标题编辑取消
+    const handleTitleEditCancel = useCallback(
+      (item: IChatHistoryItem) => {
+        setHistoryTitleEditable({
+          [item.id]: false,
+        });
+      },
+      [historyTitleEditable],
+    );
+
+    // 处理新建聊天
+    const handleNewChat = useCallback(() => {
+      onNewChat();
+    }, [onNewChat]);
+
+    useEffect(() => {
+      if (historyTitleEditable) {
+        inputRef.current?.focus({ cursor: 'end' });
+      }
+    }, [historyTitleEditable]);
+
+    // 处理删除历史记录
+    const handleHistoryItemDelete = useCallback(
+      (item: IChatHistoryItem) => {
+        onHistoryItemDelete(item);
+      },
+      [onHistoryItemDelete],
+    );
+
+    // 获取时间标签
+    const getTimeKey = useCallback((diff: number): string => {
+      if (diff < 60 * 60 * 1000) {
+        const minutes = Math.floor(diff / (60 * 1000));
+        return minutes === 0 ? 'Just now' : `${minutes}m ago`;
+      } else if (diff < 24 * 60 * 60 * 1000) {
+        const hours = Math.floor(diff / (60 * 60 * 1000));
+        return `${hours}h ago`;
+      } else if (diff < 7 * 24 * 60 * 60 * 1000) {
+        const days = Math.floor(diff / (24 * 60 * 60 * 1000));
+        return `${days}d ago`;
+      } else if (diff < 30 * 24 * 60 * 60 * 1000) {
+        const weeks = Math.floor(diff / (7 * 24 * 60 * 60 * 1000));
+        return `${weeks}w ago`;
+      } else if (diff < 365 * 24 * 60 * 60 * 1000) {
+        const months = Math.floor(diff / (30 * 24 * 60 * 60 * 1000));
+        return `${months}mo ago`;
+      }
+      const years = Math.floor(diff / (365 * 24 * 60 * 60 * 1000));
+      return `${years}y ago`;
+    }, []);
+
+    // 格式化历史记录
+    const formatHistory = useCallback(
+      (list: IChatHistoryItem[]) => {
+        const now = new Date();
+        const result = [] as { key: string; items: typeof list }[];
+
+        list.forEach((item: IChatHistoryItem) => {
+          const updatedAt = new Date(item.updatedAt);
+          const diff = now.getTime() - updatedAt.getTime();
+          const key = getTimeKey(diff);
+
+          const existingGroup = result.find((group) => group.key === key);
+          if (existingGroup) {
+            existingGroup.items.push(item);
+          } else {
+            result.push({ key, items: [item] });
+          }
+        });
+
+        return result;
+      },
+      [getTimeKey],
+    );
+
+    // 渲染历史记录项
+    const renderHistoryItem = useCallback(
+      (item: IChatHistoryItem) => (
+        <div
+          key={item.id}
+          className={cls('dm-chat-history-item', item.id === currentId ? 'dm-chat-history-item-selected' : '')}
+          onClick={() => handleHistoryItemSelect(item)}
+        >
+          <div className='dm-chat-history-item-content'>
+            {item.loading ? (
+              <Loading />
+            ) : (
+              <Icon icon='message' style={{ width: '16px', height: '16px', marginRight: 4 }} />
+            )}
+            {!historyTitleEditable?.[item.id] ? (
+              <span id={`dm-chat-history-item-title-${item.id}`} className='dm-chat-history-item-title'>
+                {item.title}
+              </span>
+            ) : (
+              <Input
+                className='dm-chat-history-item-title'
+                defaultValue={item.title}
+                ref={inputRef}
+                onPressEnter={(e: any) => {
+                  handleTitleEditComplete(item, e.target.value);
+                }}
+                onBlur={() => handleTitleEditCancel(item)}
+              />
+            )}
+          </div>
+          <div className='dm-chat-history-item-actions'>
+            {/* <EditOutlined
+              title={localize('aiNative.operate.chatHistory.edit')}
+              style={{ marginRight: 8 }}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleTitleEdit(item);
+              }}
+            /> */}
+            <EnhanceIcon
+              className={cls('dm-chat-history-item-actions-delete', getIcon('delete'))}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleHistoryItemDelete(item);
+              }}
+              ariaLabel={localize('aiNative.operate.chatHistory.delete')}
+            />
+          </div>
+        </div>
+      ),
+      [
+        historyTitleEditable,
+        handleHistoryItemSelect,
+        handleTitleEditComplete,
+        handleTitleEditCancel,
+        handleTitleEdit,
+        handleHistoryItemDelete,
+        currentId,
+        inputRef,
+      ],
+    );
+
+    // 渲染历史记录列表
+    const renderHistory = useCallback(() => {
+      const filteredList = historyList
+        .slice(0, MAX_HISTORY_LIST)
+        .filter((item) => item.title && item.title.includes(searchValue));
+
+      const groupedHistoryList = formatHistory(filteredList);
+
+      return (
+        <div>
+          <Input
+            placeholder={localize('aiNative.operate.chatHistory.searchPlaceholder')}
+            style={{ width: '100%', maxWidth: '100%' }}
+            value={searchValue}
+            onChange={handleSearchChange}
+          />
+          <div className='dm-chat-history-list'>
+            {groupedHistoryList.map((group) => (
+              <div key={group.key} style={{ padding: '4px' }}>
+                <div className='dm-chat-history-time'>{group.key}</div>
+                {group.items.map(renderHistoryItem)}
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+    }, [historyList, searchValue, formatHistory, handleSearchChange, renderHistoryItem]);
+
+    // getPopupContainer 处理函数
+    const getPopupContainer = useCallback((triggerNode: HTMLElement) => triggerNode.parentElement!, []);
+
+    return (
+      <div className={cls('dm-chat-history-header', className)}>
+        <div className='dm-chat-history-header-title'>
+          <span>{title}</span>
+        </div>
+        <div className='dm-chat-history-header-actions'>
+          <Popover
+            id='dm-chat-history-header-actions-history'
+            content={renderHistory()}
+            trigger={PopoverTriggerType.click}
+            position={PopoverPosition.bottomRight}
+            title={localize('aiNative.operate.chatHistory.title')}
+            getPopupContainer={getPopupContainer}
+          >
+            <div
+              className='dm-chat-history-header-actions-history'
+              title={localize('aiNative.operate.chatHistory.title')}
+            >
+              <EnhanceIcon className={cls('dm-chat-history-header-actions-history', 'codicon codicon-history')} />
+            </div>
+          </Popover>
+          <Popover
+            id={'ai-chat-header-close'}
+            position={PopoverPosition.top}
+            title={localize('aiNative.operate.newChat.title')}
+          >
+            <EnhanceIcon
+              className={cls('dm-chat-history-header-actions-new', getIcon('plus'))}
+              onClick={handleNewChat}
+            />
+          </Popover>
+        </div>
+      </div>
+    );
+  },
+);
+
+export default ChatHistory;

package/src/browser/components/ChatReply.tsx

@@ -360,7 +360,11 @@ export const ChatReply = (props: IChatReplyProps) => {
 
   return (
     <ChatThinkingResult
-      hasMessage={request.response.responseParts.length > 0 || !!request.response.errorDetails?.message}
+      hasMessage={
+        request.response.responseParts.length > 0 ||
+        request.response.responseContents.length > 0 ||
+        !!request.response.errorDetails?.message
+      }
       onRegenerate={handleRegenerate}
       requestId={request.requestId}
     >

package/src/browser/components/ChatThinking.tsx

@@ -118,7 +118,7 @@ export const ChatThinkingResult = ({
 
   const isRenderRegenerate = useMemo(() => {
     if (isUndefined(showRegenerate)) {
-      return latestRequestId === requestId;
+      return latestRequestId === requestId && !!requestId;
     }
 
     return !!showRegenerate;

package/src/browser/components/chat-history.css

@@ -0,0 +1,139 @@
+.dm-chat-history-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  padding: 0 4px 0 12px;
+  color: var(--editor-foreground);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .dm-chat-history-header-title {
+    opacity: 0.6;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: calc(100vw - 80px);
+      display: inline-block;
+      white-space: nowrap;
+    }
+  }
+
+  .dm-chat-history-header-actions {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+
+    .dm-chat-history-header-actions-history {
+      cursor: pointer;
+    }
+
+    .dm-chat-history-header-actions-new {
+      margin-left: 2px;
+      cursor: pointer;
+    }
+
+    .kt-popover-title {
+      margin-bottom: 8px;
+    }
+  }
+
+  .kt-popover {
+    .kt-popover-content {
+      width: 300px;
+    }
+    .kt-popover-content {
+      color: var(--editor-foreground);
+      background-color: var(--editor-background);
+      padding: 12px 12px;
+      border-radius: 3px;
+      box-shadow: 0 0 8px 2px var(--widget-shadow);
+    }
+    .kt-popover-title {
+      color: var(--editor-foreground);
+      font-size: 13px;
+    }
+    .kt-input {
+      color: var(--input-foreground);
+      background: var(--input-background);
+      border: 1px solid var(--input-border);
+      text-align: left;
+      height: 24px;
+      font-size: 13px;
+      border-radius: 4px;
+      &:focus {
+        border-color: var(--inputValidation-infoBorder);
+      }
+
+      &::placeholder {
+        color: var(--input-placeholderForeground);
+        opacity: 0.6;
+      }
+    }
+  }
+
+  .dm-chat-history-list {
+    overflow: auto;
+    max-height: 400px;
+    margin-top: 4px;
+    font-size: 13px;
+  }
+
+  .dm-chat-history-time {
+    opacity: 0.6;
+    padding-left: 4px;
+  }
+
+  .dm-chat-history-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    padding: 4px;
+    margin-top: 2px;
+    border-radius: 3px;
+
+    .dm-chat-history-item-content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      max-width: 100%;
+      height: 24px;
+    }
+
+    .dm-chat-history-item-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-block;
+      white-space: nowrap;
+    }
+
+    .dm-chat-history-item-actions {
+      display: none;
+    }
+
+    .dm-chat-history-item-selected {
+      background: var(--textPreformat-background);
+    }
+
+    &:hover {
+      background: var(--textPreformat-background);
+
+      .dm-chat-history-item-actions {
+        display: block;
+      }
+      .dm-chat-history-item-content {
+        max-width: calc(100% - 50px);
+      }
+    }
+  }
+
+  svg {
+    path {
+      fill: var(--foreground);
+    }
+  }
+}

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

@@ -35,7 +35,7 @@
 }
 
 .thinking_text {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .bottom_container {
@@ -480,7 +480,7 @@
 * welcome
 */
 .chat_welcome_head {
-  font-size: 14px;
+  font-size: 12px;
   line-height: 22px;
   a {
     color: #3c8dff;

package/src/browser/layout/layout.module.less

@@ -23,7 +23,7 @@
     .rce-mbox-text {
       line-height: 18px;
       width: inherit;
-      font-size: 14px;
+      font-size: 12px;
     }
 
     .rce-smsg {

package/src/browser/mcp/tools/components/Terminal.tsx

@@ -0,0 +1,97 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+
+import { useInjectable } from '@opensumi/ide-core-browser';
+import { Button, Icon } from '@opensumi/ide-core-browser/lib/components';
+import { localize } from '@opensumi/ide-core-common';
+
+import { IMCPServerToolComponentProps } from '../../../types';
+import { RunCommandHandler } from '../handlers/RunCommand';
+
+import styles from './index.module.less';
+
+function getResult(raw: string) {
+  const result: {
+    isError?: boolean;
+    text?: string;
+  } = {};
+
+  try {
+    const data: {
+      content: { type: string; text: string }[];
+      isError?: boolean;
+    } = JSON.parse(raw);
+    if (data.isError) {
+      result.isError = data.isError;
+    }
+
+    if (data.content) {
+      result.text = data.content.map((item) => item.text).join('\n');
+    }
+
+    return result;
+  } catch {
+    return null;
+  }
+}
+
+export const TerminalToolComponent = memo((props: IMCPServerToolComponentProps) => {
+  const { args, toolCallId } = props;
+  const handler = useInjectable<RunCommandHandler>(RunCommandHandler);
+  const [disabled, toggleDisabled] = useState(false);
+
+  const handleClick = useCallback((approval: boolean) => {
+    if (!toolCallId) {
+      return;
+    }
+    handler.handleApproval(toolCallId, approval);
+    toggleDisabled(true);
+  }, []);
+
+  const output = useMemo(() => {
+    if (props.result) {
+      return getResult(props.result);
+    }
+    return null;
+  }, [props]);
+
+  return (
+    <div className={styles.run_cmd_tool}>
+      {props.state === 'result' && (
+        <div>
+          <div className={styles.command_title}>
+            <Icon icon='terminal' />
+            <span>{localize('ai.native.mcp.terminal.output')}</span>
+          </div>
+          {output ? (
+            <div className={styles.command_content}>
+              <code>{output.text}</code>
+            </div>
+          ) : (
+            ''
+          )}
+        </div>
+      )}
+
+      {props.state === 'complete' && args?.require_user_approval && (
+        <div>
+          <div className={styles.command_title}>
+            <Icon icon='terminal' />
+            <span>{localize('ai.native.mcp.terminal.allow-question')}</span>
+          </div>
+          <p className={styles.command_content}>
+            <code>$ {args.command}</code>
+          </p>
+          <p className={styles.comand_description}>{args.explanation}</p>
+          <div className={styles.cmmand_footer}>
+            <Button type='link' size='small' disabled={disabled} onClick={() => handleClick(true)}>
+              {localize('ai.native.mcp.terminal.allow')}
+            </Button>
+            <Button type='link' size='small' disabled={disabled} onClick={() => handleClick(false)}>
+              {localize('ai.native.mcp.terminal.deny')}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/browser/mcp/tools/components/index.module.less

@@ -130,3 +130,43 @@
   flex-basis: 0px;
   flex-grow: 1;
 }
+
+.run_cmd_tool {
+  background-color: var(--design-chatInput-background);
+  padding: 10px;
+  border-radius: 4px;
+
+  .command_title {
+    display: flex;
+    align-items: center;
+    span {
+      margin-left: 5px;
+    }
+  }
+
+  .command_content {
+    padding: 4px;
+    font-size: 12px;
+    color: var(--design-text-foreground);
+    margin: 0px;
+    background-color: var(--terminal-background);
+    margin: 10px 0px;
+    border-radius: 4px;
+    overflow: auto;
+
+    code {
+      font-size: 12px;
+      white-space: pre;
+    }
+  }
+
+  .comand_description {
+    font-size: 11px;
+    color: var(--descriptionForeground);
+  }
+
+  .cmmand_footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+}