@opensumi/ide-ai-native 3.7.2-next-1739859371.0 → 3.7.2-next-1739945875.0

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

@@ -0,0 +1,135 @@
+import Collapse, { Panel } from 'rc-collapse';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+
+import 'rc-collapse/assets/index.css';
+
+import { Icon } from '@opensumi/ide-components/lib/icon/icon';
+import { Popover, getIcon } from '@opensumi/ide-core-browser/lib/components';
+import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
+import { useInjectable } from '@opensumi/ide-core-browser/lib/react-hooks/injectable-hooks';
+import { AppConfig } from '@opensumi/ide-core-browser/lib/react-providers/config-provider';
+import { LabelService } from '@opensumi/ide-core-browser/lib/services/label-service';
+import { localize } from '@opensumi/ide-core-common/lib/localize';
+import { Event, URI } from '@opensumi/ide-core-common/lib/utils';
+import { WorkbenchEditorService } from '@opensumi/ide-editor/lib/browser/types';
+
+import { FileContext, LLMContextService, LLMContextServiceToken } from '../../../common/llm-context';
+
+import { ContextSelector } from './ContextSelector';
+import styles from './style.module.less';
+
+export const ChatContext = memo(() => {
+  const [addedFiles, updateAddedFiles] = useState<FileContext[]>([]);
+  const [contextOverlay, toggleContextOverlay] = useState(false);
+
+  const labelService = useInjectable<LabelService>(LabelService);
+  const appConfig = useInjectable<AppConfig>(AppConfig);
+  const workbenchEditorService = useInjectable<WorkbenchEditorService>(WorkbenchEditorService);
+  const contextService = useInjectable<LLMContextService>(LLMContextServiceToken);
+
+  useEffect(() => {
+    const disposable = Event.debounce(
+      contextService.onDidContextFilesChangeEvent,
+      (_, e) => e!,
+      50,
+    )((files) => {
+      if (files) {
+        updateAddedFiles(files);
+      }
+    }, contextService);
+
+    return () => {
+      disposable.dispose();
+    };
+  }, []);
+
+  const openContextOverlay = useCallback(() => {
+    toggleContextOverlay(true);
+  }, [addedFiles]);
+
+  const onDidSelect = useCallback((uri: URI) => {
+    contextService.addFileToContext(uri, undefined, true);
+  }, []);
+
+  const onDidDeselect = useCallback((uri: URI) => {
+    contextService.removeFileFromContext(uri);
+  }, []);
+
+  const onDidClickFile = useCallback((uri: URI) => {
+    workbenchEditorService.open(uri);
+  }, []);
+
+  const onDidCleanFiles = useCallback((e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    contextService.cleanFileContext();
+  }, []);
+
+  const onDidRemoveFile = useCallback((e, uri: URI) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onDidDeselect(uri);
+  }, []);
+
+  return (
+    <div className={styles.chat_context}>
+      <Collapse
+        // @ts-ignore
+        expandIcon={({ isActive }) => (isActive ? <Icon icon='down' /> : <Icon icon='right' />)}
+        defaultActiveKey={['context-panel']}
+        onChange={() => {}}
+      >
+        <Panel
+          header={
+            <div className={styles.context_header}>
+              <h3 className={styles.chat_context_title}>Context</h3>
+              <Popover
+                overlayClassName={styles.popover_icon}
+                id={'ai-context-header-clear'}
+                title={localize('aiNative.operate.clear.title')}
+              >
+                <EnhanceIcon
+                  wrapperClassName={styles.action_btn}
+                  className={getIcon('clear')}
+                  onClick={onDidCleanFiles}
+                  tabIndex={0}
+                  role='button'
+                  ariaLabel={localize('aiNative.operate.clear.title')}
+                />
+              </Popover>
+            </div>
+          }
+          key='context-panel'
+        >
+          <div className={styles.file_list}>
+            {addedFiles.map((file) => (
+              <div className={styles.selected_item} key={file.uri.toString()} onClick={() => onDidClickFile(file.uri)}>
+                <Icon iconClass={labelService.getIcon(file.uri)} />
+                <span className={styles.basename}>
+                  {file.uri.path.base}
+                  {file.selection ? ` (${file.selection[0]}-${file.selection[1]})` : ''}
+                </span>
+                <span className={styles.dir}>
+                  {URI.file(appConfig.workspaceDir).relative(file.uri.parent)?.toString()}
+                </span>
+                <Icon icon='close' className={styles.close_icon} onClick={(e) => onDidRemoveFile(e, file.uri)} />
+              </div>
+            ))}
+          </div>
+          <div className={styles.add_context} onClick={openContextOverlay}>
+            <Icon icon='add' />
+            Add Files
+          </div>
+        </Panel>
+      </Collapse>
+      {contextOverlay && (
+        <ContextSelector
+          onDidClose={() => toggleContextOverlay(false)}
+          onDidDeselect={onDidDeselect}
+          onDidSelect={onDidSelect}
+          addedFiles={addedFiles}
+        />
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,189 @@
+.chat_context {
+  position: relative;
+  margin-bottom: 10px;
+  background-color: var(--design-chatInput-background);
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid var(--design-borderColor);
+
+  :global(.rc-collapse) {
+    background-color: transparent !important;
+    border-radius: none !important;
+    border: none !important;
+  }
+
+  :global(.rc-collapse-title) {
+    flex: 1 !important;
+    line-height: 22px;
+  }
+
+  :global(.rc-collapse-expand-icon) {
+    line-height: 1;
+  }
+
+  :global(.rc-collapse-header) {
+    padding: 0px !important;
+    line-height: 1 !important;
+  }
+
+  :global(.rc-collapse-content) {
+    padding: 0px !important;
+    background-color: transparent !important;
+  }
+
+  .context_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .chat_context_title {
+      font-weight: 600;
+      font-size: 11px;
+      margin-bottom: 0px;
+      color: var(--descriptionForeground);
+    }
+  }
+
+  .context_selector {
+    position: absolute;
+    left: 0px;
+    bottom: 40px;
+    background-color: var(--design-container-background);
+    padding: 10px;
+    width: 100%;
+    padding: 0px;
+    border-radius: 4px;
+    height: 350px;
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+    box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
+      0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
+
+    .context_list {
+      font-size: 12px;
+      overflow-y: auto;
+
+      .list_desc {
+        margin: 0px 10px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+        color: var(--descriptionForeground);
+      }
+
+      .candidate_file {
+        padding: 0px 10px;
+        display: flex;
+        align-items: center;
+        height: 24px;
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--button-hoverBackground);
+        }
+
+        .basename {
+          color: var(--foreground);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-left: 5px;
+        }
+
+        .dir {
+          color: var(--descriptionForeground);
+          margin-left: 15px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+
+      .active {
+        background-color: var(--editor-background);
+        color: var(--foreground);
+      }
+    }
+
+    .context_search_layer {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: var(--inputOption-hoverBackground);
+    }
+  }
+
+  .file_list {
+    margin-top: 5px;
+    max-height: 300px;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .selected_item {
+      display: flex;
+      align-items: center;
+      font-size: 11px;
+      margin-right: 5px;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 0px 4px;
+      margin-bottom: 4px;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      .close_icon {
+        font-size: 12px !important;
+        margin-left: auto;
+      }
+
+      :global(.kt-icon) {
+        display: flex;
+        font-size: 11px;
+      }
+
+      .basename {
+        margin-left: 4px;
+        color: var(--editor-foreground);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 75%;
+
+        &:hover {
+          color: var(--badge-foreground);
+        }
+      }
+
+      .dir {
+        color: var(--descriptionForeground);
+        margin-left: 15px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .add_context {
+    display: inline-flex;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 11px;
+    margin-right: 5px;
+    height: 24px;
+    margin-top: 10px;
+    align-items: center;
+    user-select: none;
+    transition: all 0.2s;
+    color: var(--design-text-foreground);
+    padding: 0px 5px;
+
+    &:hover {
+      border-color: var(--kt-selectOption-activeBorder);
+    }
+  }
+}

package/src/browser/components/ChatInput.tsx

@@ -15,6 +15,7 @@ import { ChatProxyService } from '../chat/chat-proxy.service';
 import { ChatFeatureRegistry } from '../chat/chat.feature.registry';
 import { IChatSlashCommandItem } from '../types';
 
+import { ChatContext } from './ChatContext';
 import styles from './components.module.less';
 
 const INSTRUCTION_BOTTOM = 8;

package/src/browser/components/ChatReply.tsx

@@ -38,6 +38,7 @@ import {
   IChatComponent,
   IChatContent,
   IChatResponseProgressFileTreeData,
+  IChatToolContent,
   URI,
 } from '@opensumi/ide-core-common';
 import { IIconService } from '@opensumi/ide-theme';
@@ -148,6 +149,33 @@ const TreeRenderer = (props: { treeData: IChatResponseProgressFileTreeData }) =>
   );
 };
 
+const ToolCallRender = (props: { toolCall: IChatToolContent['content'] }) => {
+  const { toolCall } = props;
+  const chatAgentViewService = useInjectable<IChatAgentViewService>(ChatAgentViewServiceToken);
+  const [node, setNode] = useState<React.JSX.Element | null>(null);
+
+  useEffect(() => {
+    const config = chatAgentViewService.getChatComponent('toolCall');
+    if (config) {
+      const { component: Component, initialProps } = config;
+      setNode(<Component {...initialProps} value={toolCall} />);
+      return;
+    }
+    setNode(
+      <div>
+        <Loading />
+        <span style={{ marginLeft: 4 }}>正在加载组件</span>
+      </div>,
+    );
+    const deferred = chatAgentViewService.getChatComponentDeferred('toolCall')!;
+    deferred.promise.then(({ component: Component, initialProps }) => {
+      setNode(<Component {...initialProps} value={toolCall} />);
+    });
+  }, [toolCall.state]);
+
+  return node;
+};
+
 const ComponentRender = (props: { component: string; value?: unknown }) => {
   const chatAgentViewService = useInjectable<IChatAgentViewService>(ChatAgentViewServiceToken);
   const [node, setNode] = useState<React.JSX.Element | null>(null);
@@ -274,6 +302,8 @@ export const ChatReply = (props: IChatReplyProps) => {
     <ComponentRender component={componentId} value={value} />
   );
 
+  const renderToolCall = (toolCall: IChatToolContent['content']) => <ToolCallRender toolCall={toolCall} />;
+
   const contentNode = React.useMemo(
     () =>
       request.response.responseContents.map((item, index) => {
@@ -284,6 +314,8 @@ export const ChatReply = (props: IChatReplyProps) => {
           node = renderTreeData(item.treeData);
         } else if (item.kind === 'component') {
           node = renderComponent(item.component, item.value);
+        } else if (item.kind === 'toolCall') {
+          node = renderToolCall(item.content);
         } else {
           node = renderMarkdown(item.content);
         }

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

@@ -0,0 +1,86 @@
+.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

@@ -0,0 +1,77 @@
+import cls from 'classnames';
+import React, { useState } from 'react';
+
+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 { CodeEditorWithHighlight } from './ChatEditor';
+import styles from './ChatToolRender.module.less';
+
+export const ChatToolRender = (props: { value: IChatToolContent['content'] }) => {
+  const { value } = props;
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  if (!value || !value.function || !value.id) {
+    return null;
+  }
+
+  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 toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const stateInfo = getStateInfo(value.state);
+
+  return (
+    <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>
+          {value?.function?.name}
+        </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/components.module.less

@@ -244,44 +244,45 @@
   }
 }
 
-.code_block {
+.monaco_wrapper {
   position: relative;
-  min-width: 100px;
-  margin-top: 4px;
-  .monaco_wrapper {
-    position: relative;
-    min-width: 130px;
-    > pre {
-      margin-bottom: 10px;
-    }
-    .editor {
-      border-radius: 8px;
-      font-size: 12px;
-      padding: 32px 8px 8px 8px;
-      line-height: 18px;
-      &::-webkit-scrollbar {
-        width: auto;
-        height: 4px;
-      }
+  min-width: 130px;
+  > pre {
+    margin-bottom: 10px;
+  }
+  .editor {
+    border-radius: 8px;
+    font-size: 12px;
+    padding: 32px 8px 8px 8px;
+    line-height: 18px;
+    &::-webkit-scrollbar {
+      width: auto;
+      height: 4px;
     }
+  }
 
-    .action_toolbar {
-      display: flex;
-      position: absolute;
-      right: 8px;
-      top: 6px;
-      z-index: 100;
-      height: 20px;
-      align-items: center;
-      overflow: hidden;
+  .action_toolbar {
+    display: flex;
+    position: absolute;
+    right: 8px;
+    top: 6px;
+    z-index: 100;
+    height: 20px;
+    align-items: center;
+    overflow: hidden;
 
-      :global {
-        .kt-popover {
-          height: inherit;
-        }
+    :global {
+      .kt-popover {
+        height: inherit;
       }
     }
   }
+}
+
+.code_block {
+  position: relative;
+  min-width: 100px;
+  margin-top: 4px;
 
   :global {
     .hljs {

package/src/browser/context/llm-context.contribution.ts

@@ -0,0 +1,14 @@
+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();
+  }
+}