fix(styles): fix design module style issues (#3586)

.github/workflows/e2e.yml

@@ -51,7 +51,7 @@ jobs:
         run: |
           yarn run download-extension
           yarn run rebuild:node
-          SUPPORT_LOAD_WORKSPACE_BY_HASH=true yarn start &
+          SUPPORT_LOAD_WORKSPACE_BY_HASH=true yarn start:e2e &
           bash tools/playwright/scripts/wait.sh && cd tools/playwright && yarn run ui-tests-ci
 
       - name: Upload test results

package.json

@@ -37,6 +37,7 @@
     "format": "yarn run lint:fix && prettier \"**/*.{js,jsx,ts,tsx,html,css,less}\" --write",
     "rebuild:node": "sumi rebuild",
     "test:module": "cross-env NODE_OPTIONS=--max-old-space-size=5120 tsx ./scripts/module-jest",
+    "start:e2e": "yarn start --script=start:e2e",
     "test:ui": "tsx ./scripts/run-ui-tests",
     "test:ui-ci": "tsx ./scripts/run-ui-tests --ci=true",
     "test:ui-headful": "tsx ./scripts/run-ui-tests --headful=true",

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

@@ -11,9 +11,11 @@ import {
   ComponentRegistry,
   ContributionProvider,
   Domain,
+  IEditorExtensionContribution,
   KeybindingContribution,
   KeybindingRegistry,
   KeybindingScope,
+  MonacoContribution,
   PreferenceService,
   SlotLocation,
   SlotRendererContribution,
@@ -28,8 +30,9 @@ import {
   AI_INLINE_COMPLETION_VISIBLE,
 } from '@opensumi/ide-core-browser/lib/ai-native/command';
 import { InlineChatIsVisible } from '@opensumi/ide-core-browser/lib/contextkey/ai-native';
-import { LayoutViewSizeConfig } from '@opensumi/ide-core-browser/lib/layout/constants';
+import { DesignLayoutConfig } from '@opensumi/ide-core-browser/lib/layout/constants';
 import {
+  AI_NATIVE_SETTING_GROUP_TITLE,
   ChatFeatureRegistryToken,
   ChatRenderRegistryToken,
   CommandService,
@@ -43,16 +46,19 @@ import { IEditor } from '@opensumi/ide-editor';
 import { BrowserEditorContribution, IEditorFeatureRegistry } from '@opensumi/ide-editor/lib/browser';
 import { IMainLayoutService } from '@opensumi/ide-main-layout';
 import { ISettingRegistry, SettingContribution } from '@opensumi/ide-preferences';
+import { EditorContributionInstantiation } from '@opensumi/monaco-editor-core/esm/vs/editor/browser/editorExtensions';
 
-import { AI_CHAT_CONTAINER_ID, AI_CHAT_VIEW_ID, AI_MENU_BAR_DEBUG_TOOLBAR } from '../common';
+import { AI_CHAT_CONTAINER_ID, AI_CHAT_LOGO_AVATAR_ID, AI_CHAT_VIEW_ID, AI_MENU_BAR_DEBUG_TOOLBAR } from '../common';
 
 import { AIEditorContribution } from './ai-editor.contribution';
 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, AIMenubarLayoutConfig } from './layout/layout-config';
+import { AIChatLayoutConfig } from './layout/layout-config';
 import { AIChatTabRenderer, AILeftTabRenderer, AIRightTabRenderer } from './layout/tabbar.view';
+import { AIChatLogoAvatar } from './layout/view/avatar/avatar.view';
+import { OpenSumiLightBulbWidget } from './light-bulb-widget';
 import { AIRunToolbar } from './run/toolbar/run-toolbar';
 import {
   AINativeCoreContribution,
@@ -71,6 +77,7 @@ import {
   KeybindingContribution,
   ComponentContribution,
   SlotRendererContribution,
+  MonacoContribution,
 )
 export class AINativeBrowserContribution
   implements
@@ -80,7 +87,8 @@ export class AINativeBrowserContribution
     SettingContribution,
     KeybindingContribution,
     ComponentContribution,
-    SlotRendererContribution
+    SlotRendererContribution,
+    MonacoContribution
 {
   @Autowired(INJECTOR_TOKEN)
   private readonly injector: Injector;
@@ -112,6 +120,9 @@ export class AINativeBrowserContribution
   @Autowired(AINativeConfigService)
   private readonly aiNativeConfigService: AINativeConfigService;
 
+  @Autowired(DesignLayoutConfig)
+  private readonly designLayoutConfig: DesignLayoutConfig;
+
   @Autowired(AICompletionsService)
   private aiCompletionsService: AICompletionsService;
 
@@ -134,11 +145,9 @@ export class AINativeBrowserContribution
   initialize() {
     this.aiNativeConfigService.enableCapabilities();
 
-    const { supportsChatAssistant, supportsOpenSumiDesign } = this.aiNativeConfigService.capabilities;
-    const { useMenubarView } = this.aiNativeConfigService.layout;
+    const { supportsChatAssistant } = this.aiNativeConfigService.capabilities;
 
     let layoutConfig = this.appConfig.layoutConfig;
-    const layoutViewSize = this.appConfig.layoutViewSize as LayoutViewSizeConfig;
 
     if (supportsChatAssistant) {
       layoutConfig = {
@@ -147,22 +156,14 @@ export class AINativeBrowserContribution
       };
     }
 
-    if (useMenubarView) {
-      layoutViewSize.setMenubarHeight(48);
-      layoutConfig = {
-        ...layoutConfig,
-        ...AIMenubarLayoutConfig,
-      };
-    }
+    this.appConfig.layoutConfig = layoutConfig;
+  }
 
-    if (supportsOpenSumiDesign) {
-      layoutViewSize.setEditorTabsHeight(36);
-      layoutViewSize.setStatusBarHeight(36);
-      layoutViewSize.setAccordionHeaderSizeHeight(36);
+  registerEditorExtensionContribution(register: IEditorExtensionContribution<any[]>): void {
+    const { supportsInlineChat } = this.aiNativeConfigService.capabilities;
+    if (supportsInlineChat) {
+      register(OpenSumiLightBulbWidget.ID, OpenSumiLightBulbWidget, EditorContributionInstantiation.Lazy);
     }
-
-    this.appConfig.layoutConfig = layoutConfig;
-    this.appConfig.layoutViewSize = layoutViewSize;
   }
 
   onDidStart() {
@@ -200,7 +201,7 @@ export class AINativeBrowserContribution
   registerSetting(registry: ISettingRegistry) {
     registry.registerSettingGroup({
       id: AI_NATIVE_SETTING_GROUP_ID,
-      title: AI_NATIVE_SETTING_GROUP_ID,
+      title: AI_NATIVE_SETTING_GROUP_TITLE,
       iconClass: getIcon('magic-wand'),
     });
 
@@ -274,7 +275,7 @@ export class AINativeBrowserContribution
 
   registerRenderer(registry: SlotRendererRegistry): void {
     registry.registerSlotRenderer(AI_CHAT_VIEW_ID, AIChatTabRenderer);
-    if (this.aiNativeConfigService.layout.useMergeRightWithLeftPanel) {
+    if (this.designLayoutConfig.useMergeRightWithLeftPanel) {
       registry.registerSlotRenderer(SlotLocation.left, AILeftTabRenderer);
       registry.registerSlotRenderer(SlotLocation.right, AIRightTabRenderer);
     }
@@ -289,6 +290,10 @@ export class AINativeBrowserContribution
       id: AI_MENU_BAR_DEBUG_TOOLBAR,
       component: AIRunToolbar,
     });
+    registry.register(AI_CHAT_LOGO_AVATAR_ID, {
+      id: AI_CHAT_LOGO_AVATAR_ID,
+      component: AIChatLogoAvatar,
+    });
   }
 
   registerKeybindings(keybindings: KeybindingRegistry): void {

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

@@ -4,6 +4,7 @@ import { Autowired, INJECTOR_TOKEN, Injectable, Injector } from '@opensumi/di';
 import { AINativeConfigService, IAIInlineChatService, PreferenceService } from '@opensumi/ide-core-browser';
 import { IBrowserCtxMenu } from '@opensumi/ide-core-browser/lib/menu/next/renderer/ctxmenu/browser';
 import {
+  AIInlineChatContentWidgetId,
   AINativeSettingSectionsId,
   AISerivceType,
   CancelResponse,
@@ -32,8 +33,6 @@ import * as monaco from '@opensumi/ide-monaco';
 import { monaco as monacoApi } from '@opensumi/ide-monaco/lib/browser/monaco-api';
 import { MonacoTelemetryService } from '@opensumi/ide-monaco/lib/browser/telemetry.service';
 
-import { AIInlineChatContentWidget } from '../common';
-
 import { AINativeService } from './ai-native.service';
 import { AIInlineCompletionsProvider } from './inline-completions/completeProvider';
 import { AICompletionsService } from './inline-completions/service/ai-completions.service';
@@ -239,7 +238,7 @@ export class AIEditorContribution extends Disposable implements IEditorFeatureCo
       monacoEditor.onMouseUp((event) => {
         const target = event.target;
         const detail = (target as any).detail;
-        if (detail && typeof detail === 'string' && detail === AIInlineChatContentWidget) {
+        if (detail && typeof detail === 'string' && detail === AIInlineChatContentWidgetId) {
           needShowInlineChat = false;
         } else {
           needShowInlineChat = true;

packages/ai-native/src/browser/ai-terminal/component/terminal-inline-chat-controller.tsx

@@ -21,12 +21,12 @@ export const TerminalInlineWidgetForDetection = ({ actions, onClickItem }: ITerm
   return (
     <div
       onMouseOver={(e) => {
-        e.currentTarget.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
         setDisplayAIButton(true);
+        e.currentTarget.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
       }}
       onMouseOut={(e) => {
-        e.currentTarget.style.backgroundColor = '';
         setDisplayAIButton(false);
+        e.currentTarget.style.backgroundColor = '';
       }}
       style={{
         width: '100%',

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

@@ -2,12 +2,15 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: var(--panel-background);
   border-radius: 12px;
   overflow: hidden;
   font-size: 14px;
   user-select: text;
 
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  border-top: none;
+
   .ai_chat_hexagon_box {
     width: 20px;
     height: 10px;
@@ -124,6 +127,7 @@
   .body_container {
     display: flex;
     height: calc(100% - 36px);
+    background-color: var(--panel-background);
 
     .left_bar {
       display: flex;
@@ -156,6 +160,9 @@
 
         &::-webkit-scrollbar {
           width: 4px;
+          &:hover {
+            width: 10px;
+          }
         }
 
         .message_list {

packages/ai-native/src/browser/chat/chat.view.tsx

@@ -19,13 +19,7 @@ import { MonacoCommandRegistry } from '@opensumi/ide-editor/lib/browser/monaco-c
 import { IMainLayoutService } from '@opensumi/ide-main-layout';
 
 import 'react-chat-elements/dist/main.css';
-import {
-  AI_CHAT_VIEW_ID,
-  ChatMessageRole,
-  IChatAgentService,
-  IChatInternalService,
-  IChatMessageStructure,
-} from '../../common';
+import { AI_CHAT_VIEW_ID, IChatAgentService, IChatInternalService, IChatMessageStructure } from '../../common';
 import { CodeBlockWrapperInput } from '../components/ChatEditor';
 import { ChatInput } from '../components/ChatInput';
 import { ChatMarkdown } from '../components/ChatMarkdown';

packages/ai-native/src/browser/components/StreamReplyRender.tsx

@@ -1,22 +1,19 @@
 import hljs from 'highlight.js';
 import React, { useCallback, useEffect, useMemo } from 'react';
 
-import { useInjectable } from '@opensumi/ide-core-browser';
-import { DisposableCollection } from '@opensumi/ide-core-browser';
+import { DisposableCollection, useInjectable } from '@opensumi/ide-core-browser';
 import { ChatRenderRegistryToken, IAIReporter, localize } from '@opensumi/ide-core-common';
 
 import { IChatInternalService } from '../../common/index';
 import { ChatInternalService } from '../chat/chat.internal.service';
 import { ChatRenderRegistry } from '../chat/chat.render.registry';
 import { MsgHistoryManager } from '../model/msg-history-manager';
-import { EMsgStreamStatus } from '../model/msg-stream-manager';
-import { IMsgStreamChoices, MsgStreamManager } from '../model/msg-stream-manager';
+import { EMsgStreamStatus, IMsgStreamChoices, MsgStreamManager } from '../model/msg-stream-manager';
 
 import { ChatMarkdown } from './ChatMarkdown';
 import { ChatThinking, ChatThinkingResult } from './ChatThinking';
 import styles from './components.module.less';
 
-
 interface IStreamMsgWrapperProps {
   sessionId: string;
   prompt: string;

packages/ai-native/src/browser/components/WelcomeMsg.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { useInjectable } from '@opensumi/ide-core-browser';
 import { Icon, Tooltip } from '@opensumi/ide-core-browser/lib/components';
+import { withPrevented } from '@opensumi/ide-core-browser/lib/dom/event';
 import {
   ChatFeatureRegistryToken,
   ChatRenderRegistryToken,
@@ -20,7 +21,6 @@ import { ChatThinking } from '../components/ChatThinking';
 import { extractIcon } from '../components/utils';
 import { EMsgStreamStatus } from '../model/msg-stream-manager';
 
-
 import styles from './components.module.less';
 
 export const WelcomeMessage = () => {
@@ -83,11 +83,10 @@ export const WelcomeMessage = () => {
           {welcomeSampleQuestions.concat(sampleQuestions).map((data: any, index) => {
             const node = (
               <a
-                href='javascript:void(0)'
                 className={styles.link_item}
-                onClick={() => {
+                onClick={withPrevented(() => {
                   aiChatService.sendMessage(chatAgentService.parseMessage(data.message));
-                }}
+                })}
               >
                 {data.icon ? <Icon className={data.icon} style={{ color: 'inherit', marginRight: '4px' }} /> : ''}
                 <span>{data.title}</span>

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

@@ -227,6 +227,9 @@
       line-height: 16px;
       &::-webkit-scrollbar {
         width: 4px;
+        &:hover {
+          width: 10px;
+        }
       }
     }
 

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

@@ -26,7 +26,6 @@ import { ChatFeatureRegistry } from './chat/chat.feature.registry';
 import { ChatInternalService } from './chat/chat.internal.service';
 import { ChatRenderRegistry } from './chat/chat.render.registry';
 import { LanguageParserService } from './languages/service';
-import { AIMenuBarContribution } from './layout/menu-bar/menu-bar.contribution';
 import { MergeConflictContribution } from './merge-conflict';
 import { ResolveConflictRegistry } from './merge-conflict/merge-conflict.feature.registry';
 import { RenameCandidatesProviderRegistry } from './rename/rename.feature.registry';
@@ -39,7 +38,6 @@ export class AINativeModule extends BrowserModule {
   contributionProvider = AINativeCoreContribution;
   providers: Provider[] = [
     AINativeBrowserContribution,
-    AIMenuBarContribution,
     TerminalAIContribution,
     MergeConflictContribution,
     {

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

@@ -1,18 +1,21 @@
-import { SlotLocation } from '@opensumi/ide-core-browser';
+import { DESIGN_MENU_BAR_LEFT, DESIGN_MENU_BAR_RIGHT } from '@opensumi/ide-design';
 
-import { AI_CHAT_CONTAINER_ID, AI_CHAT_VIEW_ID, AI_MENUBAR_CONTAINER_VIEW_ID } from '../../common';
+import { AI_CHAT_CONTAINER_ID, AI_CHAT_LOGO_AVATAR_ID, AI_CHAT_VIEW_ID } from '../../common';
 
 export const AIChatLayoutConfig = {
   [AI_CHAT_VIEW_ID]: {
     modules: [AI_CHAT_CONTAINER_ID],
   },
-};
-
-export const AIMenubarLayoutConfig = {
-  [SlotLocation.top]: {
-    modules: [AI_MENUBAR_CONTAINER_VIEW_ID],
+  [DESIGN_MENU_BAR_RIGHT]: {
+    modules: [AI_CHAT_LOGO_AVATAR_ID],
   },
 };
 
-export const AI_MENU_BAR_RIGHT = 'AI_menu_bar_right';
-export const AI_MENU_BAR_LEFT = 'AI_menu_bar_left';
+/**
+ * @deprecated Use {@link DESIGN_MENU_BAR_RIGHT} instead
+ */
+export const AI_MENU_BAR_RIGHT = DESIGN_MENU_BAR_RIGHT;
+/**
+ * @deprecated Use {@link DESIGN_MENU_BAR_LEFT} instead
+ */
+export const AI_MENU_BAR_LEFT = DESIGN_MENU_BAR_LEFT;

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

@@ -158,12 +158,23 @@
     height: 32px;
     font-size: 16px;
     border-radius: 8px;
-    display: flex;
+    display: flex !important;
     align-items: center;
     justify-content: center;
 
     &:hover {
-      background-color: var(--activityBar-activeBorder);
+      background-color: var(--badge-background);
     }
   }
 }
+
+.extra_bottom_icon_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.ai_chat_view_container {
+  background-color: unset;
+}