feat: support extension register panel to ai chat (#4012)

Author: bytemain

packages/ai-native/src/browser/ai-core.contribution.ts

@@ -84,7 +84,12 @@ import { IntelligentCompletionsController } from './contrib/intelligent-completi
 import { ProblemFixController } from './contrib/problem-fix/problem-fix.controller';
 import { RenameSingleHandler } from './contrib/rename/rename.handler';
 import { AIRunToolbar } from './contrib/run-toolbar/run-toolbar';
-import { AIChatTabRenderer, AILeftTabRenderer, AIRightTabRenderer } from './layout/tabbar.view';
+import {
+  AIChatTabRenderer,
+  AIChatTabRendererWithTab,
+  AILeftTabRenderer,
+  AIRightTabRenderer,
+} from './layout/tabbar.view';
 import { AIChatLogoAvatar } from './layout/view/avatar/avatar.view';
 import {
   AINativeCoreContribution,
@@ -446,7 +451,12 @@ export class AINativeBrowserContribution
   }
 
   registerRenderer(registry: SlotRendererRegistry): void {
-    registry.registerSlotRenderer(AI_CHAT_VIEW_ID, AIChatTabRenderer);
+    if (this.designLayoutConfig.supportExternalChatPanel) {
+      registry.registerSlotRenderer(AI_CHAT_VIEW_ID, AIChatTabRendererWithTab);
+    } else {
+      registry.registerSlotRenderer(AI_CHAT_VIEW_ID, AIChatTabRenderer);
+    }
+
     if (this.designLayoutConfig.useMergeRightWithLeftPanel) {
       registry.registerSlotRenderer(SlotLocation.left, AILeftTabRenderer);
       registry.registerSlotRenderer(SlotLocation.right, AIRightTabRenderer);
@@ -456,6 +466,8 @@ export class AINativeBrowserContribution
   registerComponent(registry: ComponentRegistry): void {
     registry.register(AI_CHAT_CONTAINER_ID, [], {
       component: AIChatView,
+      title: localize('aiNative.chat.ai.assistant.name'),
+      iconClass: getIcon('magic-wand'),
       containerId: AI_CHAT_CONTAINER_ID,
     });
     registry.register(AI_MENU_BAR_DEBUG_TOOLBAR, {

packages/ai-native/src/browser/layout/layout.module.less

@@ -169,3 +169,7 @@
 .ai_chat_view_container {
   background-color: unset;
 }
+
+.AI-Chat-slot {
+  background-color: var(--activityBar-background) !important;
+}

packages/ai-native/src/browser/layout/tabbar.view.tsx

@@ -15,6 +15,7 @@ import { localize } from '@opensumi/ide-core-common';
 import { DesignLeftTabRenderer, DesignRightTabRenderer } from '@opensumi/ide-design/lib/browser/layout/tabbar.view';
 import { IMainLayoutService } from '@opensumi/ide-main-layout';
 import {
+  ChatTabbarRenderer2,
   IconElipses,
   IconTabView,
   LeftTabbarRenderer,
@@ -67,6 +68,31 @@ export const AIChatTabRenderer = ({
   />
 );
 
+export const AIChatTabRendererWithTab = ({
+  className,
+  components,
+}: {
+  className: string;
+  components: ComponentRegistryInfo[];
+}) => (
+  <TabRendererBase
+    side={AI_CHAT_VIEW_ID}
+    direction={EDirection.RightToLeft}
+    id={styles.ai_chat_panel}
+    className={cls(className, `${AI_CHAT_VIEW_ID}-slot`, 'design_right_slot')}
+    components={components}
+    TabbarView={() => <ChatTabbarRenderer2 />}
+    TabpanelView={() => (
+      <BaseTabPanelView
+        PanelView={ContainerView}
+        PanelViewProps={{
+          className: styles.ai_chat_view_container,
+        }}
+      />
+    )}
+  />
+);
+
 export const AILeftTabRenderer = ({
   className,
   components,

packages/core-browser/src/layout/constants.ts

@@ -157,6 +157,7 @@ export class DesignLayoutConfig implements IDesignLayoutConfig {
     useMergeRightWithLeftPanel: false,
     useMenubarView: false,
     menubarLogo: '',
+    supportExternalChatPanel: false,
   };
 
   setLayout(...value: (Partial<IDesignLayoutConfig> | undefined)[]): void {
@@ -170,4 +171,8 @@ export class DesignLayoutConfig implements IDesignLayoutConfig {
   get menubarLogo(): string {
     return this.internalLayout.menubarLogo;
   }
+
+  get supportExternalChatPanel(): boolean {
+    return this.internalLayout.supportExternalChatPanel;
+  }
 }

packages/core-common/src/types/ai-native/index.ts

@@ -60,6 +60,7 @@ export interface IDesignLayoutConfig {
    * set menubar logo
    */
   menubarLogo?: string;
+  supportExternalChatPanel?: boolean;
 }
 
 export interface IAINativeConfig {

packages/extension/src/browser/vscode/contributes/view-containers.ts

@@ -1,12 +1,13 @@
 import { Autowired, Injectable } from '@opensumi/di';
+import { AI_CHAT_VIEW_ID } from '@opensumi/ide-ai-native';
 import { DisposableCollection, LifeCyclePhase } from '@opensumi/ide-core-common';
 import { IMainLayoutService } from '@opensumi/ide-main-layout';
 import { IIconService, IconType } from '@opensumi/ide-theme';
 
 import { Contributes, LifeCycle, VSCodeContributePoint } from '../../../common';
 import { AbstractExtInstanceManagementService } from '../../types';
 
-type LocationKey = 'panel' | 'activitybar';
+type LocationKey = 'panel' | 'activitybar' | 'ai-chat';
 
 export type ViewContainersContribution = {
   [key in LocationKey]: ViewContainerItem;
@@ -35,11 +36,17 @@ export class ViewContainersContributionPoint extends VSCodeContributePoint<ViewC
 
   private disposableCollection: DisposableCollection = new DisposableCollection();
 
-  private convertLocationToSide(location: 'activitybar' | 'panel'): 'left' | 'bottom' {
-    if (location === 'activitybar') {
-      return 'left';
+  private convertLocationToSide(location: LocationKey): 'left' | 'bottom' | typeof AI_CHAT_VIEW_ID {
+    switch (location) {
+      case 'activitybar': {
+        return 'left';
+      }
+      case 'ai-chat': {
+        return AI_CHAT_VIEW_ID;
+      }
+      default:
+        return 'bottom';
     }
-    return 'bottom';
   }
 
   contribute() {
@@ -50,7 +57,8 @@ export class ViewContainersContributionPoint extends VSCodeContributePoint<ViewC
         continue;
       }
       for (const location of Object.keys(contributes)) {
-        const side = this.convertLocationToSide(location as LocationKey);
+        const side: string = this.convertLocationToSide(location as LocationKey);
+
         for (const container of contributes[location]) {
           const handlerId = this.mainlayoutService.collectTabbarComponent(
             [],

packages/main-layout/package.json

@@ -19,11 +19,11 @@
   },
   "dependencies": {
     "@opensumi/ide-components": "workspace:*",
-    "@opensumi/ide-core-common": "workspace:*"
-  },
-  "devDependencies": {
+    "@opensumi/ide-core-common": "workspace:*",
     "@opensumi/ide-core-browser": "workspace:*",
-    "@opensumi/ide-dev-tool": "workspace:*",
     "@opensumi/ide-theme": "workspace:*"
+  },
+  "devDependencies": {
+    "@opensumi/ide-dev-tool": "workspace:*"
   }
 }

packages/main-layout/src/browser/tabbar/bar.view.tsx

@@ -387,3 +387,27 @@ export const BottomTabbarRenderer: React.FC = () => {
     </div>
   );
 };
+
+export const ChatTabbarRenderer2: React.FC<{ barSize?: number; style?: React.CSSProperties }> = (props) => {
+  const { barSize = 32, style } = props;
+  const { side } = React.useContext(TabbarConfig);
+  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(side);
+  useEffect(() => {
+    tabbarService.setIsLatter(true);
+  }, [tabbarService]);
+  const styles_right_tab_bar = useDesignStyles(styles.ai_right_tab_bar, 'ai_right_tab_bar');
+  const styles_right_tab = useDesignStyles(styles.ai_right_tab, 'ai_right_tab');
+
+  return (
+    <div id={side} className={styles_right_tab_bar} style={style} onContextMenu={tabbarService.handleContextMenu}>
+      <TabbarViewBase
+        tabSize={32}
+        MoreTabView={IconElipses}
+        tabClassName={styles_right_tab}
+        TabView={IconTabView}
+        barSize={barSize}
+        panelBorderSize={1}
+      />
+    </div>
+  );
+};

packages/main-layout/src/browser/tabbar/styles.module.less

@@ -430,3 +430,41 @@
     }
   }
 }
+
+.ai_right_tab_bar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: var(--activityBar-background);
+  border-left: 1px solid var(--activityBar-border);
+  border-top: 1px solid var(--activityBar-border);
+
+  div[class*='tab_bar'] {
+    height: 100%;
+    div[class*='icon_tab'] {
+      margin: 0;
+      margin-bottom: 4px;
+    }
+  }
+
+  div[class*='design-bar_content'] {
+    width: 100%;
+    overflow-y: auto;
+
+    :global(.active) {
+      div[class*='design-icon_tab'] {
+        background-color: var(--badge-background);
+        color: var(--badge-foreground);
+
+        &::before {
+          content: none;
+        }
+      }
+    }
+
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
+}