fix(chat-input): use linear gradient border

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/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"