@opensumi/ide-ai-native 2.26.9-next-1695201123.0

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

@@ -0,0 +1,261 @@
+: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;
+  }
+}
+
+.ai_native_panel_container {
+  margin-right: 16px;
+  width: initial;
+
+  .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_slot_main {
+    height: 100%;
+    width: 100%;
+    background-color: #151b21;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 12px;
+    overflow: hidden;
+
+    /**
+    * ---------------- 覆盖 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;
+    }
+  }
+}
+
+.ai_left_slot {
+  div[class*='tab_panel___'] {
+    border-right: none;
+  }
+
+  div[class*='file_tree_node___'] {
+    border-radius: 4px;
+  }
+
+  div[class*='icon_tab___'] {
+    height: 32px;
+    width: 32px;
+    border-radius: 8px;
+
+    :global {
+      .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;
+  }
+
+  li[class*='left_tab___'] {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  div[class*='left_tab_bar___'] {
+    border-right: none;
+    border-top: none;
+
+    div[class*='bar_content___'] {
+      width: 100%;
+      overflow-y: auto;
+
+      :global {
+        .active {
+          div[class*='icon_tab___'] {
+            background-color: var(--activityBar-activeBorder);
+
+            &::before {
+              content: none;
+            }
+          }
+        }
+      }
+
+      &::-webkit-scrollbar {
+        display: none !important;
+      }
+    }
+  }
+}
+
+.ai_bottom_slot {
+  /**
+  * ---------------- 覆盖编辑器面板底部 tabbar 样式 ---------------------
+  */
+  div[class*='tab_bar___'] {
+    height: 100%;
+  }
+
+  li[class*='bottom_tab___'] {
+    height: 100%;
+    line-height: 32px;
+  }
+
+  div[class*='bottom_bar_container___'] {
+    width: 100%;
+    height: 32px;
+    min-height: 32px;
+  }
+}
+
+/**
+* -------------------------------------------- 右侧 chat 面板样式 --------------------------------------------
+*/
+#ai_chat_panel {
+  height: 100%;
+
+  :global {
+    .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);
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+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';
+
+import * as styles from './layout.module.less';
+
+export const AiMainSlotRenderer = (props?: IChildComponentProps) => {
+  const { colors, layout } = getStorageValue();
+
+  return (
+    <SplitPanel
+      id='ai-native-main-horizontal-0'
+      flex={1}
+      className={styles.ai_native_panel_container}
+      resizeHandleClassName={styles.ai_native_slot_resize_horizontal}
+    >
+      <SplitPanel
+        id='ai-native-main-horizontal-1'
+        flex={1}
+        flexGrow={1}
+        resizeHandleClassName={styles.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={styles.ai_native_slot_main}
+        >
+          <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 = 'div[id*=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,91 @@
+import clsx from 'classnames';
+import React, { useCallback } from 'react';
+
+import { ComponentRegistryInfo, SlotLocation, useInjectable } from '@opensumi/ide-core-browser';
+import { LeftTabbarRenderer } from '@opensumi/ide-main-layout/lib/browser/tabbar/bar.view';
+import { BaseTabPanelView, ContainerView } from '@opensumi/ide-main-layout/lib/browser/tabbar/panel.view';
+import {
+  BottomTabRenderer,
+  LeftTabRenderer,
+  RightTabRenderer,
+  TabRendererBase,
+} 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';
+
+import * as styles from './layout.module.less';
+
+// 将注册在 right bar 的组件渲染到 left bar
+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[];
+}) => (
+  <LeftTabRenderer
+    className={clsx(className, styles.ai_left_slot)}
+    components={components}
+    tabbarView={AiLeftTabbarRenderer}
+  />
+);
+
+// right 面板只保留 panel
+export const AiRightTabRenderer = ({
+  className,
+  components,
+}: {
+  className: string;
+  components: ComponentRegistryInfo[];
+}) => <RightTabRenderer className={className} components={components} tabbarView={() => null} />;
+
+// 编辑器 bottom 面板
+export const AiBottomTabRenderer = ({
+  className,
+  components,
+}: {
+  className: string;
+  components: ComponentRegistryInfo[];
+}) => <BottomTabRenderer className={clsx(className, styles.ai_bottom_slot)} components={components} />;
+
+// ai_chat 面板
+export const AiChatTabRenderer = ({
+  className,
+  components,
+}: {
+  className: string;
+  components: ComponentRegistryInfo[];
+}) => (
+  <TabRendererBase
+    side={Ai_CHAT_CONTAINER_VIEW_ID}
+    direction='right-to-left'
+    id={styles.ai_chat_panel}
+    className={clsx(className, `${Ai_CHAT_CONTAINER_VIEW_ID}-slot`)}
+    components={components}
+    TabbarView={() => null}
+    TabpanelView={() => <BaseTabPanelView PanelView={ContainerView} currentContainerId={Ai_CHAT_CONTAINER_VIEW_ID} />}
+  />
+);

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;
+    }
+  }
+}