changes

components/Chat/ChatLayout.tsx

@@ -18,7 +18,6 @@ import {
   Container,
   Group,
   Paper,
-  rem,
   ScrollArea,
   Select,
   Stack,
@@ -86,7 +85,6 @@ export default function ChatLayout() {
     },
   ]);
   const [inputValue, setInputValue] = useState('');
-  const [isInputFocused, setIsInputFocused] = useState(false);
   const [isLoadingChats, setIsLoadingChats] = useState(false);
 
   // Model State
@@ -352,39 +350,24 @@ export default function ChatLayout() {
               </Stack>
             </ScrollArea>
 
-            <Paper
+            <InputWithButton
-              withBorder
+              placeholder="Type your message..."
-              p="xs"
+              value={inputValue}
-              radius="xl"
+              onChange={(event) => setInputValue(event.currentTarget.value)}
-              shadow="sm"
+              onKeyDown={handleKeyDown}
-              style={{
+              rightSection={
-                transition: 'border-color 0.2s ease',
+                <ActionIcon
-                borderColor: isInputFocused ? theme.colors[primaryColor][6] : undefined,
+                  onClick={handleSendMessage}
-              }}
+                  variant="filled"
-            >
+                  color={primaryColor}
-              <InputWithButton
+                  size={32}
-                variant="unstyled"
+                  radius="xl"
-                placeholder="Type your message..."
+                  disabled={!inputValue.trim()}
-                value={inputValue}
+                >
-                onChange={(event) => setInputValue(event.currentTarget.value)}
+                  <IconSend size={18} />
-                onKeyDown={handleKeyDown}
+                </ActionIcon>
-                onFocus={() => setIsInputFocused(true)}
+              }
-                onBlur={() => setIsInputFocused(false)}
+            />
-                style={{ flex: 1, paddingLeft: rem(10) }}
-                rightSection={
-                  <ActionIcon
-                    onClick={handleSendMessage}
-                    variant="filled"
-                    color={primaryColor}
-                    size={32}
-                    radius="xl"
-                    disabled={!inputValue.trim()}
-                  >
-                    <IconSend size={18} />
-                  </ActionIcon>
-                }
-              />
-            </Paper>
           </Container>
         </AppShell.Main>
       </AppShell>