Upgrade linter and formatter to Ultracite (#1224)
This commit is contained in:
Hayden Bleasel
GitHub
parent
b1d254283b
commit
0e320b391d
177 changed files with 6951 additions and 8342 deletions
|
|
@ -1,51 +1,51 @@
|
|||
'use client';
|
||||
"use client";
|
||||
|
||||
import type { UIMessage } from 'ai';
|
||||
import type { UseChatHelpers } from "@ai-sdk/react";
|
||||
import { Trigger } from "@radix-ui/react-select";
|
||||
import type { UIMessage } from "ai";
|
||||
import equal from "fast-deep-equal";
|
||||
import {
|
||||
useRef,
|
||||
useEffect,
|
||||
useState,
|
||||
useCallback,
|
||||
type Dispatch,
|
||||
type SetStateAction,
|
||||
type ChangeEvent,
|
||||
type Dispatch,
|
||||
memo,
|
||||
type SetStateAction,
|
||||
startTransition,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
} from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { useLocalStorage, useWindowSize } from 'usehooks-ts';
|
||||
|
||||
import {
|
||||
ArrowUpIcon,
|
||||
PaperclipIcon,
|
||||
CpuIcon,
|
||||
StopIcon,
|
||||
ChevronDownIcon,
|
||||
} from './icons';
|
||||
import { PreviewAttachment } from './preview-attachment';
|
||||
import { Button } from './ui/button';
|
||||
import { SuggestedActions } from './suggested-actions';
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { toast } from "sonner";
|
||||
import { useLocalStorage, useWindowSize } from "usehooks-ts";
|
||||
import { saveChatModelAsCookie } from "@/app/(chat)/actions";
|
||||
import { SelectItem } from "@/components/ui/select";
|
||||
import { chatModels } from "@/lib/ai/models";
|
||||
import { myProvider } from "@/lib/ai/providers";
|
||||
import type { Attachment, ChatMessage } from "@/lib/types";
|
||||
import type { AppUsage } from "@/lib/usage";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Context } from "./elements/context";
|
||||
import {
|
||||
PromptInput,
|
||||
PromptInputModelSelect,
|
||||
PromptInputModelSelectContent,
|
||||
PromptInputSubmit,
|
||||
PromptInputTextarea,
|
||||
PromptInputToolbar,
|
||||
PromptInputTools,
|
||||
PromptInputSubmit,
|
||||
PromptInputModelSelect,
|
||||
PromptInputModelSelectContent,
|
||||
} from './elements/prompt-input';
|
||||
import { SelectItem } from '@/components/ui/select';
|
||||
import * as SelectPrimitive from '@radix-ui/react-select';
|
||||
import equal from 'fast-deep-equal';
|
||||
import type { UseChatHelpers } from '@ai-sdk/react';
|
||||
import type { VisibilityType } from './visibility-selector';
|
||||
import type { Attachment, ChatMessage } from '@/lib/types';
|
||||
import type { AppUsage } from '@/lib/usage';
|
||||
import { chatModels } from '@/lib/ai/models';
|
||||
import { saveChatModelAsCookie } from '@/app/(chat)/actions';
|
||||
import { startTransition } from 'react';
|
||||
import { Context } from './elements/context';
|
||||
import { myProvider } from '@/lib/ai/providers';
|
||||
} from "./elements/prompt-input";
|
||||
import {
|
||||
ArrowUpIcon,
|
||||
ChevronDownIcon,
|
||||
CpuIcon,
|
||||
PaperclipIcon,
|
||||
StopIcon,
|
||||
} from "./icons";
|
||||
import { PreviewAttachment } from "./preview-attachment";
|
||||
import { SuggestedActions } from "./suggested-actions";
|
||||
import { Button } from "./ui/button";
|
||||
import type { VisibilityType } from "./visibility-selector";
|
||||
|
||||
function PureMultimodalInput({
|
||||
chatId,
|
||||
|
|
@ -67,13 +67,13 @@ function PureMultimodalInput({
|
|||
chatId: string;
|
||||
input: string;
|
||||
setInput: Dispatch<SetStateAction<string>>;
|
||||
status: UseChatHelpers<ChatMessage>['status'];
|
||||
status: UseChatHelpers<ChatMessage>["status"];
|
||||
stop: () => void;
|
||||
attachments: Array<Attachment>;
|
||||
setAttachments: Dispatch<SetStateAction<Array<Attachment>>>;
|
||||
messages: Array<UIMessage>;
|
||||
setMessages: UseChatHelpers<ChatMessage>['setMessages'];
|
||||
sendMessage: UseChatHelpers<ChatMessage>['sendMessage'];
|
||||
attachments: Attachment[];
|
||||
setAttachments: Dispatch<SetStateAction<Attachment[]>>;
|
||||
messages: UIMessage[];
|
||||
setMessages: UseChatHelpers<ChatMessage>["setMessages"];
|
||||
sendMessage: UseChatHelpers<ChatMessage>["sendMessage"];
|
||||
className?: string;
|
||||
selectedVisibilityType: VisibilityType;
|
||||
selectedModelId: string;
|
||||
|
|
@ -83,40 +83,40 @@ function PureMultimodalInput({
|
|||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const { width } = useWindowSize();
|
||||
|
||||
const adjustHeight = useCallback(() => {
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = "44px";
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (textareaRef.current) {
|
||||
adjustHeight();
|
||||
}
|
||||
}, [adjustHeight]);
|
||||
|
||||
const resetHeight = useCallback(() => {
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = "44px";
|
||||
}
|
||||
}, []);
|
||||
|
||||
const adjustHeight = () => {
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = '44px';
|
||||
}
|
||||
};
|
||||
|
||||
const resetHeight = () => {
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = '44px';
|
||||
}
|
||||
};
|
||||
|
||||
const [localStorageInput, setLocalStorageInput] = useLocalStorage(
|
||||
'input',
|
||||
'',
|
||||
"input",
|
||||
""
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (textareaRef.current) {
|
||||
const domValue = textareaRef.current.value;
|
||||
// Prefer DOM value over localStorage to handle hydration
|
||||
const finalValue = domValue || localStorageInput || '';
|
||||
const finalValue = domValue || localStorageInput || "";
|
||||
setInput(finalValue);
|
||||
adjustHeight();
|
||||
}
|
||||
// Only run once after hydration
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
}, [adjustHeight, localStorageInput, setInput]);
|
||||
|
||||
useEffect(() => {
|
||||
setLocalStorageInput(input);
|
||||
|
|
@ -127,31 +127,31 @@ function PureMultimodalInput({
|
|||
};
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [uploadQueue, setUploadQueue] = useState<Array<string>>([]);
|
||||
const [uploadQueue, setUploadQueue] = useState<string[]>([]);
|
||||
|
||||
const submitForm = useCallback(() => {
|
||||
window.history.replaceState({}, '', `/chat/${chatId}`);
|
||||
window.history.replaceState({}, "", `/chat/${chatId}`);
|
||||
|
||||
sendMessage({
|
||||
role: 'user',
|
||||
role: "user",
|
||||
parts: [
|
||||
...attachments.map((attachment) => ({
|
||||
type: 'file' as const,
|
||||
type: "file" as const,
|
||||
url: attachment.url,
|
||||
name: attachment.name,
|
||||
mediaType: attachment.contentType,
|
||||
})),
|
||||
{
|
||||
type: 'text',
|
||||
type: "text",
|
||||
text: input,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
setAttachments([]);
|
||||
setLocalStorageInput('');
|
||||
setLocalStorageInput("");
|
||||
resetHeight();
|
||||
setInput('');
|
||||
setInput("");
|
||||
|
||||
if (width && width > 768) {
|
||||
textareaRef.current?.focus();
|
||||
|
|
@ -165,15 +165,16 @@ function PureMultimodalInput({
|
|||
setLocalStorageInput,
|
||||
width,
|
||||
chatId,
|
||||
resetHeight,
|
||||
]);
|
||||
|
||||
const uploadFile = async (file: File) => {
|
||||
const uploadFile = useCallback(async (file: File) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append("file", file);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/files/upload', {
|
||||
method: 'POST',
|
||||
const response = await fetch("/api/files/upload", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
|
|
@ -184,17 +185,17 @@ function PureMultimodalInput({
|
|||
return {
|
||||
url,
|
||||
name: pathname,
|
||||
contentType: contentType,
|
||||
contentType,
|
||||
};
|
||||
}
|
||||
const { error } = await response.json();
|
||||
toast.error(error);
|
||||
} catch (error) {
|
||||
toast.error('Failed to upload file, please try again!');
|
||||
} catch (_error) {
|
||||
toast.error("Failed to upload file, please try again!");
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const modelResolver = useMemo(() => {
|
||||
const _modelResolver = useMemo(() => {
|
||||
return myProvider.languageModel(selectedModelId);
|
||||
}, [selectedModelId]);
|
||||
|
||||
|
|
@ -202,7 +203,7 @@ function PureMultimodalInput({
|
|||
() => ({
|
||||
usage,
|
||||
}),
|
||||
[usage],
|
||||
[usage]
|
||||
);
|
||||
|
||||
const handleFileChange = useCallback(
|
||||
|
|
@ -215,7 +216,7 @@ function PureMultimodalInput({
|
|||
const uploadPromises = files.map((file) => uploadFile(file));
|
||||
const uploadedAttachments = await Promise.all(uploadPromises);
|
||||
const successfullyUploadedAttachments = uploadedAttachments.filter(
|
||||
(attachment) => attachment !== undefined,
|
||||
(attachment) => attachment !== undefined
|
||||
);
|
||||
|
||||
setAttachments((currentAttachments) => [
|
||||
|
|
@ -223,42 +224,41 @@ function PureMultimodalInput({
|
|||
...successfullyUploadedAttachments,
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('Error uploading files!', error);
|
||||
console.error("Error uploading files!", error);
|
||||
} finally {
|
||||
setUploadQueue([]);
|
||||
}
|
||||
},
|
||||
[setAttachments],
|
||||
[setAttachments, uploadFile]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex relative flex-col gap-4 w-full">
|
||||
|
||||
<div className={cn("relative flex w-full flex-col gap-4", className)}>
|
||||
{messages.length === 0 &&
|
||||
attachments.length === 0 &&
|
||||
uploadQueue.length === 0 && (
|
||||
<SuggestedActions
|
||||
sendMessage={sendMessage}
|
||||
chatId={chatId}
|
||||
selectedVisibilityType={selectedVisibilityType}
|
||||
sendMessage={sendMessage}
|
||||
/>
|
||||
)}
|
||||
|
||||
<input
|
||||
type="file"
|
||||
className="-top-4 -left-4 pointer-events-none fixed size-0.5 opacity-0"
|
||||
ref={fileInputRef}
|
||||
multiple
|
||||
onChange={handleFileChange}
|
||||
ref={fileInputRef}
|
||||
tabIndex={-1}
|
||||
type="file"
|
||||
/>
|
||||
|
||||
<PromptInput
|
||||
className="p-3 rounded-xl border transition-all duration-200 border-border bg-background shadow-xs focus-within:border-border hover:border-muted-foreground/50"
|
||||
className="rounded-xl border border-border bg-background p-3 shadow-xs transition-all duration-200 focus-within:border-border hover:border-muted-foreground/50"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
if (status !== 'ready') {
|
||||
toast.error('Please wait for the model to finish its response!');
|
||||
if (status !== "ready") {
|
||||
toast.error("Please wait for the model to finish its response!");
|
||||
} else {
|
||||
submitForm();
|
||||
}
|
||||
|
|
@ -266,19 +266,19 @@ function PureMultimodalInput({
|
|||
>
|
||||
{(attachments.length > 0 || uploadQueue.length > 0) && (
|
||||
<div
|
||||
className="flex flex-row items-end gap-2 overflow-x-scroll"
|
||||
data-testid="attachments-preview"
|
||||
className="flex overflow-x-scroll flex-row gap-2 items-end"
|
||||
>
|
||||
{attachments.map((attachment) => (
|
||||
<PreviewAttachment
|
||||
key={attachment.url}
|
||||
attachment={attachment}
|
||||
key={attachment.url}
|
||||
onRemove={() => {
|
||||
setAttachments((currentAttachments) =>
|
||||
currentAttachments.filter((a) => a.url !== attachment.url),
|
||||
currentAttachments.filter((a) => a.url !== attachment.url)
|
||||
);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
|
@ -286,50 +286,53 @@ function PureMultimodalInput({
|
|||
|
||||
{uploadQueue.map((filename) => (
|
||||
<PreviewAttachment
|
||||
key={filename}
|
||||
attachment={{
|
||||
url: '',
|
||||
url: "",
|
||||
name: filename,
|
||||
contentType: '',
|
||||
contentType: "",
|
||||
}}
|
||||
isUploading={true}
|
||||
key={filename}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-row gap-1 items-start sm:gap-2">
|
||||
<div className="flex flex-row items-start gap-1 sm:gap-2">
|
||||
<PromptInputTextarea
|
||||
data-testid="multimodal-input"
|
||||
ref={textareaRef}
|
||||
placeholder="Send a message..."
|
||||
value={input}
|
||||
onChange={handleInput}
|
||||
minHeight={44}
|
||||
maxHeight={200}
|
||||
disableAutoResize={true}
|
||||
className="grow resize-none border-0! p-2 border-none! bg-transparent 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 [&::-webkit-scrollbar]:hidden"
|
||||
rows={1}
|
||||
autoFocus
|
||||
/>{' '}
|
||||
className="grow resize-none border-0! border-none! bg-transparent p-2 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 [&::-webkit-scrollbar]:hidden"
|
||||
data-testid="multimodal-input"
|
||||
disableAutoResize={true}
|
||||
maxHeight={200}
|
||||
minHeight={44}
|
||||
onChange={handleInput}
|
||||
placeholder="Send a message..."
|
||||
ref={textareaRef}
|
||||
rows={1}
|
||||
value={input}
|
||||
/>{" "}
|
||||
<Context {...contextProps} />
|
||||
</div>
|
||||
<PromptInputToolbar className="!border-top-0 border-t-0! p-0 shadow-none dark:border-0 dark:border-transparent!">
|
||||
<PromptInputTools className="gap-0 sm:gap-0.5">
|
||||
<AttachmentsButton
|
||||
fileInputRef={fileInputRef}
|
||||
selectedModelId={selectedModelId}
|
||||
status={status}
|
||||
/>
|
||||
<ModelSelectorCompact
|
||||
onModelChange={onModelChange}
|
||||
selectedModelId={selectedModelId}
|
||||
/>
|
||||
<ModelSelectorCompact selectedModelId={selectedModelId} onModelChange={onModelChange} />
|
||||
</PromptInputTools>
|
||||
|
||||
{status === 'submitted' ? (
|
||||
<StopButton stop={stop} setMessages={setMessages} />
|
||||
{status === "submitted" ? (
|
||||
<StopButton setMessages={setMessages} stop={stop} />
|
||||
) : (
|
||||
<PromptInputSubmit
|
||||
status={status}
|
||||
className="size-8 rounded-full bg-primary text-primary-foreground transition-colors duration-200 hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground"
|
||||
disabled={!input.trim() || uploadQueue.length > 0}
|
||||
className="rounded-full transition-colors duration-200 size-8 bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground"
|
||||
status={status}
|
||||
>
|
||||
<ArrowUpIcon size={14} />
|
||||
</PromptInputSubmit>
|
||||
|
|
@ -343,15 +346,24 @@ function PureMultimodalInput({
|
|||
export const MultimodalInput = memo(
|
||||
PureMultimodalInput,
|
||||
(prevProps, nextProps) => {
|
||||
if (prevProps.input !== nextProps.input) return false;
|
||||
if (prevProps.status !== nextProps.status) return false;
|
||||
if (!equal(prevProps.attachments, nextProps.attachments)) return false;
|
||||
if (prevProps.selectedVisibilityType !== nextProps.selectedVisibilityType)
|
||||
if (prevProps.input !== nextProps.input) {
|
||||
return false;
|
||||
if (prevProps.selectedModelId !== nextProps.selectedModelId) return false;
|
||||
}
|
||||
if (prevProps.status !== nextProps.status) {
|
||||
return false;
|
||||
}
|
||||
if (!equal(prevProps.attachments, nextProps.attachments)) {
|
||||
return false;
|
||||
}
|
||||
if (prevProps.selectedVisibilityType !== nextProps.selectedVisibilityType) {
|
||||
return false;
|
||||
}
|
||||
if (prevProps.selectedModelId !== nextProps.selectedModelId) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function PureAttachmentsButton({
|
||||
|
|
@ -360,20 +372,20 @@ function PureAttachmentsButton({
|
|||
selectedModelId,
|
||||
}: {
|
||||
fileInputRef: React.MutableRefObject<HTMLInputElement | null>;
|
||||
status: UseChatHelpers<ChatMessage>['status'];
|
||||
status: UseChatHelpers<ChatMessage>["status"];
|
||||
selectedModelId: string;
|
||||
}) {
|
||||
const isReasoningModel = selectedModelId === 'chat-model-reasoning';
|
||||
const isReasoningModel = selectedModelId === "chat-model-reasoning";
|
||||
|
||||
return (
|
||||
<Button
|
||||
className="aspect-square h-8 rounded-lg p-1 transition-colors hover:bg-accent"
|
||||
data-testid="attachments-button"
|
||||
className="p-1 h-8 rounded-lg transition-colors aspect-square hover:bg-accent"
|
||||
disabled={status !== "ready" || isReasoningModel}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
fileInputRef.current?.click();
|
||||
}}
|
||||
disabled={status !== 'ready' || isReasoningModel}
|
||||
variant="ghost"
|
||||
>
|
||||
<PaperclipIcon size={14} style={{ width: 14, height: 14 }} />
|
||||
|
|
@ -397,12 +409,11 @@ function PureModelSelectorCompact({
|
|||
}, [selectedModelId]);
|
||||
|
||||
const selectedModel = chatModels.find(
|
||||
(model) => model.id === optimisticModelId,
|
||||
(model) => model.id === optimisticModelId
|
||||
);
|
||||
|
||||
return (
|
||||
<PromptInputModelSelect
|
||||
value={selectedModel?.name}
|
||||
onValueChange={(modelName) => {
|
||||
const model = chatModels.find((m) => m.name === modelName);
|
||||
if (model) {
|
||||
|
|
@ -413,28 +424,29 @@ function PureModelSelectorCompact({
|
|||
});
|
||||
}
|
||||
}}
|
||||
value={selectedModel?.name}
|
||||
>
|
||||
<SelectPrimitive.Trigger
|
||||
<Trigger
|
||||
className="flex h-8 items-center gap-2 rounded-lg border-0 bg-background px-2 text-foreground shadow-none transition-colors hover:bg-accent focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
|
||||
type="button"
|
||||
className="flex gap-2 items-center px-2 h-8 rounded-lg border-0 shadow-none transition-colors bg-background text-foreground hover:bg-accent focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
|
||||
>
|
||||
<CpuIcon size={16} />
|
||||
<span className="hidden text-xs font-medium sm:block">
|
||||
<span className="hidden font-medium text-xs sm:block">
|
||||
{selectedModel?.name}
|
||||
</span>
|
||||
<ChevronDownIcon size={16} />
|
||||
</SelectPrimitive.Trigger>
|
||||
</Trigger>
|
||||
<PromptInputModelSelectContent className="min-w-[260px] p-0">
|
||||
<div className="flex flex-col gap-px">
|
||||
{chatModels.map((model) => (
|
||||
<SelectItem
|
||||
className="px-3 py-2 text-xs"
|
||||
key={model.id}
|
||||
value={model.name}
|
||||
className="px-3 py-2 text-xs"
|
||||
>
|
||||
<div className="flex flex-col flex-1 gap-1 min-w-0">
|
||||
<div className="text-xs font-medium truncate">{model.name}</div>
|
||||
<div className="text-[10px] text-muted-foreground truncate leading-tight">
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-1">
|
||||
<div className="truncate font-medium text-xs">{model.name}</div>
|
||||
<div className="truncate text-[10px] text-muted-foreground leading-tight">
|
||||
{model.description}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -453,12 +465,12 @@ function PureStopButton({
|
|||
setMessages,
|
||||
}: {
|
||||
stop: () => void;
|
||||
setMessages: UseChatHelpers<ChatMessage>['setMessages'];
|
||||
setMessages: UseChatHelpers<ChatMessage>["setMessages"];
|
||||
}) {
|
||||
return (
|
||||
<Button
|
||||
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"
|
||||
data-testid="stop-button"
|
||||
className="p-1 rounded-full transition-colors duration-200 size-7 bg-foreground text-background hover:bg-foreground/90 disabled:bg-muted disabled:text-muted-foreground"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
stop();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue