dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: tweak color and input styles (#627)

Browse source
This commit is contained in:
Jeremy 2024-12-17 15:36:51 +05:30 • committed by GitHub
parent 9778631d6f
commit f7a10d3813
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 48 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

40
components/multimodal-input.tsx
View file

@ -23,7 +23,7 @@ import { useLocalStorage, useWindowSize } from 'usehooks-ts';
import { sanitizeUIMessages } from '@/lib/utils';
import { ArrowUpIcon, PaperclipIcon, StopIcon } from './icons';
import { ArrowUpIcon, ImageIcon, PaperclipIcon, StopIcon } from './icons';
import { PreviewAttachment } from './preview-attachment';
import { Button } from './ui/button';
import { Textarea } from './ui/textarea';
@ -228,10 +228,10 @@ function PureMultimodalInput({
value={input}
onChange={handleInput}
className={cx(
'min-h-[24px] max-h-[calc(75dvh)] overflow-hidden resize-none rounded-xl !text-base bg-muted',
'min-h-[24px] max-h-[calc(75dvh)] overflow-hidden resize-none rounded-2xl !text-base bg-muted pb-10 dark:border-zinc-700',
className,
)}
rows={3}
rows={2}
autoFocus
onKeyDown={(event) => {
if (event.key === 'Enter' && !event.shiftKey) {
@ -246,17 +246,21 @@ function PureMultimodalInput({
}}
/>
{isLoading ? (
<StopButton stop={stop} setMessages={setMessages} />
) : (
<SendButton
input={input}
submitForm={submitForm}
uploadQueue={uploadQueue}
/>
)}
<div className="absolute bottom-0 p-2 w-fit flex flex-row justify-start">
<AttachmentsButton fileInputRef={fileInputRef} isLoading={isLoading} />
</div>
<AttachmentsButton fileInputRef={fileInputRef} isLoading={isLoading} />
<div className="absolute bottom-0 right-0 p-2 w-fit flex flex-row justify-end">
{isLoading ? (
<StopButton stop={stop} setMessages={setMessages} />
) : (
<SendButton
input={input}
submitForm={submitForm}
uploadQueue={uploadQueue}
/>
)}
</div>
</div>
);
}
@ -281,15 +285,15 @@ function PureAttachmentsButton({
}) {
return (
<Button
className="rounded-full p-1.5 h-fit absolute bottom-2 right-11 m-0.5 dark:border-zinc-700"
className="rounded-md rounded-bl-lg p-[7px] h-fit dark:border-zinc-700 hover:dark:bg-zinc-900 hover:bg-zinc-200"
onClick={(event) => {
event.preventDefault();
fileInputRef.current?.click();
}}
variant="outline"
disabled={isLoading}
variant="ghost"
>
<PaperclipIcon size={14} />
<ImageIcon size={14} />
</Button>
);
}
@ -305,7 +309,7 @@ function PureStopButton({
}) {
return (
<Button
className="rounded-full p-1.5 h-fit absolute bottom-2 right-2 m-0.5 border dark:border-zinc-600"
className="rounded-full p-1.5 h-fit border dark:border-zinc-600"
onClick={(event) => {
event.preventDefault();
stop();
@ -330,7 +334,7 @@ function PureSendButton({
}) {
return (
<Button
className="rounded-full p-1.5 h-fit absolute bottom-2 right-2 m-0.5 border dark:border-zinc-600"
className="rounded-full p-1.5 h-fit border dark:border-zinc-600"
onClick={(event) => {
event.preventDefault();
submitForm();