fix: adjust chat ui

recally-io · Sep 4, 2024 · ef024ea · ef024ea
1 parent bb1ba94
commit ef024ea
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/web/src/components/thread-chat-windows.jsx b/web/src/components/thread-chat-windows.jsx
@@ -1,17 +1,18 @@
 import { Icon } from "@iconify/react/dist/iconify.js";
 import {
   Avatar,
+  Badge,
   Box,
   Container,
+  em,
   Flex,
+  Group,
   Image,
   Modal,
   Paper,
   ScrollArea,
   SimpleGrid,
   Stack,
-  Text,
-  em,
 } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 import { useEffect, useRef, useState } from "react";
@@ -43,19 +44,15 @@ export function ThreadChatWindows() {
         justify={isSender ? "flex-end" : "flex-start"}
         align="flex-start"
         direction="row"
-        gap="2"
+        gap="xs"
         key={message.id}
       >
         {!isSender && (
-          <Avatar size="sm" radius="lg" color="cyan" variant="filled">
-            <Icon icon="tabler:robot" />
+          <Avatar size="md" radius="md" color="cyan" variant="filled">
+            <Icon icon="tabler:brand-android" />
           </Avatar>
         )}
         <Flex align={isSender ? "flex-end" : "flex-start"} direction="column">
-          <Text size="lg" variant="gradient">
-            {isSender ? "You" : message.model}
-          </Text>
-
           <Paper
             shadow="md"
             px="xs"
@@ -101,12 +98,22 @@ export function ThreadChatWindows() {
             )}
             <MarkdownRenderer content={message.text} />
           </Paper>
-
-          {CopyBtn({ data: message.text })}
+          <Group preventGrowOverflow={false} grow gap="2">
+            {!isSender && (
+              <Badge
+                variant="gradient"
+                gradient={{ from: "blue", to: "cyan", deg: 90 }}
+                size="xs"
+              >
+                {message.model}
+              </Badge>
+            )}
+            {CopyBtn({ data: message.text })}
+          </Group>
         </Flex>
         {isSender && (
-          <Avatar size="sm" radius="lg" color="cyan" variant="filled">
-            <Icon icon="tabler:mood-crazy-happy" />
+          <Avatar size="md" radius="md" color="cyan" variant="filled">
+            <Icon icon="tabler:user" />
           </Avatar>
         )}
       </Flex>

diff --git a/web/src/components/thread-input.jsx b/web/src/components/thread-input.jsx
@@ -40,15 +40,15 @@ export function ThreadChatInput() {
   const validSendKeys = [
     {
       value: "mod+enter",
-      label: "⌘ + ↵ Send",
+      label: "⌘ + ↵",
     },
     {
       value: "shift+enter",
-      label: "⇧ + ↵ Send",
+      label: "⇧ + ↵",
     },
     {
       value: "enter",
-      label: "↵ Send",
+      label: "↵",
     },
   ];
   const [sendKey, setSendKey] = useState("enter");
@@ -156,7 +156,7 @@ export function ThreadChatInput() {
   const selectSendHotKey = () => {
     return (
       <Popover
-        width="150"
+        width="100"
         position="bottom"
         trapFocus
         withArrow
@@ -272,7 +272,9 @@ export function ThreadChatInput() {
       <Flex align="flex-end" gap="xs">
         <FocusTrap>
           <Textarea
-            placeholder="Shift + Enter to send"
+            placeholder={`use ${
+              validSendKeys.find((key) => key.value === sendKey).label
+            } to send`}
             radius="lg"
             minRows={1}
             maxRows={5}