From bce3d6232dea89a1873124579047fe31ca9d1672 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 27 May 2025 10:23:26 +0200
Subject: [PATCH] redesign is inevitable

---
 frontend/app/components/Kai/KaiChat.tsx       |  8 +-
 .../components/Kai/components/ChatHeader.tsx  | 76 ++++++++++---------
 .../components/Kai/components/ChatInput.tsx   | 45 +++++++++--
 .../app/components/Kai/components/Ideas.tsx   |  3 +-
 .../Kai/components/IntroSection.tsx           | 12 ++-
 5 files changed, 88 insertions(+), 56 deletions(-)

diff --git a/frontend/app/components/Kai/KaiChat.tsx b/frontend/app/components/Kai/KaiChat.tsx
index d3952cffa..31166d7a6 100644
--- a/frontend/app/components/Kai/KaiChat.tsx
+++ b/frontend/app/components/Kai/KaiChat.tsx
@@ -100,9 +100,7 @@ function KaiChat() {
   };
   return (
     <div className="w-full mx-auto" style={{ maxWidth: PANEL_SIZES.maxWidth }}>
-      <div
-        className={'w-full rounded-lg overflow-hidden border shadow relative'}
-      >
+      <div className={'w-full rounded-lg overflow-hidden bg-white relative'}>
         <ChatHeader
           chatTitle={chatTitle}
           openChats={openChats}
@@ -110,12 +108,10 @@ function KaiChat() {
         />
         <div
           className={
-            'w-full bg-active-blue flex flex-col items-center justify-center py-4 relative'
+            'w-full flex flex-col items-center justify-center py-4 relative'
           }
           style={{
             height: '70svh',
-            background:
-              'radial-gradient(50% 50% at 50% 50%, var(--color-glassWhite) 0%, var(--color-glassMint) 46%, var(--color-glassLavander) 100%)',
           }}
         >
           {section === 'intro' ? (
diff --git a/frontend/app/components/Kai/components/ChatHeader.tsx b/frontend/app/components/Kai/components/ChatHeader.tsx
index ae3cb4068..62f07369c 100644
--- a/frontend/app/components/Kai/components/ChatHeader.tsx
+++ b/frontend/app/components/Kai/components/ChatHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon } from 'UI';
-import { MessagesSquare, ArrowLeft } from 'lucide-react';
+import { MessagesSquare, ArrowLeft, SquarePen } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 function ChatHeader({
@@ -14,43 +14,49 @@ function ChatHeader({
 }) {
   const { t } = useTranslation();
   return (
-    <div
-      className={
-        'px-4 py-2 flex items-center bg-white border-b border-b-gray-lighter'
-      }
-    >
-      <div className={'flex-1'}>
-        {goBack ? (
+    <div className="p-4">
+      <div
+        className={'px-4 py-2 flex items-center bg-gray-lightest rounded-lg'}
+      >
+        <div className={'flex-1'}>
+          {goBack ? (
+            <div
+              className={
+                'w-fit flex items-center gap-2 font-semibold cursor-pointer'
+              }
+              onClick={goBack}
+            >
+              <ArrowLeft size={14} />
+              <div>{t('Back')}</div>
+            </div>
+          ) : (
+            <div className="flex items-center gap-2">
+              <Icon name={'kai_colored'} size={18} />
+              <div className={'font-semibold text-xl'}>Kai</div>
+            </div>
+          )}
+        </div>
+        <div className={'flex items-center gap-2 mx-auto max-w-[80%]'}>
+          {chatTitle ? (
+            <div className="font-semibold text-xl whitespace-nowrap truncate">
+              {chatTitle}
+            </div>
+          ) : null}
+        </div>
+        <div className={'flex-1 justify-end flex items-center gap-2'}>
+          {goBack ? (
+            <div className="font-semibold w-fit cursor-pointer flex items-center gap-2">
+              <SquarePen size={14} />
+              <div>{t('New Chat')}</div>
+            </div>
+          ) : null}
           <div
-            className={
-              'w-fit flex items-center gap-2 font-semibold cursor-pointer'
-            }
-            onClick={goBack}
+            className="font-semibold w-fit cursor-pointer flex items-center gap-2"
+            onClick={openChats}
           >
-            <ArrowLeft size={14} />
-            <div>{t('Back')}</div>
+            <MessagesSquare size={14} />
+            <div>{t('Chats')}</div>
           </div>
-        ) : null}
-      </div>
-      <div className={'flex items-center gap-2 mx-auto max-w-[80%]'}>
-        {chatTitle ? (
-          <div className="font-semibold text-xl whitespace-nowrap truncate">
-            {chatTitle}
-          </div>
-        ) : (
-          <>
-            <Icon name={'kai_colored'} size={18} />
-            <div className={'font-semibold text-xl'}>Kai</div>
-          </>
-        )}
-      </div>
-      <div className={'flex-1 justify-end flex items-center gap-2'}>
-        <div
-          className="font-semibold w-fit cursor-pointer flex items-center gap-2"
-          onClick={openChats}
-        >
-          <MessagesSquare size={14} />
-          <div>{t('Chats')}</div>
         </div>
       </div>
     </div>
diff --git a/frontend/app/components/Kai/components/ChatInput.tsx b/frontend/app/components/Kai/components/ChatInput.tsx
index 237b79d6c..d2c5aebb3 100644
--- a/frontend/app/components/Kai/components/ChatInput.tsx
+++ b/frontend/app/components/Kai/components/ChatInput.tsx
@@ -9,10 +9,12 @@ function ChatInput({
   isLoading,
   onSubmit,
   threadId,
+  isArea,
 }: {
   isLoading?: boolean;
   onSubmit: (str: string) => void;
   threadId: string;
+  isArea?: boolean;
 }) {
   const inputRef = React.useRef<typeof Input>(null);
   const usage = kaiStore.usage;
@@ -50,7 +52,42 @@ function ChatInput({
   }, [inputValue]);
 
   const isReplacing = kaiStore.replacing !== null;
-
+  const placeholder = limited
+    ? `You've reached the daily limit for queries, come again tomorrow!`
+    : 'Ask anything about your product and users...';
+  if (isArea) {
+    return (
+      <Input.TextArea
+        rows={3}
+        onPressEnter={submit}
+        ref={inputRef}
+        placeholder={placeholder}
+        size={'large'}
+        disabled={limited}
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        suffix={
+          <Tooltip title={'Send message'}>
+            <Button
+              loading={isLoading}
+              onClick={submit}
+              disabled={limited}
+              icon={
+                isProcessing ? (
+                  <OctagonX size={16} />
+                ) : (
+                  <SendHorizonal size={16} />
+                )
+              }
+              type={'text'}
+              size={'small'}
+              shape={'circle'}
+            />
+          </Tooltip>
+        }
+      />
+    );
+  }
   return (
     <div className="relative">
       <Input
@@ -61,11 +98,7 @@ function ChatInput({
           }
         }}
         ref={inputRef}
-        placeholder={
-          limited
-            ? `You've reached the daily limit for queries, come again tomorrow!`
-            : 'Ask anything about your product and users...'
-        }
+        placeholder={placeholder}
         size={'large'}
         disabled={limited}
         value={inputValue}
diff --git a/frontend/app/components/Kai/components/Ideas.tsx b/frontend/app/components/Kai/components/Ideas.tsx
index f1104756e..a72724dd3 100644
--- a/frontend/app/components/Kai/components/Ideas.tsx
+++ b/frontend/app/components/Kai/components/Ideas.tsx
@@ -30,8 +30,7 @@ function Ideas({ onClick, projectId, threadId = null }: { onClick: (query: strin
   return (
     <>
       <div className={'flex items-center gap-2 mb-1 text-gray-dark'}>
-        <Lightbulb size={16} />
-        <b>Ideas:</b>
+        <b>Suggested Ideas:</b>
       </div>
       {
           isPending ?
diff --git a/frontend/app/components/Kai/components/IntroSection.tsx b/frontend/app/components/Kai/components/IntroSection.tsx
index c6356e9ba..fdfcf4b25 100644
--- a/frontend/app/components/Kai/components/IntroSection.tsx
+++ b/frontend/app/components/Kai/components/IntroSection.tsx
@@ -6,13 +6,11 @@ function IntroSection({ onAsk, projectId }: { onAsk: (query: string) => void, pr
   const isLoading = false;
   return (
     <>
-      <div className={'text-disabled-text text-xl absolute top-4'}>
-        Kai is your AI assistant, delivering smart insights in response to your
-        queries.
-      </div>
-      <div className={'relative w-2/3'} style={{ height: 44 }}>
-        {/*<GradientBorderInput placeholder={'Ask anything about your product and users...'} onButtonClick={() => null} />*/}
-        <ChatInput isLoading={isLoading} onSubmit={onAsk} />
+      <div className={'relative w-2/3'}>
+        <div className="font-semibold text-lg">
+          Hey userName, how can I help you?
+        </div>
+        <ChatInput isLoading={isLoading} onSubmit={onAsk} isArea />
         <div className={'absolute top-full flex flex-col gap-2 mt-4'}>
           <Ideas onClick={(query) => onAsk(query)} projectId={projectId} />
         </div>