feat: support ai native layout config

packages/ai-native/package.json

@@ -23,6 +23,7 @@
     "@opensumi/ide-core-common": "workspace:*",
     "@opensumi/ide-core-node": "workspace:*",
     "@opensumi/ide-debug": "workspace:*",
+    "@opensumi/ide-design": "workspace:*",
     "@opensumi/ide-editor": "workspace:*",
     "@opensumi/ide-file-service": "workspace:*",
     "@opensumi/ide-file-tree-next": "workspace:*",

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

@@ -14,6 +14,7 @@ import {
   KeybindingContribution,
   KeybindingRegistry,
   KeybindingScope,
+  SlotLocation,
   SlotRendererContribution,
   SlotRendererRegistry,
   getIcon,
@@ -31,6 +32,7 @@ import {
   InlineChatFeatureRegistryToken,
   RenameCandidatesProviderRegistryToken,
   ResolveConflictRegistryToken,
+  runWhenIdle,
 } from '@opensumi/ide-core-common';
 import { IEditor } from '@opensumi/ide-editor';
 import { BrowserEditorContribution, IEditorFeatureRegistry } from '@opensumi/ide-editor/lib/browser';
@@ -43,8 +45,8 @@ import { AINativeService } from './ai-native.service';
 import { AIChatView } from './chat/chat.view';
 import { AIInlineCompletionsProvider } from './inline-completions/completeProvider';
 import { AICompletionsService } from './inline-completions/service/ai-completions.service';
-import { AIChatLayoutConfig } from './layout/layout-config';
-import { AIChatTabRenderer } from './layout/tabbar.view';
+import { AIChatLayoutConfig, AIMenubarLayoutConfig } from './layout/layout-config';
+import { AIChatTabRenderer, AILeftTabRenderer, AIRightTabRenderer } from './layout/tabbar.view';
 import {
   AINativeCoreContribution,
   IChatFeatureRegistry,
@@ -113,11 +115,13 @@ export class AINativeBrowserContribution
   }
 
   initialize() {
-    this.aiNativeConfigService.enable();
+    this.aiNativeConfigService.enableCapabilities();
 
-    const supportsChatAssistant = this.aiNativeConfigService.capabilities.supportsChatAssistant;
+    const { supportsChatAssistant } = this.aiNativeConfigService.capabilities;
+    const { useMenubarView } = this.aiNativeConfigService.layout;
 
     let layoutConfig = this.appConfig.layoutConfig;
+    let layoutViewSize = this.appConfig.layoutViewSize;
 
     if (supportsChatAssistant) {
       layoutConfig = {
@@ -126,7 +130,20 @@ export class AINativeBrowserContribution
       };
     }
 
+    if (useMenubarView) {
+      layoutViewSize = {
+        ...layoutViewSize,
+        menubarHeight: 48,
+      };
+
+      layoutConfig = {
+        ...layoutConfig,
+        ...AIMenubarLayoutConfig,
+      };
+    }
+
     this.appConfig.layoutConfig = layoutConfig;
+    this.appConfig.layoutViewSize = layoutViewSize;
   }
 
   private registerFeature() {
@@ -202,8 +219,10 @@ export class AINativeBrowserContribution
   }
 
   registerRenderer(registry: SlotRendererRegistry): void {
-    if (this.aiNativeConfigService.capabilities.supportsOpenSumiDesign) {
-      registry.registerSlotRenderer(AI_CHAT_CONTAINER_VIEW_ID, AIChatTabRenderer);
+    registry.registerSlotRenderer(AI_CHAT_CONTAINER_VIEW_ID, AIChatTabRenderer);
+    if (this.aiNativeConfigService.layout.useMergeRightWithLeftPanel) {
+      registry.registerSlotRenderer(SlotLocation.left, AILeftTabRenderer);
+      registry.registerSlotRenderer(SlotLocation.right, AIRightTabRenderer);
     }
   }
 

packages/ai-native/src/browser/index.ts

@@ -20,6 +20,7 @@ import { ChatAgentViewService } from './chat/chat-agent.view.service';
 import { ChatManagerService } from './chat/chat-manager.service';
 import { ChatFeatureRegistry } from './chat/chat.feature.registry';
 import { ChatService } from './chat/chat.service';
+import { AIMenuBarContribution } from './layout/menu-bar/menu-bar.contribution';
 import { ResolveConflictRegistry } from './merge-conflict/merge-conflict.feature.registry';
 import { RenameCandidatesProviderRegistry } from './rename/rename.feature.registry';
 import { AINativeCoreContribution } from './types';
@@ -31,6 +32,7 @@ export class AINativeModule extends BrowserModule {
   contributionProvider = AINativeCoreContribution;
   providers: Provider[] = [
     AINativeBrowserContribution,
+    AIMenuBarContribution,
     {
       token: InlineChatFeatureRegistryToken,
       useClass: InlineChatFeatureRegistry,

packages/ai-native/src/browser/layout/layout-config.ts

@@ -1,7 +1,18 @@
-import { AI_CHAT_CONTAINER_VIEW_ID } from '../../common';
+import { SlotLocation } from '@opensumi/ide-core-browser';
+
+import { AI_CHAT_CONTAINER_VIEW_ID, AI_MENUBAR_CONTAINER_VIEW_ID } from '../../common';
 
 export const AIChatLayoutConfig = {
   [AI_CHAT_CONTAINER_VIEW_ID]: {
     modules: [AI_CHAT_CONTAINER_VIEW_ID],
   },
 };
+
+export const AIMenubarLayoutConfig = {
+  [SlotLocation.top]: {
+    modules: [AI_MENUBAR_CONTAINER_VIEW_ID],
+  },
+};
+
+export const AI_MENU_BAR_RIGHT = 'AI_menu_bar_right';
+export const AI_MENU_BAR_LEFT = 'AI_menu_bar_left';

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

@@ -69,6 +69,7 @@
 
     .rce-ai-msg {
       margin: 8px 32px 8px 16px;
+
       > .rce-mbox {
         // margin-bottom: 28px;
         width: 100%;
@@ -117,3 +118,22 @@
     }
   }
 }
+
+.right_slot_container_wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--sideBar-border);
+    padding: 0 10px;
+  }
+
+  .container {
+    flex: 1;
+  }
+}

packages/ai-native/src/browser/layout/menu-bar/menu-bar.contribution.tsx

@@ -0,0 +1,48 @@
+import { Autowired, Injectable } from '@opensumi/di';
+import { ComponentContribution, ComponentRegistry, Disposable, Domain } from '@opensumi/ide-core-browser';
+import { IMenuRegistry, IMenubarItem, ISubmenuItem, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+import { MenubarStore } from '@opensumi/ide-menu-bar/lib/browser/menu-bar.store';
+
+import { AI_MENUBAR_CONTAINER_VIEW_ID } from '../../../common';
+
+import { AIMenuBarView } from './menu-bar.view';
+
+@Domain(ComponentContribution)
+export class AIMenuBarContribution extends Disposable implements ComponentContribution {
+  @Autowired(MenubarStore)
+  private readonly menubarStore: MenubarStore;
+
+  @Autowired(IMenuRegistry)
+  private readonly menuRegistry: IMenuRegistry;
+
+  constructor() {
+    super();
+
+    this.menubarStore.unregisterMenusBarByCompact(MenuId.AIMenuBarTopExtra);
+
+    this.addDispose(
+      this.menubarStore.onDidMenuBarChange((menubarItems: IMenubarItem[]) => {
+        this.menuRegistry.registerMenuItems(
+          MenuId.AIMenuBarTopExtra,
+          menubarItems.map(
+            (item: IMenubarItem) =>
+              ({
+                label: item.label,
+                submenu: item.id,
+                iconClass: item.iconClass,
+                group: '1_navigation',
+                order: 100,
+              } as ISubmenuItem),
+          ),
+        );
+      }),
+    );
+  }
+
+  registerComponent(registry: ComponentRegistry): void {
+    registry.register(AI_MENUBAR_CONTAINER_VIEW_ID, {
+      component: AIMenuBarView,
+      id: AI_MENUBAR_CONTAINER_VIEW_ID,
+    });
+  }
+}

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

@@ -0,0 +1,118 @@
+.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 12px 0 8px;
+
+    .left {
+      display: flex;
+      align-items: center;
+      z-index: 2;
+
+      .enhance_menu {
+        padding: 8px;
+      }
+
+      .dividing {
+        margin-left: 5px;
+        width: 2px;
+        height: 12px;
+        background-color: var(--editorGroup-border);
+      }
+
+      .top_menus_bar {
+        margin-left: 6px;
+        display: flex;
+        align-items: center;
+        border-radius: 6px;
+
+        .ai_enhance_menu {
+          padding: 8px 6px;
+          height: 32px;
+        }
+
+        .caret_icon {
+          font-size: 14px;
+          margin-left: 4px;
+        }
+
+        .extra_top_icon {
+          width: 16px;
+          height: 16px;
+          background-image: url(./logo.svg);
+          background-repeat: no-repeat;
+          background-size: 100%;
+
+          &::before {
+            content: initial;
+          }
+
+          &:hover {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+
+    .center {
+      text-align: center;
+      position: absolute;
+      left: 0;
+      right: 0;
+      z-index: 1;
+
+      .run {
+        .btn {
+          border-radius: 6px;
+          padding: 0 13px 0 11px;
+          border: 0;
+        }
+        span {
+          color: #58ce5f;
+          font-size: 12px;
+        }
+      }
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+      z-index: 2;
+
+      .input {
+        margin-right: 16px;
+        width: 240px;
+        flex-shrink: 0;
+
+        .input_wrapper {
+          height: 32px;
+          background-color: var(--ai-native-border-color-common);
+          border-radius: 8px;
+          border: 1px solid var(--ai-native-input-color);
+        }
+      }
+
+      .ai_switch {
+        height: 16px;
+        width: 16px;
+        min-width: 16px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .avatar_icon_large {
+          width: 16px;
+          height: 16px;
+          font-size: 16px !important;
+        }
+      }
+    }
+  }
+}