@opensumi/ide-ai-native 3.7.2-next-1740448398.0 → 3.7.2-next-1741226843.0

package/src/browser/components/ChatHistory.tsx

@@ -1,292 +0,0 @@
-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/ChatToolRender.module.less

@@ -1,86 +0,0 @@
-.chat-tool-render {
-  margin: 8px 0;
-  border: 1px solid var(--design-borderColor);
-  border-radius: 6px;
-  overflow: hidden;
-
-  .tool-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 12px;
-    background-color: var(--design-block-background);
-    cursor: pointer;
-    user-select: none;
-
-    &:hover {
-      background-color: var(--design-block-hoverBackground);
-    }
-  }
-
-  .tool-name {
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-    color: var(--design-text-foreground);
-  }
-
-  .expand-icon {
-    display: inline-block;
-    margin-right: 8px;
-    transition: transform 0.2s;
-    color: var(--design-text-placeholderForeground);
-
-    &.expanded {
-      transform: rotate(90deg);
-    }
-  }
-
-  .tool-state {
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    color: var(--design-text-placeholderForeground);
-  }
-
-  .state-icon {
-    display: flex;
-    align-items: center;
-    margin-right: 6px;
-  }
-
-  .loading-icon {
-    width: 12px;
-    height: 12px;
-  }
-
-  .state-label {
-    margin-left: 4px;
-  }
-
-  .tool-content {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease-out;
-    background-color: var(--design-container-background);
-
-    &.expanded {
-      max-height: 1000px;
-    }
-  }
-
-  .tool-arguments,
-  .tool-result {
-    padding: 12px;
-  }
-
-  .section-label {
-    font-size: 12px;
-    color: var(--design-text-placeholderForeground);
-    margin-bottom: 8px;
-  }
-
-  .tool-result {
-    border-top: 1px solid var(--design-borderColor);
-  }
-}

package/src/browser/components/ChatToolRender.tsx

@@ -1,96 +0,0 @@
-import cls from 'classnames';
-import React, { useState } from 'react';
-
-import { useInjectable } from '@opensumi/ide-core-browser';
-import { Icon } from '@opensumi/ide-core-browser/lib/components';
-import { Loading } from '@opensumi/ide-core-browser/lib/components/ai-native';
-import { IChatToolContent, uuid } from '@opensumi/ide-core-common';
-
-import { IMCPServerRegistry, TokenMCPServerRegistry } from '../types';
-
-import { CodeEditorWithHighlight } from './ChatEditor';
-import styles from './ChatToolRender.module.less';
-
-export const ChatToolRender = (props: { value: IChatToolContent['content']; messageId?: string }) => {
-  const { value, messageId } = props;
-  const [isExpanded, setIsExpanded] = useState(false);
-  const mcpServerFeatureRegistry = useInjectable<IMCPServerRegistry>(TokenMCPServerRegistry);
-
-  if (!value || !value.function || !value.id) {
-    return null;
-  }
-  const label = mcpServerFeatureRegistry.getMCPTool(value.function.name)?.label || value.function.name;
-
-  const ToolComponent = mcpServerFeatureRegistry.getToolComponent(value.function.name);
-
-  const getStateInfo = (state?: string): { label: string; icon: React.ReactNode } => {
-    switch (state) {
-      case 'streaming-start':
-      case 'streaming':
-        return { label: 'Generating', icon: <Loading /> };
-      case 'complete':
-        return { label: 'Complete', icon: <Icon iconClass='codicon codicon-check' /> };
-      case 'result':
-        return { label: 'Result Ready', icon: <Icon iconClass='codicon codicon-check-all' /> };
-      default:
-        return { label: state || 'Unknown', icon: <Icon iconClass='codicon codicon-question' /> };
-    }
-  };
-  const getParsedArgs = () => {
-    try {
-      // TODO: 流式输出中function_call的参数还不完整，需要等待complete状态
-      if (value.state !== 'complete' && value.state !== 'result') {
-        return {};
-      }
-      return JSON.parse(value.function?.arguments || '{}');
-    } catch (error) {
-      return {};
-    }
-  };
-
-  const toggleExpand = () => {
-    setIsExpanded(!isExpanded);
-  };
-
-  const stateInfo = getStateInfo(value.state);
-
-  return ToolComponent && (value.state === 'complete' || value.state === 'result') ? (
-    <ToolComponent
-      state={value.state}
-      args={getParsedArgs()}
-      result={value.result}
-      index={value.index}
-      messageId={messageId}
-      toolCallId={value.id}
-    />
-  ) : (
-    <div className={styles['chat-tool-render']}>
-      <div className={styles['tool-header']} onClick={toggleExpand}>
-        <div className={styles['tool-name']}>
-          <span className={cls(styles['expand-icon'], { [styles.expanded]: isExpanded })}>▶</span>
-          {label}
-        </div>
-        {value.state && (
-          <div className={styles['tool-state']}>
-            <span className={styles['state-icon']}>{stateInfo.icon}</span>
-            <span className={styles['state-label']}>{stateInfo.label}</span>
-          </div>
-        )}
-      </div>
-      <div className={cls(styles['tool-content'], { [styles.expanded]: isExpanded })}>
-        {value?.function?.arguments && (
-          <div className={styles['tool-arguments']}>
-            <div className={styles['section-label']}>Arguments</div>
-            <CodeEditorWithHighlight input={value?.function?.arguments} language={'json'} relationId={uuid(4)} />
-          </div>
-        )}
-        {value?.result && (
-          <div className={styles['tool-result']}>
-            <div className={styles['section-label']}>Result</div>
-            <CodeEditorWithHighlight input={value.result} language={'json'} relationId={uuid(4)} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

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

@@ -1,139 +0,0 @@
-.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: 14px;
-
-    .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/context/llm-context.contribution.ts

@@ -1,14 +0,0 @@
-import { Autowired } from '@opensumi/di';
-import { ClientAppContribution, Domain } from '@opensumi/ide-core-browser';
-
-import { LLMContextService, LLMContextServiceToken } from '../../common/llm-context';
-
-@Domain(ClientAppContribution)
-export class LlmContextContribution implements ClientAppContribution {
-  @Autowired(LLMContextServiceToken)
-  protected readonly llmContextService: LLMContextService;
-
-  initialize() {
-    this.llmContextService.startAutoCollection();
-  }
-}