style: improve ai native layout (#3495)

* style: improve ai native layout

* style: improve chat

* style: improve chat

Author: Ricbet

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

@@ -1,4 +1,4 @@
-.ai_chat_view {
+#ai_chat_view {
   display: flex;
   flex-direction: column;
   height: 100%;

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

@@ -456,7 +456,7 @@ export const AIChatView = observer(() => {
   }, [layoutService]);
 
   return (
-    <div className={styles.ai_chat_view}>
+    <div id={styles.ai_chat_view}>
       <div className={styles.header_container}>
         <div className={styles.left}>
           <span className={styles.title}>{aiAssistantName}</span>

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

@@ -4,9 +4,8 @@
   height: 100%;
   .stop {
     position: absolute;
-    bottom: -34px;
+    bottom: -38px;
     padding-top: 12px;
-    // TODO
     left: -8px;
     width: 105%;
   }
@@ -17,7 +16,7 @@
     font-size: 12px;
     color: var(--design-text-foreground);
     cursor: pointer;
-    margin-left: 10px;
+    margin: 4px 0 0 10px;
 
     span {
       color: var(--design-text-foreground);
@@ -100,7 +99,7 @@
   border: 1px solid var(--kt-input-border);
   background-color: var(--design-chatInput-background);
   &.active {
-    border-color: #3c8dff;
+    border-color: rgba(60, 141, 255, 0.65);
   }
   .theme_container {
     padding: 8px 12px 2px;
@@ -192,7 +191,7 @@
           }
 
           .block {
-            margin: 0 8px;
+            margin: 0 16px 0 8px;
             .ai_enhance_icon {
               background-color: var(--kt-icon-hoverBackground);
             }
@@ -216,7 +215,6 @@
     position: relative;
     border: none;
     background-color: transparent;
-    box-sizing: border-box;
     :global {
       .kt-input-addon-after {
         align-items: flex-end;
@@ -305,6 +303,7 @@
   margin-top: 4px;
   .monaco_wrapper {
     position: relative;
+    min-width: 130px;
     > pre {
       margin-bottom: 10px;
     }
@@ -509,12 +508,14 @@
     align-items: start;
     line-height: 22px;
     > * {
+      display: block;
       margin-top: 4px;
     }
   }
 }
 
 .markdown_container {
+  line-height: 22px;
   h1,
   h2,
   h3,
@@ -535,16 +536,10 @@
     }
   }
 
-  .tree_container {
-    background-color: var(--panel-background);
-    border-radius: 8px;
-    padding: 7px 0;
-  }
   li {
     list-style: auto;
   }
 }
-
 .tree_container {
   background-color: var(--panel-background);
   border-radius: 8px;

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

@@ -11,8 +11,21 @@ export const AILayout = () => {
   return (
     <BoxPanel direction='top-to-bottom'>
       <SlotRenderer id='top' defaultSize={35} slot='top' z-index={2} />
-      <SplitPanel id='main-horizontal-ai' flex={1} direction={'left-to-right'} useDomSize={true}>
-        <SplitPanel id='main-horizontal' flex={1} flexGrow={1} direction={'left-to-right'} useDomSize={true}>
+      <SplitPanel
+        id='main-horizontal-ai'
+        flex={1}
+        direction={'left-to-right'}
+        useDomSize={true}
+        resizeHandleClassName={'design-slot_resize_horizontal'}
+      >
+        <SplitPanel
+          id='main-horizontal'
+          flex={1}
+          flexGrow={1}
+          direction={'left-to-right'}
+          useDomSize={true}
+          resizeHandleClassName={'design-slot_resize_horizontal'}
+        >
           <SlotRenderer
             slot='left'
             isTabbar={true}

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

@@ -67,7 +67,7 @@
       padding-bottom: 38px;
     }
 
-    .rce-ai-msg {
+    .rce-container-mbox.rce-ai-msg {
       margin: 8px 32px 8px 16px;
 
       > .rce-mbox {
@@ -98,8 +98,12 @@
 
     .rce-container-mbox {
       overflow: initial;
-      // margin: 8px 16px;
       min-width: initial;
+      margin: 8px 16px;
+    }
+
+    .rce-container-mbox:nth-child(2) {
+      margin-top: 8px !important;
     }
 
     .rce-user-msg {
@@ -109,6 +113,7 @@
         margin-right: 0;
         margin-left: 0;
         max-width: 100%;
+        box-sizing: border-box;
       }
     }
 
@@ -119,6 +124,10 @@
   }
 }
 
+.right_tab_renderer {
+  border: none;
+}
+
 .right_slot_container_wrap {
   height: 100%;
   display: flex;
@@ -129,11 +138,32 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-bottom: 1px solid var(--sideBar-border);
     padding: 0 10px;
+    background-color: var(--editorGroupHeader-tabsBackground);
   }
 
   .container {
     flex: 1;
   }
 }
+
+.extra_bottom_icon {
+  &:hover {
+    background-color: transparent !important;
+    opacity: 1;
+  }
+
+  span {
+    width: 32px;
+    height: 32px;
+    font-size: 16px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background-color: var(--activityBar-activeBorder);
+    }
+  }
+}

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

@@ -1,7 +1,13 @@
 import cls from 'classnames';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
-import { ComponentRegistryInfo, SlotLocation, useContextMenus, useInjectable } from '@opensumi/ide-core-browser';
+import {
+  AINativeConfigService,
+  ComponentRegistryInfo,
+  SlotLocation,
+  useContextMenus,
+  useInjectable,
+} from '@opensumi/ide-core-browser';
 import { EDirection } from '@opensumi/ide-core-browser/lib/components';
 import {
   EnhanceIcon,
@@ -115,6 +121,7 @@ export const AIRightTabRenderer = ({
   components: ComponentRegistryInfo[];
 }) => {
   const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(SlotLocation.right);
+  const aiNativeConfigService: AINativeConfigService = useInjectable<AINativeConfigService>(AINativeConfigService);
 
   const handleClose = useCallback(() => {
     tabbarService.updateCurrentContainerId('');
@@ -143,9 +150,15 @@ export const AIRightTabRenderer = ({
     );
   }, []);
 
+  const rightTabRenderClassName = useMemo(
+    () => (aiNativeConfigService.layout!.useMergeRightWithLeftPanel ? styles.right_tab_renderer : ''),
+    [aiNativeConfigService],
+  );
+
   return (
     <DesignRightTabRenderer
       components={components}
+      className={rightTabRenderClassName}
       tabbarView={() => <RightTabbarRenderer barSize={0} style={{ width: 0 }} />}
       tabpanelView={() => <BaseTabPanelView PanelView={ContainerViewFn} />}
     />

packages/design/src/browser/layout/tabbar.view.tsx

@@ -40,7 +40,7 @@ export const DesignRightTabRenderer = ({
   tabpanelView?: FC<{}>;
 }) => (
   <RightTabRenderer
-    className={cls(className, 'design_right_slot')}
+    className={cls('design_right_slot', className)}
     components={components}
     tabbarView={tabbarView}
     tabpanelView={tabpanelView}

packages/design/src/browser/style/design.module.less

@@ -514,7 +514,7 @@ div[class*='design-editor_tab_block_container__'] {
   margin-right: 1px;
 
   .design-tab_panel {
-    border-right: none;
+    border: none;
   }
 
   .design-file_tree_node {
@@ -644,27 +644,6 @@ div[class*='design-editor_tab_block_container__'] {
     display: none;
   }
 
-  .design-extra_bottom_icon {
-    &:hover {
-      background-color: transparent !important;
-      opacity: 1;
-    }
-
-    span {
-      width: 32px;
-      height: 32px;
-      font-size: 16px;
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &:hover {
-        background-color: var(--activityBar-activeBorder);
-      }
-    }
-  }
-
   .design-outline_node {
     border-radius: 4px;
   }
@@ -689,7 +668,6 @@ div[class*='design-editor_tab_block_container__'] {
 
   .design-left_tab_bar,
   .design-right_tab_bar {
-    padding-top: 10px;
     border-right: none;
     border-top: none;
     width: 48px;
@@ -714,13 +692,16 @@ div[class*='design-editor_tab_block_container__'] {
       }
     }
   }
+
+  .design-right_tab_bar {
+    padding-top: 10px;
+    border-right: none;
+    border-top: none;
+  }
 }
 
 :global(.design_right_slot) {
   background-color: var(--panel-background);
-  border: 1px solid var(--sideBar-border);
-  border-radius: 12px;
-  overflow: hidden;
   height: 100%;
 }
 

packages/design/src/browser/style/global.less

@@ -293,3 +293,13 @@ html {
     background-color: var(--design-monaco-background) !important;
   }
 }
+
+/**
+* layout 面板 
+**/
+.design-slot_resize_horizontal {
+  width: 2px;
+  height: 100%;
+  margin: 0 2px;
+  position: relative;
+}