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

fix: small ui nits (#1178)

Browse source
This commit is contained in:
josh 2025-09-09 22:19:34 +01:00 • committed by GitHub
parent 848205f5cb
commit eae41c635d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 50 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/(chat)/chat/[id]/page.tsx
View file

@ -7,7 +7,6 @@ import { getChatById, getMessagesByChatId } from '@/lib/db/queries';
import { DataStreamHandler } from '@/components/data-stream-handler'; import { DataStreamHandler } from '@/components/data-stream-handler';
import { DEFAULT_CHAT_MODEL } from '@/lib/ai/models'; import { DEFAULT_CHAT_MODEL } from '@/lib/ai/models';
import { convertToUIMessages } from '@/lib/utils'; import { convertToUIMessages } from '@/lib/utils';
import { LanguageModelV2Usage } from '@ai-sdk/provider';
export default async function Page(props: { params: Promise<{ id: string }> }) { export default async function Page(props: { params: Promise<{ id: string }> }) {
const params = await props.params; const params = await props.params;

4
components/chat-header.tsx
View file

@ -35,7 +35,7 @@ function PureChatHeader({
{(!open || windowWidth < 768) && ( {(!open || windowWidth < 768) && (
<Button <Button
variant="outline" variant="outline"
className="order-2 ml-auto px-2 md:order-1 md:ml-0 md:h-fit md:px-2" className="order-2 ml-auto h-8 px-2 md:order-1 md:ml-0 md:h-fit md:px-2"
onClick={() => { onClick={() => {
router.push('/'); router.push('/');
router.refresh(); router.refresh();
@ -55,7 +55,7 @@ function PureChatHeader({
)} )}
<Button <Button
className="order-3 hidden h-fit bg-zinc-900 px-2 py-1.5 text-zinc-50 hover:bg-zinc-800 md:ml-auto md:flex md:h-[34px] dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200" className="order-3 hidden bg-zinc-900 px-2 text-zinc-50 hover:bg-zinc-800 md:ml-auto md:flex md:h-fit dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
asChild asChild
> >
<Link <Link

3
components/elements/context.tsx
View file

@ -275,8 +275,9 @@ export const Context = ({
<HoverCardTrigger asChild> <HoverCardTrigger asChild>
<button <button
className={cn( className={cn(
'inline-flex select-none items-center gap-1 rounded-md px-2.5 py-1 text-sm', 'inline-flex select-none items-center gap-1 rounded-md px-1.5 py-1 text-sm',
'bg-background text-foreground', 'bg-background text-foreground',
className,
)} )}
type="button" type="button"
{...props} {...props}

1
components/elements/prompt-input.tsx
View file

@ -201,6 +201,7 @@ export const PromptInputModelSelectTrigger = ({
className={cn( className={cn(
'border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors', 'border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors',
'hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground', 'hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground',
'h-auto px-2 py-1.5',
className, className,
)} )}
{...props} {...props}

15
components/icons.tsx
View file

@ -515,14 +515,15 @@ export const InfoIcon = ({ size = 16 }: { size?: number }) => {
); );
}; };
export const ArrowUpIcon = ({ size = 16 }: { size?: number }) => { export const ArrowUpIcon = ({ size = 16, ...props }: { size?: number } & React.SVGProps<SVGSVGElement>) => {
return ( return (
<svg <svg
height={size} height={size}
strokeLinejoin="round" strokeLinejoin="round"
viewBox="0 0 16 16" viewBox="0 0 16 16"
width={size} width={size}
style={{ color: 'currentcolor' }} style={{ color: 'currentcolor', ...props.style }}
{...props}
> >
<path <path
fillRule="evenodd" fillRule="evenodd"
@ -534,13 +535,14 @@ export const ArrowUpIcon = ({ size = 16 }: { size?: number }) => {
); );
}; };
export const StopIcon = ({ size = 16 }: { size?: number }) => { export const StopIcon = ({ size = 16, ...props }: { size?: number } & React.SVGProps<SVGSVGElement>) => {
return ( return (
<svg <svg
height={size} height={size}
viewBox="0 0 16 16" viewBox="0 0 16 16"
width={size} width={size}
style={{ color: 'currentcolor' }} style={{ color: 'currentcolor', ...props.style }}
{...props}
> >
<path <path
fillRule="evenodd" fillRule="evenodd"
@ -552,15 +554,16 @@ export const StopIcon = ({ size = 16 }: { size?: number }) => {
); );
}; };
export const PaperclipIcon = ({ size = 16 }: { size?: number }) => { export const PaperclipIcon = ({ size = 16, ...props }: { size?: number } & React.SVGProps<SVGSVGElement>) => {
return ( return (
<svg <svg
height={size} height={size}
strokeLinejoin="round" strokeLinejoin="round"
viewBox="0 0 16 16" viewBox="0 0 16 16"
width={size} width={size}
style={{ color: 'currentcolor' }} style={{ color: 'currentcolor', ...props.style }}
className="-rotate-45" className="-rotate-45"
{...props}
> >
<path <path
fillRule="evenodd" fillRule="evenodd"

6
components/message.tsx
View file

@ -63,7 +63,7 @@ const PurePreviewMessage = ({
data-role={message.role} data-role={message.role}
> >
<div <div
className={cn('flex w-full items-start gap-3', { className={cn('flex w-full items-start gap-2 md:gap-3', {
'justify-end': message.role === 'user' && mode !== 'edit', 'justify-end': message.role === 'user' && mode !== 'edit',
'justify-start': message.role === 'assistant', 'justify-start': message.role === 'assistant',
})} })}
@ -86,7 +86,7 @@ const PurePreviewMessage = ({
(p) => p.type === 'text' && p.text?.trim(), (p) => p.type === 'text' && p.text?.trim(),
)) || )) ||
mode === 'edit', mode === 'edit',
'max-w-[90%] sm:max-w-[min(fit-content,80%)]': 'max-w-[calc(100%-2.5rem)] sm:max-w-[min(fit-content,80%)]':
message.role === 'user' && mode !== 'edit', message.role === 'user' && mode !== 'edit',
})} })}
> >
@ -317,7 +317,7 @@ export const ThinkingMessage = () => {
</div> </div>
<div className="flex w-full flex-col gap-2 md:gap-4"> <div className="flex w-full flex-col gap-2 md:gap-4">
<div className="p-0 text-sm text-muted-foreground"> <div className='p-0 text-muted-foreground text-sm'>
<LoadingText>Thinking...</LoadingText> <LoadingText>Thinking...</LoadingText>
</div> </div>
</div> </div>

4
components/messages.tsx
View file

@ -66,8 +66,8 @@ function PureMessages({
className="overscroll-behavior-contain -webkit-overflow-scrolling-touch flex-1 touch-pan-y overflow-y-scroll" className="overscroll-behavior-contain -webkit-overflow-scrolling-touch flex-1 touch-pan-y overflow-y-scroll"
style={{ overflowAnchor: 'none' }} style={{ overflowAnchor: 'none' }}
> >
<Conversation className="flex flex-col gap-4 px-2 py-4 mx-auto min-w-0 max-w-4xl md:gap-6 md:px-4"> <Conversation className='mx-auto flex min-w-0 max-w-4xl flex-col gap-4 md:gap-6'>
<ConversationContent className="flex flex-col gap-4 md:gap-6"> <ConversationContent className="flex flex-col gap-4 px-2 py-4 md:gap-6 md:px-4">
{messages.length === 0 && <Greeting />} {messages.length === 0 && <Greeting />}
{messages.map((message, index) => ( {messages.map((message, index) => (

10
components/model-selector.tsx
View file

@ -62,7 +62,7 @@ export function ModelSelector({
<ChevronDownIcon /> <ChevronDownIcon />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="start" className="min-w-[300px]"> <DropdownMenuContent align="start" className="min-w-[280px] max-w-[90vw] sm:min-w-[300px]">
{availableChatModels.map((chatModel) => { {availableChatModels.map((chatModel) => {
const { id } = chatModel; const { id } = chatModel;
@ -83,16 +83,16 @@ export function ModelSelector({
> >
<button <button
type="button" type="button"
className="group/item flex w-full flex-row items-center justify-between gap-4" className="group/item flex w-full flex-row items-center justify-between gap-2 sm:gap-4"
> >
<div className="flex flex-col items-start gap-1"> <div className="flex flex-col items-start gap-1">
<div>{chatModel.name}</div> <div className="text-sm sm:text-base">{chatModel.name}</div>
<div className="text-muted-foreground text-xs"> <div className='line-clamp-2 text-muted-foreground text-xs'>
{chatModel.description} {chatModel.description}
</div> </div>
</div> </div>
<div className="text-foreground opacity-0 group-data-[active=true]/item:opacity-100 dark:text-foreground"> <div className='shrink-0 text-foreground opacity-0 group-data-[active=true]/item:opacity-100 dark:text-foreground'>
<CheckCircleFillIcon /> <CheckCircleFillIcon />
</div> </div>
</button> </button>

43
components/multimodal-input.tsx
View file

@ -253,7 +253,7 @@ function PureMultimodalInput({
}, [status, scrollToBottom]); }, [status, scrollToBottom]);
return ( return (
<div className="relative flex w-full flex-col gap-4"> <div className='relative flex w-full flex-col gap-4'>
<AnimatePresence> <AnimatePresence>
{!isAtBottom && ( {!isAtBottom && (
<motion.div <motion.div
@ -261,7 +261,7 @@ function PureMultimodalInput({
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }} exit={{ opacity: 0, y: 10 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }} transition={{ type: 'spring', stiffness: 300, damping: 20 }}
className="-top-12 -translate-x-1/2 absolute left-1/2 z-50" className='-top-12 -translate-x-1/2 absolute left-1/2 z-50'
> >
<Button <Button
data-testid="scroll-to-bottom-button" data-testid="scroll-to-bottom-button"
@ -299,7 +299,7 @@ function PureMultimodalInput({
/> />
<PromptInput <PromptInput
className="rounded-xl border border-border bg-background shadow-xs transition-all duration-200 focus-within:border-border hover:border-muted-foreground/50" className='rounded-xl border border-border bg-background shadow-xs transition-all duration-200 focus-within:border-border hover:border-muted-foreground/50'
onSubmit={(event) => { onSubmit={(event) => {
event.preventDefault(); event.preventDefault();
if (status !== 'ready') { if (status !== 'ready') {
@ -312,7 +312,7 @@ function PureMultimodalInput({
{(attachments.length > 0 || uploadQueue.length > 0) && ( {(attachments.length > 0 || uploadQueue.length > 0) && (
<div <div
data-testid="attachments-preview" data-testid="attachments-preview"
className="flex flex-row items-end gap-2 overflow-x-scroll px-3 py-2" className='flex flex-row items-end gap-2 overflow-x-scroll px-3 py-2'
> >
{attachments.map((attachment) => ( {attachments.map((attachment) => (
<PreviewAttachment <PreviewAttachment
@ -342,7 +342,7 @@ function PureMultimodalInput({
))} ))}
</div> </div>
)} )}
<div className="flex flex-row gap-2 items-start"> <div className='flex flex-row items-start gap-1 sm:gap-2'>
<PromptInputTextarea <PromptInputTextarea
data-testid="multimodal-input" data-testid="multimodal-input"
ref={textareaRef} ref={textareaRef}
@ -352,14 +352,14 @@ function PureMultimodalInput({
minHeight={44} minHeight={44}
maxHeight={200} maxHeight={200}
disableAutoResize={true} disableAutoResize={true}
className="text-sm grow resize-none py-3 px-3 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] bg-transparent border-0! border-none! outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none placeholder:text-muted-foreground" className='grow resize-none border-0! border-none! bg-transparent px-2 py-3 text-sm outline-none ring-0 [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 sm:px-3 [&::-webkit-scrollbar]:hidden'
rows={1} rows={1}
autoFocus autoFocus
/>{' '} />{' '}
<Context {...contextProps} /> <Context {...contextProps} className="mr-1.5" />
</div> </div>
<PromptInputToolbar className="px-3 py-2 border-t-0! !border-top-0 shadow-none dark:border-transparent! dark:border-0"> <PromptInputToolbar className='!border-top-0 border-t-0! px-2 py-2 shadow-none dark:border-0 dark:border-transparent!'>
<PromptInputTools className="gap-2"> <PromptInputTools className="gap-1 sm:gap-2">
<AttachmentsButton <AttachmentsButton
fileInputRef={fileInputRef} fileInputRef={fileInputRef}
status={status} status={status}
@ -374,9 +374,9 @@ function PureMultimodalInput({
<PromptInputSubmit <PromptInputSubmit
status={status} status={status}
disabled={!input.trim() || uploadQueue.length > 0} disabled={!input.trim() || uploadQueue.length > 0}
className="rounded-full bg-primary p-2 text-primary-foreground transition-colors duration-200 hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground" className="size-7 rounded-full bg-primary p-1 text-primary-foreground transition-colors duration-200 hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground"
> >
<ArrowUpIcon size={16} /> <ArrowUpIcon size={14} />
</PromptInputSubmit> </PromptInputSubmit>
)} )}
</PromptInputToolbar> </PromptInputToolbar>
@ -413,16 +413,15 @@ function PureAttachmentsButton({
return ( return (
<Button <Button
data-testid="attachments-button" data-testid="attachments-button"
className="h-fit rounded-md p-1.5 transition-colors duration-200 hover:bg-muted" className='h-fit rounded-md p-1 transition-colors duration-200 hover:bg-muted'
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
fileInputRef.current?.click(); fileInputRef.current?.click();
}} }}
disabled={status !== 'ready' || isReasoningModel} disabled={status !== 'ready' || isReasoningModel}
variant="ghost" variant="ghost"
size="sm"
> >
<PaperclipIcon size={14} /> <PaperclipIcon size={14} style={{ width: 14, height: 14 }} />
</Button> </Button>
); );
} }
@ -455,16 +454,16 @@ function PureModelSelectorCompact({
> >
<PromptInputModelSelectTrigger <PromptInputModelSelectTrigger
type="button" type="button"
className="text-xs focus:outline-hidden focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=closed]:ring-0 data-[state=open]:ring-0" className='max-w-[120px] truncate text-xs focus:outline-hidden focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=closed]:ring-0 data-[state=open]:ring-0 sm:max-w-none'
> >
{selectedModel?.name || 'Select model'} {selectedModel?.name || 'Select model'}
</PromptInputModelSelectTrigger> </PromptInputModelSelectTrigger>
<PromptInputModelSelectContent> <PromptInputModelSelectContent className="max-w-[90vw] sm:max-w-[400px]">
{chatModels.map((model) => ( {chatModels.map((model) => (
<SelectItem key={model.id} value={model.name}> <SelectItem key={model.id} value={model.name}>
<div className="flex flex-col items-start gap-1 py-1"> <div className='flex flex-col items-start gap-1 py-1'>
<div className="font-medium">{model.name}</div> <div className='font-medium text-sm'>{model.name}</div>
<div className="text-muted-foreground text-xs"> <div className='line-clamp-2 text-muted-foreground text-xs'>
{model.description} {model.description}
</div> </div>
</div> </div>
@ -487,16 +486,14 @@ function PureStopButton({
return ( return (
<Button <Button
data-testid="stop-button" data-testid="stop-button"
className="h-fit rounded-full border border-border p-2 transition-colors duration-200 hover:bg-muted" className="size-7 rounded-full bg-foreground p-1 text-background transition-colors duration-200 hover:bg-foreground/90 disabled:bg-muted disabled:text-muted-foreground"
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
stop(); stop();
setMessages((messages) => messages); setMessages((messages) => messages);
}} }}
variant="outline"
size="sm"
> >
<StopIcon size={16} /> <StopIcon size={14} />
</Button> </Button>
); );
} }

6
components/preview-attachment.tsx
View file

@ -18,7 +18,7 @@ export const PreviewAttachment = ({
const { name, url, contentType } = attachment; const { name, url, contentType } = attachment;
return ( return (
<div data-testid="input-attachment-preview" className="group relative size-16 rounded-lg overflow-hidden bg-muted border"> <div data-testid="input-attachment-preview" className='group relative size-16 overflow-hidden rounded-lg border bg-muted'>
{contentType?.startsWith('image') ? ( {contentType?.startsWith('image') ? (
<Image <Image
src={url} src={url}
@ -28,7 +28,7 @@ export const PreviewAttachment = ({
height={64} height={64}
/> />
) : ( ) : (
<div className="size-full flex items-center justify-center text-xs text-muted-foreground"> <div className='flex size-full items-center justify-center text-muted-foreground text-xs'>
File File
</div> </div>
)} )}
@ -50,7 +50,7 @@ export const PreviewAttachment = ({
</Button> </Button>
)} )}
<div className="absolute bottom-0 inset-x-0 bg-linear-to-t from-black/80 to-transparent text-white text-[10px] px-1 py-0.5 truncate"> <div className='absolute inset-x-0 bottom-0 truncate bg-linear-to-t from-black/80 to-transparent px-1 py-0.5 text-[10px] text-white'>
{name} {name}
</div> </div>
</div> </div>

2
components/sidebar-toggle.tsx
View file

@ -22,7 +22,7 @@ export function SidebarToggle({
data-testid="sidebar-toggle-button" data-testid="sidebar-toggle-button"
onClick={toggleSidebar} onClick={toggleSidebar}
variant="outline" variant="outline"
className="h-8 px-1 md:h-fit md:px-2" className="h-8 px-2 md:h-fit md:px-2"
> >
<SidebarLeftIcon size={16} /> <SidebarLeftIcon size={16} />
</Button> </Button>

2
components/visibility-selector.tsx
View file

@ -71,7 +71,7 @@ export function VisibilitySelector({
<Button <Button
data-testid="visibility-selector" data-testid="visibility-selector"
variant="outline" variant="outline"
className="hidden focus:outline-hidden focus:ring-0 md:flex md:h-[34px] md:px-2" className="hidden focus:outline-hidden focus:ring-0 md:flex md:h-fit md:px-2"
> >
{selectedVisibility?.icon} {selectedVisibility?.icon}
{selectedVisibility?.label} {selectedVisibility?.label}

2
lib/db/queries.ts
View file

@ -33,7 +33,7 @@ import { generateUUID } from '../utils';
import { generateHashedPassword } from './utils'; import { generateHashedPassword } from './utils';
import type { VisibilityType } from '@/components/visibility-selector'; import type { VisibilityType } from '@/components/visibility-selector';
import { ChatSDKError } from '../errors'; import { ChatSDKError } from '../errors';
import { LanguageModelV2Usage } from '@ai-sdk/provider'; import type { LanguageModelV2Usage } from '@ai-sdk/provider';
// Optionally, if not using email/pass login, you can // Optionally, if not using email/pass login, you can
// use the Drizzle adapter for Auth.js / NextAuth // use the Drizzle adapter for Auth.js / NextAuth