zach/chat-gpz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Zacharias-Brohn
2026-01-14 20:20:50 +01:00
parent f5197d92f7
commit a14d69234f
1 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chat/ChatLayout.tsx
+42 -23
View File
@@ -24,6 +24,7 @@ import {
Stack, Stack,
Text, Text,
TextInput, TextInput,
TextInputProps,
Title, Title,
Tooltip, Tooltip,
UnstyledButton, UnstyledButton,
@@ -48,6 +49,25 @@ interface Chat {
messages?: Message[]; 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() { export default function ChatLayout() {
const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(); const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true); const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
@@ -342,29 +362,28 @@ export default function ChatLayout() {
borderColor: isInputFocused ? theme.colors[primaryColor][6] : undefined, borderColor: isInputFocused ? theme.colors[primaryColor][6] : undefined,
}} }}
> >
<Group gap="xs"> <InputWithButton
<TextInput variant="unstyled"
variant="unstyled" placeholder="Type your message..."
placeholder="Type your message..." value={inputValue}
value={inputValue} onChange={(event) => setInputValue(event.currentTarget.value)}
onChange={(event) => setInputValue(event.currentTarget.value)} onKeyDown={handleKeyDown}
onKeyDown={handleKeyDown} onFocus={() => setIsInputFocused(true)}
onFocus={() => setIsInputFocused(true)} onBlur={() => setIsInputFocused(false)}
onBlur={() => setIsInputFocused(false)} style={{ flex: 1, paddingLeft: rem(10) }}
style={{ flex: 1, paddingLeft: rem(10) }} rightSection={
size="md" <ActionIcon
/> onClick={handleSendMessage}
<ActionIcon variant="filled"
onClick={handleSendMessage} color={primaryColor}
variant="filled" size={32}
color={primaryColor} radius="xl"
size="lg" disabled={!inputValue.trim()}
radius="xl" >
disabled={!inputValue.trim()} <IconSend size={18} />
> </ActionIcon>
<IconSend size={18} /> }
</ActionIcon> />
</Group>
</Paper> </Paper>
</Container> </Container>
</AppShell.Main> </AppShell.Main>