@opensumi/ide-ai-native 2.26.9-rc-1695091570.0

package/src/browser/override/global.styles.less

@@ -0,0 +1,268 @@
+@import '@opensumi/ide-core-browser/lib/style/variable.less';
+
+#ai_chat_panel {
+  height: 100%;
+}
+
+/**
+* ---------------- 覆盖 editor tab 样式 ---------------------
+*/
+div[class*='kt_editor_group___'] div[class*='kt_editor_tabs_content___'] {
+  div[class*='kt_editor_tab___'] {
+    border-right: none;
+    border-top: none;
+  }
+
+  div[class*='kt_editor_tab_current___'] {
+    background-color: transparent !important;
+  }
+}
+
+/**
+* ---------------- 覆盖 editor navigation 导航条样式 ---------------------
+*/
+div[class*='navigation_container___'] {
+  height: 28px;
+  margin-bottom: 10px;
+}
+
+div[class*='file_tree_node___'] {
+  border-radius: 4px;
+}
+
+/**
+* ---------------- 覆盖 左、右、底 tabbar 样式 ---------------------
+*/
+@bottomBarHeight: 32px;
+
+div[class*='icon_tab___'] {
+  height: 32px;
+  width: 32px;
+  border-radius: 8px;
+
+  div.activity-icon {
+    font-size: 16px;
+    width: initial;
+    height: initial;
+    color: var(--activityBar-inactiveForeground);
+
+    &.mask-mode {
+      background-color: var(--activityBar-inactiveForeground);
+      -webkit-mask-size: 16px;
+    }
+  }
+}
+
+div[class*='tab_panel___'] {
+  &::before {
+    content: none;
+  }
+}
+
+div[class*='tab_panel_hidden___'] {
+  display: none;
+}
+
+.left-slot div[class*='tab_panel___'] {
+  border-right: none;
+}
+
+li[class*='left_tab___'] {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  &.active {
+    div[class*='icon_tab___'] {
+      background-color: var(--activityBar-activeBorder);
+      &::before {
+        content: none;
+      }
+    }
+  }
+}
+
+div[class*='left_tab_bar___'] {
+  border-right: none;
+  border-top: none;
+}
+
+div[class*='bar_content___'] {
+  width: 100%;
+}
+
+.bottom-slot div[class*='tab_bar___'] {
+  height: 100%;
+}
+
+li[class*='bottom_tab___'] {
+  height: 100%;
+  line-height: @bottomBarHeight;
+}
+
+div[class*='bottom_bar_container___'] {
+  width: 100%;
+  height: @bottomBarHeight;
+  min-height: @bottomBarHeight;
+}
+
+/* --------------------------------------*/
+
+div[class*='box-panel___'] {
+  background-image: url('https://mdn.alipayobjects.com/huamei_htww6h/afts/img/A*hLI-SqEx-YkAAAAAAAAAAAAADhl8AQ/original');
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.rce-mbox-left-notch,
+.rce-mbox-right-notch {
+  display: none;
+}
+
+.rce-mbox {
+  background-color: #ffffff0a;
+  border-radius: 2px 12px 12px 12px;
+  box-shadow: none;
+  padding: 8px 12px;
+  min-width: initial;
+  margin: 0;
+
+  ::after {
+    content: '';
+  }
+}
+
+.rce-mbox-text {
+  font-size: 12px;
+  line-height: 18px;
+  width: inherit;
+}
+
+.rce-smsg {
+  background-color: #ffffff0a;
+  box-shadow: none;
+  border-radius: 8px;
+  max-width: initial;
+  border-radius: 2px 12px 12px 12px;
+  width: 100%;
+  flex-direction: initial;
+  justify-content: left;
+  padding: 8px 12px 12px;
+  margin: 0;
+
+  .rce-smsg-text {
+    font-size: 12px;
+    width: 100%;
+    text-align: left;
+  }
+}
+
+.rce-container-smsg {
+  width: 100%;
+}
+
+.rce-mlist {
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 300;
+}
+
+.rce-ai-msg {
+  > .rce-mbox {
+    margin-bottom: 28px;
+    width: 100%;
+  }
+
+  .rce-mbox-body {
+    display: flex;
+    align-items: flex-start;
+    position: initial;
+    width: 100%;
+
+    .rce-mbox-title {
+      position: absolute;
+      left: -40px;
+      top: 0;
+    }
+
+    .rce-avatar-container {
+      &.default {
+        height: 32px;
+        width: 32px;
+      }
+    }
+  }
+}
+
+.rce-container-mbox {
+  overflow: hidden;
+  margin: 0 16px 16px 16px;
+  min-width: initial;
+}
+
+.rce-user-msg {
+  .rce-mbox-right {
+    border-radius: 12px 12px 2px 12px;
+    background-color: #3c8dff4d;
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+blockquote {
+  background: var(--vscode-textBlockQuote-background);
+  border-color: var(--vscode-textBlockQuote-border);
+}
+
+.AI-Content-Widget {
+  box-shadow: 0 9px 28px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 10px;
+  padding: 12px 16px;
+  background-color: rgba(23, 28, 37, 1);
+  border: 1px solid rgba(54, 57, 64, 1);
+
+  // 编辑区域的 content widget
+  .ant-select-selector {
+    background-color: #c0c7d008 !important;
+  }
+
+  .ai-shortcuts {
+    margin-bottom: 12px;
+  }
+}
+
+// ai native main
+.ai_native_panel_container {
+  margin-right: 16px;
+  width: initial;
+}
+
+.ai_native_slot_main {
+  height: 100%;
+  width: 100%;
+  background-color: #151b21;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.ai_native_slot_resize_horizontal {
+  height: 100%;
+  margin: 0 3px;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    height: 25px;
+    width: 2px;
+    background-color: #31363b;
+    border-radius: 1px;
+    top: 50%;
+    left: 50%;
+  }
+}
+
+// ai native input
+.ai_native_input_container {
+  height: 32px;
+}

package/src/browser/override/layout/layout-config.ts

@@ -0,0 +1,21 @@
+import { SlotLocation } from '@opensumi/ide-core-browser';
+import { defaultConfig } from '@opensumi/ide-main-layout/lib/browser/default-config';
+
+import { Ai_CHAT_CONTAINER_VIEW_ID } from '../../../common';
+import { AiChatContribution } from '../../ai-chat.contribution';
+
+import { AiMenuBarContribution } from './menu-bar/menu-bar.contribution';
+
+export const AiLayoutConfig = {
+  ...defaultConfig,
+  ...{
+    [SlotLocation.top]: {
+      modules: [AiMenuBarContribution.AiMenuBarContainer],
+    },
+  },
+  ...{
+    [Ai_CHAT_CONTAINER_VIEW_ID]: {
+      modules: [Ai_CHAT_CONTAINER_VIEW_ID],
+    },
+  },
+};

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

@@ -0,0 +1,7 @@
+:global {
+  div[class*=box-panel___] {
+    background-image: url('https://mdn.alipayobjects.com/huamei_htww6h/afts/img/A*hLI-SqEx-YkAAAAAAAAAAAAADhl8AQ/original');
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}

package/src/browser/override/layout/main-slot-renderer.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { SlotRenderer } from '@opensumi/ide-core-browser';
+import { IChildComponentProps, SplitPanel, getStorageValue } from '@opensumi/ide-core-browser/lib/components';
+
+import { Ai_CHAT_CONTAINER_VIEW_ID } from '../../../common';
+
+export const AiMainSlotRenderer = (props?: IChildComponentProps) => {
+  const { colors, layout } = getStorageValue();
+
+  return (
+    <SplitPanel
+      id='ai-native-main-horizontal-0'
+      flex={1}
+      className='ai_native_panel_container'
+      resizeHandleClassName='ai_native_slot_resize_horizontal'
+    >
+      <SplitPanel
+        id='ai-native-main-horizontal-1'
+        flex={1}
+        flexGrow={1}
+        resizeHandleClassName='ai_native_slot_resize_horizontal'
+      >
+        <SlotRenderer
+          backgroundColor={colors.sideBarBackground}
+          slot='left'
+          isTabbar={true}
+          defaultSize={layout.left?.currentId ? layout.left?.size || 310 : 49}
+          minResize={280}
+          maxResize={480}
+        />
+        <SplitPanel
+          id='main-vertical'
+          minResize={300}
+          flexGrow={1}
+          direction='top-to-bottom'
+          className='ai_native_slot_main'
+          resizeHandleClassName='ai_native_slot_resize_horizontal'
+        >
+          <SlotRenderer backgroundColor={colors.editorBackground} flex={2} flexGrow={1} minResize={200} slot='main' />
+          <SlotRenderer
+            backgroundColor={colors.panelBackground}
+            flex={1}
+            defaultSize={layout.bottom?.size}
+            minResize={160}
+            slot='bottom'
+            isTabbar={true}
+          />
+        </SplitPanel>
+        <SlotRenderer slot='right' isTabbar={true} defaultSize={0} maxResize={480} minResize={280} minSize={0} />
+      </SplitPanel>
+      <SlotRenderer
+        slot={Ai_CHAT_CONTAINER_VIEW_ID}
+        isTabbar={true}
+        defaultSize={420}
+        maxResize={480}
+        minResize={280}
+        minSize={0}
+      />
+    </SplitPanel>
+  );
+};

package/src/browser/override/layout/menu-bar/menu-bar.contribution.tsx

@@ -0,0 +1,28 @@
+
+import { Injectable } from '@opensumi/di';
+import { ComponentContribution, ComponentRegistry, Domain, getExternalIcon } from '@opensumi/ide-core-browser';
+import { IMenuRegistry, MenuContribution, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+
+import { AiMenuBarView } from './menu-bar.view';
+
+@Injectable()
+@Domain(ComponentContribution, MenuContribution)
+export class AiMenuBarContribution implements ComponentContribution, MenuContribution {
+  static AiMenuBarContainer = 'ai-menubar';
+
+  registerComponent(registry: ComponentRegistry): void {
+    registry.register(AiMenuBarContribution.AiMenuBarContainer, {
+      component: AiMenuBarView,
+      id: AiMenuBarContribution.AiMenuBarContainer,
+    });
+  }
+
+  registerMenus(menus: IMenuRegistry): void {
+    menus.registerMenuItems(MenuId.IconMenubarContext, [
+      {
+        command: 'main-layout.left-panel.toggle',
+        iconClass: getExternalIcon('layout-sidebar-left-off'),
+      },
+    ]);
+  }
+}

package/src/browser/override/layout/menu-bar/menu-bar.module.less

@@ -0,0 +1,41 @@
+.menu_bar_view {
+  display: flex;
+  background-color: var(--kt-menubar-background);
+  align-items: center;
+  width: 100%;
+
+  .container {
+    display: flex;
+    justify-content: space-between;
+    width: inherit;
+    align-items: center;
+    padding: 0 16px;
+
+    .center {
+      .run {
+        .btn {
+          background-color: rgba(4, 74, 16, 0.6);
+          border-radius: 8px;
+          color: rgba(215, 219, 222, 1);
+        }
+      }
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+
+      .input {
+        margin-right: 16px;
+        width: 240px;
+
+        .input_wrapper {
+          height: 32px;
+          background-color: #ffffff1f;
+          border-radius: 8px;
+          border: 1px solid #ffffff1f;
+        }
+      }
+    }
+  }
+}

package/src/browser/override/layout/menu-bar/menu-bar.view.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { Avatar } from 'react-chat-elements';
+
+import { AppConfig, getIcon, useInjectable } from '@opensumi/ide-core-browser';
+import { Button, Icon, Input } from '@opensumi/ide-core-browser/lib/components';
+import { LAYOUT_VIEW_SIZE } from '@opensumi/ide-core-browser/lib/layout/constants';
+import { VIEW_CONTAINERS } from '@opensumi/ide-core-browser/lib/layout/view-id';
+import { CommandService } from '@opensumi/ide-core-common';
+import { IconMenuBar } from '@opensumi/ide-menu-bar/lib/browser/menu-bar.view';
+
+import { AI_RUN_DEBUG_COMMANDS } from '../../../../common/command';
+
+import * as styles from './menu-bar.module.less';
+
+export const AiMenuBarView = () => {
+  const commandService = useInjectable<CommandService>(CommandService);
+  const appConfig = useInjectable<AppConfig>(AppConfig);
+
+  const [latestWidth, setLatestWidth] = React.useState<number>(0);
+
+  const handleRun = () => {
+    commandService.executeCommand(AI_RUN_DEBUG_COMMANDS.id);
+  };
+
+  const handleRightPanel = () => {
+    /**
+     * 这里先这样处理，暂时没找到原因
+     */
+    const domID = 'ai_chat_panel';
+    const chatPanel = document.querySelector(`#${domID}`)?.parentElement?.parentElement;
+
+    if (chatPanel) {
+      let preWidth: number | string = chatPanel.style.width;
+      preWidth = parseInt(preWidth, 10);
+      setLatestWidth(preWidth);
+
+      if (preWidth !== 0) {
+        chatPanel.style.width = '0px';
+      } else {
+        chatPanel.style.width = latestWidth + 'px';
+      }
+    }
+  };
+
+  const MENUBAR_HEIGHT = React.useMemo(
+    () => appConfig.layoutViewSize?.MENUBAR_HEIGHT || LAYOUT_VIEW_SIZE.MENUBAR_HEIGHT,
+    [appConfig],
+  );
+
+  // quick-open-overlay
+  return (
+    <div id={VIEW_CONTAINERS.MENUBAR} className={styles.menu_bar_view} style={{ height: MENUBAR_HEIGHT }}>
+      {/* <span className={styles.menu_bar_logo} /> */}
+      <div className={styles.container}>
+        <div className={styles.left}>
+          <IconMenuBar />
+        </div>
+        <div className={styles.center}>
+          <div className={styles.run}>
+            <Button size={'large'} onClick={handleRun} className={styles.btn}>
+              <Icon className={getIcon('caret-right')} /> 运行
+            </Button>
+          </div>
+        </div>
+        <div className={styles.right}>
+          <div className={styles.input}>
+            <Input
+              className={styles.input_wrapper}
+              width={'100%'}
+              addonBefore={<Icon style={{ color: '#ffffff1f' }} className={getIcon('search')} />}
+              placeholder='请搜索并选择指令'
+              // onFocus={handleSelectFocus}
+            ></Input>
+          </div>
+          <div className={styles.ai_switch}>
+            {/* <Icon className={getIcon('search')} onClick={handleRightPanel}/> */}
+            <div
+              style={{
+                cursor: 'pointer',
+              }}
+              onClick={handleRightPanel}
+            >
+              <Avatar
+                src={'https://mdn.alipayobjects.com/huamei_htww6h/afts/img/A*6Y9PQp_rk7QAAAAAAAAAAAAADhl8AQ/original'}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/browser/override/layout/tabbar.view.tsx

@@ -0,0 +1,99 @@
+import clsx from 'classnames';
+import React, { useCallback } from 'react';
+
+import { ComponentRegistryInfo, SlotLocation, useInjectable } from '@opensumi/ide-core-browser';
+import { VIEW_CONTAINERS } from '@opensumi/ide-core-browser/lib/layout/view-id';
+import { LeftTabbarRenderer, splitVisibleTabs } from '@opensumi/ide-main-layout/lib/browser/tabbar/bar.view';
+import {
+  BaseTabPanelView,
+  ContainerView,
+  LeftTabPanelRenderer,
+  RightTabPanelRenderer,
+} from '@opensumi/ide-main-layout/lib/browser/tabbar/panel.view';
+import { TabRendererBase, TabbarConfig } from '@opensumi/ide-main-layout/lib/browser/tabbar/renderer.view';
+import { TabbarService, TabbarServiceFactory } from '@opensumi/ide-main-layout/lib/browser/tabbar/tabbar.service';
+
+import { Ai_CHAT_CONTAINER_VIEW_ID } from '../../../common';
+import { HorizontalVertical } from '../../components/lineVertical';
+
+// 将注册在 right bar 的组件渲染到 left bar
+export const AiLeftTabbarRenderer: React.FC = () => {
+  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(SlotLocation.right);
+
+  const renderOtherVisibleContainers = useCallback(
+    ({ props, renderContainers }) => {
+      const { currentContainerId, handleTabClick } = tabbarService;
+      const visibleContainers = tabbarService.visibleContainers.filter((container) => !container.options?.hideTab);
+
+      return (
+        <>
+          <HorizontalVertical />
+          {visibleContainers.map((component) => renderContainers(component, handleTabClick, currentContainerId))}
+        </>
+      );
+    },
+    [tabbarService],
+  );
+
+  return <LeftTabbarRenderer renderOtherVisibleContainers={renderOtherVisibleContainers} />;
+};
+
+export const AiLeftTabRenderer = ({
+  className,
+  components,
+}: {
+  className: string;
+  components: ComponentRegistryInfo[];
+}) => (
+  <TabRendererBase
+    side='left'
+    direction='left-to-right'
+    id={VIEW_CONTAINERS.LEFT_TABBAR_PANEL}
+    className={clsx(className, 'left-slot')}
+    components={components}
+    TabbarView={AiLeftTabbarRenderer}
+    TabpanelView={LeftTabPanelRenderer}
+  />
+);
+
+// right 面板只保留 panel
+export const AiRightTabRenderer = ({
+  className,
+  components,
+}: {
+  className: string;
+  components: ComponentRegistryInfo[];
+}) => (
+  <TabRendererBase
+    side='right'
+    direction='right-to-left'
+    id={VIEW_CONTAINERS.RIGHT_TABBAR_PANEL}
+    className={clsx(className, 'right-slot')}
+    components={components}
+    TabbarView={() => null}
+    TabpanelView={RightTabPanelRenderer}
+  />
+);
+
+export const ChatTabPanelRenderer: React.FC = () => (
+  <BaseTabPanelView PanelView={ContainerView} currentContainerId={Ai_CHAT_CONTAINER_VIEW_ID} />
+);
+
+// ai_chat 面板
+export const AiChatTabRenderer = ({
+  className,
+  components,
+}: {
+  className: string;
+  components: ComponentRegistryInfo[];
+}) => (
+  <TabRendererBase
+    side={Ai_CHAT_CONTAINER_VIEW_ID}
+    direction='right-to-left'
+    id={'ai_chat_panel'}
+    className={clsx(className, 'ai_chat-slot')}
+    components={components}
+    TabbarView={() => null}
+    TabpanelView={ChatTabPanelRenderer}
+  />
+);

package/src/browser/override/override.module.less

@@ -0,0 +1,32 @@
+.ai_marker_node_icon_container {
+  display: flex;
+  align-items: center;
+
+  .ai_icon {
+    color: #ffcc00;
+    display: none !important;
+    margin-right: 4px;
+  }
+}
+
+.ai_editor_tab_block_container {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  border-radius: 8px;
+  padding: 0 8px;
+  
+  &.active {
+    background-color: var(--tab-activeBackground);
+  }
+
+  div:first-child {
+    margin-right: 5px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    &::before {
+      background-size: 14px;
+      background-position: 2px;
+    }
+  }
+}