Merge pull request #480 from easyops-cn/steve/chat-panel

Steve/chat-panel

Author: weareoutman

bricks/ai-portal/src/chat-input/index.tsx

@@ -75,6 +75,7 @@ export interface ChatInputProps {
   submitDisabled?: boolean;
   supportsTerminate?: boolean;
   terminating?: boolean;
+  autoFade?: boolean;
   uploadOptions?: UploadOptions;
   aiEmployees?: AIEmployee[];
   commands?: Command[];
@@ -117,6 +118,9 @@ class ChatInput extends ReactNextElement implements ChatInputProps {
   @property({ type: Boolean })
   accessor terminating: boolean | undefined;
 
+  @property({ type: Boolean, render: false })
+  accessor autoFade: boolean | undefined;
+
   @property({ attribute: false })
   accessor uploadOptions: UploadOptions | undefined;
 

bricks/ai-portal/src/chat-input/styles.shadow.css

@@ -24,18 +24,29 @@ button {
 }
 
 .container {
+  position: relative;
   background-color: #fff;
-  border: 2px solid #7891ff;
+  border: 2px solid transparent;
   border-radius: 12px;
+  background-image:
+    linear-gradient(#fff, #fff),
+    linear-gradient(
+      338deg,
+      rgba(198, 183, 247, 1),
+      rgba(157, 198, 255, 1),
+      rgba(153, 196, 255, 1)
+    );
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
   box-shadow:
     0px 9px 28px 8px rgba(0, 0, 0, 0.05),
     0px 6px 16px 0px rgba(0, 0, 0, 0.08),
     0px 3px 6px -4px rgba(0, 0, 0, 0.12);
   cursor: text;
 }
 
-.container:not(:has(textarea:focus)) {
-  background-color: rgba(255, 255, 255, 0.5);
+:host([auto-fade]) .container:not(:has(textarea:focus)) {
+  background: rgba(255, 255, 255, 0.5);
   border-color: #99c4ff;
   backdrop-filter: blur(10px);
 }

bricks/ai-portal/src/elevo-sidebar/SpaceNav.tsx

@@ -8,13 +8,17 @@ import { NavLink } from "./NavLink.js";
 import type { SidebarLink } from "./interfaces.js";
 import { ADD_ICON, MODEL_ICON } from "./constants.js";
 import { useNavLinkActive } from "./useNavLinkActive.js";
+import type { GeneralIconProps } from "@next-bricks/icons/general-icon";
 
 export interface SpaceNavProps {
   returnUrl: string;
   introUrl: string;
   spaceDetail: {
     instanceId: string;
     name: string;
+    icon?: GeneralIconProps & {
+      color?: string;
+    };
   };
   spaceObjects?: SidebarLink[];
   spaceServiceflows?: SidebarLink[];
@@ -39,14 +43,26 @@ export function SpaceNav({
   const [serviceflowsCollapsed, setServiceflowsCollapsed] = useState(false);
   const introActive = useNavLinkActive(introUrl);
 
+  const avatarIcon = spaceDetail?.icon;
+  const avatarColor = avatarIcon?.color || "gray";
+  const { color, ...iconProps } = avatarIcon || {};
+
   return (
     <>
       <WrappedLink url={returnUrl} className="return-link">
+        <WrappedIcon className="icon" lib="lucide" icon="chevron-left" />
+        <div
+          className="avatar"
+          style={{
+            color: `var(--theme-${avatarColor}-color)`,
+          }}
+        >
+          <WrappedIcon {...iconProps} />
+        </div>
         <div className="heading">
           <div className="title">{spaceDetail?.name}</div>
           <div className="sub-title">{t(K.COLLABORATION_SPACES)}</div>
         </div>
-        <WrappedIcon className="icon" lib="lucide" icon="arrow-left" />
       </WrappedLink>
       <div className="divider" />
       <div className="history" ref={rootRef}>

bricks/ai-portal/src/elevo-sidebar/styles.shadow.css

@@ -395,31 +395,40 @@
 
   .title {
     font-weight: 500;
-    font-size: 18px;
+    font-size: 14px;
   }
 
   .sub-title {
     font-size: 12px;
-    color: #8c8c8c;
+    color: rgba(0, 0, 0, 0.45);
   }
 
   .icon {
     font-size: 16px;
-    color: #8c8c8c;
+    color: #646a73;
   }
 
-  &:not(:hover) .icon {
-    display: none;
+  .avatar {
+    background: #fff;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
   }
 }
 
 .return-link::part(link) {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 10px;
   padding: 6px 8px;
   border-radius: 8px;
-  color: #000;
+  color: #262626;
 }
 
 .return-link::part(link):hover {

bricks/ai-portal/src/shared/ChatBox/ChatBox.tsx

@@ -49,6 +49,7 @@ export function ChatBox({ state, canChat }: ChatBoxProps): JSX.Element {
       submitDisabled={!canChat}
       supportsTerminate={supports?.intercept}
       terminating={terminating}
+      autoFade
       aiEmployees={aiEmployees}
       commands={commands}
       suggestionsPlacement="top"