changes

components/Chat/ChatLayout.tsx

@@ -24,6 +24,7 @@ import {
   Stack,
   Text,
   TextInput,
+  TextInputProps,
   Title,
   Tooltip,
   UnstyledButton,
@@ -48,6 +49,25 @@ interface Chat {
   messages?: Message[];
 }
 
+export function InputWithButton(props: TextInputProps) {
+  const theme = useMantineTheme();
+
+  return (
+    <TextInput
+      radius="xl"
+      size="md"
+      placeholder="Type your message..."
+      rightSectionWidth={42}
+      rightSection={
+        <ActionIcon size={32} radius="xl" color={theme.primaryColor} variant="filled">
+          <IconSend size={18} stroke={1.5} />
+        </ActionIcon>
+      }
+      {...props}
+    />
+  );
+}
+
 export default function ChatLayout() {
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
@@ -342,8 +362,7 @@ export default function ChatLayout() {
                 borderColor: isInputFocused ? theme.colors[primaryColor][6] : undefined,
               }}
             >
-              <Group gap="xs">
-                <TextInput
+              <InputWithButton
                 variant="unstyled"
                 placeholder="Type your message..."
                 value={inputValue}
@@ -352,19 +371,19 @@ export default function ChatLayout() {
                 onFocus={() => setIsInputFocused(true)}
                 onBlur={() => setIsInputFocused(false)}
                 style={{ flex: 1, paddingLeft: rem(10) }}
-                  size="md"
-                />
+                rightSection={
                   <ActionIcon
                     onClick={handleSendMessage}
                     variant="filled"
                     color={primaryColor}
-                  size="lg"
+                    size={32}
                     radius="xl"
                     disabled={!inputValue.trim()}
                   >
                     <IconSend size={18} />
                   </ActionIcon>
-              </Group>
+                }
+              />
             </Paper>
           </Container>
         </AppShell.Main>