design(chat): update ConnectorSetupAgent UI styling to match Connector Builder AI Assistant (#18393)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>
Co-authored-by: ChristoGrab <[email protected]>
Co-authored-by: Vladimir <[email protected]>

Author: 4 people

airbyte-webapp/src/components/chat/ChatInterface.module.scss

@@ -1,34 +1,27 @@
 @use "scss/colors";
 @use "scss/variables";
+@use "scss/mixins";
 
 .container {
   flex: 1 1 auto;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  box-shadow: -4px 0 12px rgba(0, 0, 0, 10%);
+  background: colors.$grey-50;
 }
 
 .header {
   padding: variables.$spacing-xl;
   background-color: colors.$foreground;
-  border-bottom: variables.$border-thin solid colors.$grey-200;
-  text-align: center;
+  border-bottom: variables.$border-thin solid colors.$grey-100;
 }
 
-.title {
-  margin: 0 0 variables.$spacing-sm;
-  color: colors.$dark-blue-900;
-  font-size: 28px;
-  font-weight: 600;
-  line-height: 1.2;
+.headerTitle {
+  margin: 0;
 }
 
-.subtitle {
-  margin: 0;
-  color: colors.$grey-600;
-  font-size: 16px;
-  line-height: 1.4;
+.headerDescription {
+  margin-top: variables.$spacing-sm;
 }
 
 .chatContainer {

airbyte-webapp/src/components/chat/ChatInterface.tsx

@@ -1,4 +1,11 @@
 import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { Badge } from "components/ui/Badge";
+import { FlexContainer } from "components/ui/Flex";
+import { Heading } from "components/ui/Heading";
+import { Icon } from "components/ui/Icon";
+import { Text } from "components/ui/Text";
 
 import { ChatInput } from "./ChatInput";
 import styles from "./ChatInterface.module.scss";
@@ -37,6 +44,20 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
 }) => {
   return (
     <div className={styles.container}>
+      <div className={styles.header}>
+        <FlexContainer direction="row" alignItems="center" gap="sm">
+          <Icon type="aiStars" color="magic" size="md" />
+          <Heading as="h3" size="sm" className={styles.headerTitle}>
+            <FormattedMessage id="connectorSetup.agent.title" />
+          </Heading>
+          <Badge variant="blue">
+            <FormattedMessage id="ui.badge.beta" />
+          </Badge>
+        </FlexContainer>
+        <Text size="sm" color="grey" className={styles.headerDescription}>
+          <FormattedMessage id="connectorSetup.agent.description" />
+        </Text>
+      </div>
       <div className={styles.chatContainer}>
         <MessageList
           messages={messages}

airbyte-webapp/src/components/chat/Message.module.scss

@@ -1,5 +1,6 @@
 @use "scss/colors";
 @use "scss/variables";
+@use "scss/mixins";
 
 .messageContent {
   max-width: 90%;
@@ -17,6 +18,7 @@
     .messageContent {
       background-color: colors.$foreground;
       color: colors.$dark-blue-900;
+      border: variables.$border-thin solid colors.$dark-blue-900;
       border-radius: variables.$border-radius-lg variables.$border-radius-sm variables.$border-radius-lg
         variables.$border-radius-lg;
     }
@@ -26,10 +28,12 @@
     justify-content: flex-start;
 
     .messageContent {
-      background-color: colors.$blue-40;
+      background-color: colors.$white;
       color: colors.$dark-blue-900;
       border-radius: variables.$border-radius-sm variables.$border-radius-lg variables.$border-radius-lg
         variables.$border-radius-lg;
+
+      @include mixins.gradient-border(variables.$border-thin, colors.$gradient-primary);
     }
   }
 

airbyte-webapp/src/locales/en.json

@@ -118,6 +118,8 @@
   "chat.toolCall.checkConfig.configurationSummary": "Configuration summary",
   "chat.toolCall.checkConfig.testResult": "Test Result",
   "chat.input.stop": "stop",
+  "connectorSetup.agent.title": "Connector Setup Assistant",
+  "connectorSetup.agent.description": "Our AI assistant will help configure your connector. Select 'Form' in the top-right to switch back to manual configuration.",
   "form.error": "Error: {message}",
   "form.error.pkAndCursor.required": "Primary key and cursor are missing",
   "form.error.pk.missing": "Primary key missing",