fix: small ui nits (#1178)
This commit is contained in:
josh
GitHub
parent
848205f5cb
commit
eae41c635d
13 changed files with 50 additions and 49 deletions
|
|
@ -7,7 +7,6 @@ import { getChatById, getMessagesByChatId } from '@/lib/db/queries';
|
|||
import { DataStreamHandler } from '@/components/data-stream-handler';
|
||||
import { DEFAULT_CHAT_MODEL } from '@/lib/ai/models';
|
||||
import { convertToUIMessages } from '@/lib/utils';
|
||||
import { LanguageModelV2Usage } from '@ai-sdk/provider';
|
||||
|
||||
export default async function Page(props: { params: Promise<{ id: string }> }) {
|
||||
const params = await props.params;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ function PureChatHeader({
|
|||
{(!open || windowWidth < 768) && (
|
||||
<Button
|
||||
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={() => {
|
||||
router.push('/');
|
||||
router.refresh();
|
||||
|
|
@ -55,7 +55,7 @@ function PureChatHeader({
|
|||
)}
|
||||
|
||||
<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
|
||||
>
|
||||
<Link
|
||||
|
|
|
|||
|
|
@ -275,8 +275,9 @@ export const Context = ({
|
|||
<HoverCardTrigger asChild>
|
||||
<button
|
||||
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',
|
||||
className,
|
||||
)}
|
||||
type="button"
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -201,6 +201,7 @@ export const PromptInputModelSelectTrigger = ({
|
|||
className={cn(
|
||||
'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',
|
||||
'h-auto px-2 py-1.5',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<svg
|
||||
height={size}
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 16 16"
|
||||
width={size}
|
||||
style={{ color: 'currentcolor' }}
|
||||
style={{ color: 'currentcolor', ...props.style }}
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
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 (
|
||||
<svg
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
width={size}
|
||||
style={{ color: 'currentcolor' }}
|
||||
style={{ color: 'currentcolor', ...props.style }}
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
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 (
|
||||
<svg
|
||||
height={size}
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 16 16"
|
||||
width={size}
|
||||
style={{ color: 'currentcolor' }}
|
||||
style={{ color: 'currentcolor', ...props.style }}
|
||||
className="-rotate-45"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ const PurePreviewMessage = ({
|
|||
data-role={message.role}
|
||||
>
|
||||
<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-start': message.role === 'assistant',
|
||||
})}
|
||||
|
|
@ -86,7 +86,7 @@ const PurePreviewMessage = ({
|
|||
(p) => p.type === 'text' && p.text?.trim(),
|
||||
)) ||
|
||||
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',
|
||||
})}
|
||||
>
|
||||
|
|
@ -317,7 +317,7 @@ export const ThinkingMessage = () => {
|
|||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@ function PureMessages({
|
|||
className="overscroll-behavior-contain -webkit-overflow-scrolling-touch flex-1 touch-pan-y overflow-y-scroll"
|
||||
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">
|
||||
<ConversationContent className="flex flex-col gap-4 md:gap-6">
|
||||
<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 px-2 py-4 md:gap-6 md:px-4">
|
||||
{messages.length === 0 && <Greeting />}
|
||||
|
||||
{messages.map((message, index) => (
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export function ModelSelector({
|
|||
<ChevronDownIcon />
|
||||
</Button>
|
||||
</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) => {
|
||||
const { id } = chatModel;
|
||||
|
||||
|
|
@ -83,16 +83,16 @@ export function ModelSelector({
|
|||
>
|
||||
<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>{chatModel.name}</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
<div className="text-sm sm:text-base">{chatModel.name}</div>
|
||||
<div className='line-clamp-2 text-muted-foreground text-xs'>
|
||||
{chatModel.description}
|
||||
</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 />
|
||||
</div>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -253,7 +253,7 @@ function PureMultimodalInput({
|
|||
}, [status, scrollToBottom]);
|
||||
|
||||
return (
|
||||
<div className="relative flex w-full flex-col gap-4">
|
||||
<div className='relative flex w-full flex-col gap-4'>
|
||||
<AnimatePresence>
|
||||
{!isAtBottom && (
|
||||
<motion.div
|
||||
|
|
@ -261,7 +261,7 @@ function PureMultimodalInput({
|
|||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 10 }}
|
||||
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
|
||||
data-testid="scroll-to-bottom-button"
|
||||
|
|
@ -299,7 +299,7 @@ function PureMultimodalInput({
|
|||
/>
|
||||
|
||||
<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) => {
|
||||
event.preventDefault();
|
||||
if (status !== 'ready') {
|
||||
|
|
@ -312,7 +312,7 @@ function PureMultimodalInput({
|
|||
{(attachments.length > 0 || uploadQueue.length > 0) && (
|
||||
<div
|
||||
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) => (
|
||||
<PreviewAttachment
|
||||
|
|
@ -342,7 +342,7 @@ function PureMultimodalInput({
|
|||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-row gap-2 items-start">
|
||||
<div className='flex flex-row items-start gap-1 sm:gap-2'>
|
||||
<PromptInputTextarea
|
||||
data-testid="multimodal-input"
|
||||
ref={textareaRef}
|
||||
|
|
@ -352,14 +352,14 @@ function PureMultimodalInput({
|
|||
minHeight={44}
|
||||
maxHeight={200}
|
||||
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}
|
||||
autoFocus
|
||||
/>{' '}
|
||||
<Context {...contextProps} />
|
||||
<Context {...contextProps} className="mr-1.5" />
|
||||
</div>
|
||||
<PromptInputToolbar className="px-3 py-2 border-t-0! !border-top-0 shadow-none dark:border-transparent! dark:border-0">
|
||||
<PromptInputTools className="gap-2">
|
||||
<PromptInputToolbar className='!border-top-0 border-t-0! px-2 py-2 shadow-none dark:border-0 dark:border-transparent!'>
|
||||
<PromptInputTools className="gap-1 sm:gap-2">
|
||||
<AttachmentsButton
|
||||
fileInputRef={fileInputRef}
|
||||
status={status}
|
||||
|
|
@ -374,9 +374,9 @@ function PureMultimodalInput({
|
|||
<PromptInputSubmit
|
||||
status={status}
|
||||
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>
|
||||
)}
|
||||
</PromptInputToolbar>
|
||||
|
|
@ -413,16 +413,15 @@ function PureAttachmentsButton({
|
|||
return (
|
||||
<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) => {
|
||||
event.preventDefault();
|
||||
fileInputRef.current?.click();
|
||||
}}
|
||||
disabled={status !== 'ready' || isReasoningModel}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
>
|
||||
<PaperclipIcon size={14} />
|
||||
<PaperclipIcon size={14} style={{ width: 14, height: 14 }} />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
|
@ -455,16 +454,16 @@ function PureModelSelectorCompact({
|
|||
>
|
||||
<PromptInputModelSelectTrigger
|
||||
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'}
|
||||
</PromptInputModelSelectTrigger>
|
||||
<PromptInputModelSelectContent>
|
||||
<PromptInputModelSelectContent className="max-w-[90vw] sm:max-w-[400px]">
|
||||
{chatModels.map((model) => (
|
||||
<SelectItem key={model.id} value={model.name}>
|
||||
<div className="flex flex-col items-start gap-1 py-1">
|
||||
<div className="font-medium">{model.name}</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
<div className='flex flex-col items-start gap-1 py-1'>
|
||||
<div className='font-medium text-sm'>{model.name}</div>
|
||||
<div className='line-clamp-2 text-muted-foreground text-xs'>
|
||||
{model.description}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -487,16 +486,14 @@ function PureStopButton({
|
|||
return (
|
||||
<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) => {
|
||||
event.preventDefault();
|
||||
stop();
|
||||
setMessages((messages) => messages);
|
||||
}}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
<StopIcon size={16} />
|
||||
<StopIcon size={14} />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export const PreviewAttachment = ({
|
|||
const { name, url, contentType } = attachment;
|
||||
|
||||
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') ? (
|
||||
<Image
|
||||
src={url}
|
||||
|
|
@ -28,7 +28,7 @@ export const PreviewAttachment = ({
|
|||
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
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -50,7 +50,7 @@ export const PreviewAttachment = ({
|
|||
</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}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export function SidebarToggle({
|
|||
data-testid="sidebar-toggle-button"
|
||||
onClick={toggleSidebar}
|
||||
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} />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export function VisibilitySelector({
|
|||
<Button
|
||||
data-testid="visibility-selector"
|
||||
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?.label}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ import { generateUUID } from '../utils';
|
|||
import { generateHashedPassword } from './utils';
|
||||
import type { VisibilityType } from '@/components/visibility-selector';
|
||||
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
|
||||
// use the Drizzle adapter for Auth.js / NextAuth
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue