Restore Ultracite + fix sidebar (#1233)
This commit is contained in:
Hayden Bleasel
GitHub
parent
8fbfc253fa
commit
947ed094a6
177 changed files with 6908 additions and 8306 deletions
|
|
@ -1,29 +1,29 @@
|
|||
'use client';
|
||||
import { motion } from 'framer-motion';
|
||||
import { memo, useState } from 'react';
|
||||
import type { Vote } from '@/lib/db/schema';
|
||||
import { DocumentToolResult } from './document';
|
||||
import { SparklesIcon } from './icons';
|
||||
import { Response } from './elements/response';
|
||||
import { MessageContent } from './elements/message';
|
||||
"use client";
|
||||
import type { UseChatHelpers } from "@ai-sdk/react";
|
||||
import equal from "fast-deep-equal";
|
||||
import { motion } from "framer-motion";
|
||||
import { memo, useState } from "react";
|
||||
import type { Vote } from "@/lib/db/schema";
|
||||
import type { ChatMessage } from "@/lib/types";
|
||||
import { cn, sanitizeText } from "@/lib/utils";
|
||||
import { useDataStream } from "./data-stream-provider";
|
||||
import { DocumentToolResult } from "./document";
|
||||
import { DocumentPreview } from "./document-preview";
|
||||
import { MessageContent } from "./elements/message";
|
||||
import { Response } from "./elements/response";
|
||||
import {
|
||||
Tool,
|
||||
ToolHeader,
|
||||
ToolContent,
|
||||
ToolHeader,
|
||||
ToolInput,
|
||||
ToolOutput,
|
||||
} from './elements/tool';
|
||||
import { MessageActions } from './message-actions';
|
||||
import { PreviewAttachment } from './preview-attachment';
|
||||
import { Weather } from './weather';
|
||||
import equal from 'fast-deep-equal';
|
||||
import { cn, sanitizeText } from '@/lib/utils';
|
||||
import { MessageEditor } from './message-editor';
|
||||
import { DocumentPreview } from './document-preview';
|
||||
import { MessageReasoning } from './message-reasoning';
|
||||
import type { UseChatHelpers } from '@ai-sdk/react';
|
||||
import type { ChatMessage } from '@/lib/types';
|
||||
import { useDataStream } from './data-stream-provider';
|
||||
} from "./elements/tool";
|
||||
import { SparklesIcon } from "./icons";
|
||||
import { MessageActions } from "./message-actions";
|
||||
import { MessageEditor } from "./message-editor";
|
||||
import { MessageReasoning } from "./message-reasoning";
|
||||
import { PreviewAttachment } from "./preview-attachment";
|
||||
import { Weather } from "./weather";
|
||||
|
||||
const PurePreviewMessage = ({
|
||||
chatId,
|
||||
|
|
@ -34,75 +34,73 @@ const PurePreviewMessage = ({
|
|||
regenerate,
|
||||
isReadonly,
|
||||
requiresScrollPadding,
|
||||
isArtifactVisible,
|
||||
}: {
|
||||
chatId: string;
|
||||
message: ChatMessage;
|
||||
vote: Vote | undefined;
|
||||
isLoading: boolean;
|
||||
setMessages: UseChatHelpers<ChatMessage>['setMessages'];
|
||||
regenerate: UseChatHelpers<ChatMessage>['regenerate'];
|
||||
setMessages: UseChatHelpers<ChatMessage>["setMessages"];
|
||||
regenerate: UseChatHelpers<ChatMessage>["regenerate"];
|
||||
isReadonly: boolean;
|
||||
requiresScrollPadding: boolean;
|
||||
isArtifactVisible: boolean;
|
||||
}) => {
|
||||
const [mode, setMode] = useState<'view' | 'edit'>('view');
|
||||
const [mode, setMode] = useState<"view" | "edit">("view");
|
||||
|
||||
const attachmentsFromMessage = message.parts.filter(
|
||||
(part) => part.type === 'file',
|
||||
(part) => part.type === "file"
|
||||
);
|
||||
|
||||
useDataStream();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
data-testid={`message-${message.role}`}
|
||||
className="group/message w-full"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="group/message w-full"
|
||||
data-role={message.role}
|
||||
data-testid={`message-${message.role}`}
|
||||
initial={{ opacity: 0 }}
|
||||
>
|
||||
<div
|
||||
className={cn('flex w-full items-start gap-2 md:gap-3', {
|
||||
'justify-end': message.role === 'user' && mode !== 'edit',
|
||||
'justify-start': message.role === 'assistant',
|
||||
className={cn("flex w-full items-start gap-2 md:gap-3", {
|
||||
"justify-end": message.role === "user" && mode !== "edit",
|
||||
"justify-start": message.role === "assistant",
|
||||
})}
|
||||
>
|
||||
{message.role === 'assistant' && (
|
||||
{message.role === "assistant" && (
|
||||
<div className="-mt-1 flex size-8 shrink-0 items-center justify-center rounded-full bg-background ring-1 ring-border">
|
||||
<SparklesIcon size={14} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cn('flex flex-col', {
|
||||
'gap-2 md:gap-4': message.parts?.some(
|
||||
(p) => p.type === 'text' && p.text?.trim(),
|
||||
className={cn("flex flex-col", {
|
||||
"gap-2 md:gap-4": message.parts?.some(
|
||||
(p) => p.type === "text" && p.text?.trim()
|
||||
),
|
||||
'min-h-96': message.role === 'assistant' && requiresScrollPadding,
|
||||
'w-full':
|
||||
(message.role === 'assistant' &&
|
||||
"min-h-96": message.role === "assistant" && requiresScrollPadding,
|
||||
"w-full":
|
||||
(message.role === "assistant" &&
|
||||
message.parts?.some(
|
||||
(p) => p.type === 'text' && p.text?.trim(),
|
||||
(p) => p.type === "text" && p.text?.trim()
|
||||
)) ||
|
||||
mode === 'edit',
|
||||
'max-w-[calc(100%-2.5rem)] sm:max-w-[min(fit-content,80%)]':
|
||||
message.role === 'user' && mode !== 'edit',
|
||||
mode === "edit",
|
||||
"max-w-[calc(100%-2.5rem)] sm:max-w-[min(fit-content,80%)]":
|
||||
message.role === "user" && mode !== "edit",
|
||||
})}
|
||||
>
|
||||
{attachmentsFromMessage.length > 0 && (
|
||||
<div
|
||||
data-testid={`message-attachments`}
|
||||
className="flex flex-row justify-end gap-2"
|
||||
data-testid={"message-attachments"}
|
||||
>
|
||||
{attachmentsFromMessage.map((attachment) => (
|
||||
<PreviewAttachment
|
||||
key={attachment.url}
|
||||
attachment={{
|
||||
name: attachment.filename ?? 'file',
|
||||
name: attachment.filename ?? "file",
|
||||
contentType: attachment.mediaType,
|
||||
url: attachment.url,
|
||||
}}
|
||||
key={attachment.url}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -112,31 +110,31 @@ const PurePreviewMessage = ({
|
|||
const { type } = part;
|
||||
const key = `message-${message.id}-part-${index}`;
|
||||
|
||||
if (type === 'reasoning' && part.text?.trim().length > 0) {
|
||||
if (type === "reasoning" && part.text?.trim().length > 0) {
|
||||
return (
|
||||
<MessageReasoning
|
||||
key={key}
|
||||
isLoading={isLoading}
|
||||
key={key}
|
||||
reasoning={part.text}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'text') {
|
||||
if (mode === 'view') {
|
||||
if (type === "text") {
|
||||
if (mode === "view") {
|
||||
return (
|
||||
<div key={key}>
|
||||
<MessageContent
|
||||
data-testid="message-content"
|
||||
className={cn({
|
||||
'w-fit break-words rounded-2xl px-3 py-2 text-right text-white':
|
||||
message.role === 'user',
|
||||
'bg-transparent px-0 py-0 text-left':
|
||||
message.role === 'assistant',
|
||||
"w-fit break-words rounded-2xl px-3 py-2 text-right text-white":
|
||||
message.role === "user",
|
||||
"bg-transparent px-0 py-0 text-left":
|
||||
message.role === "assistant",
|
||||
})}
|
||||
data-testid="message-content"
|
||||
style={
|
||||
message.role === 'user'
|
||||
? { backgroundColor: '#006cff' }
|
||||
message.role === "user"
|
||||
? { backgroundColor: "#006cff" }
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
|
|
@ -146,20 +144,20 @@ const PurePreviewMessage = ({
|
|||
);
|
||||
}
|
||||
|
||||
if (mode === 'edit') {
|
||||
if (mode === "edit") {
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className="flex w-full flex-row items-start gap-3"
|
||||
key={key}
|
||||
>
|
||||
<div className="size-8" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<MessageEditor
|
||||
key={message.id}
|
||||
message={message}
|
||||
setMode={setMode}
|
||||
setMessages={setMessages}
|
||||
regenerate={regenerate}
|
||||
setMessages={setMessages}
|
||||
setMode={setMode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -167,20 +165,20 @@ const PurePreviewMessage = ({
|
|||
}
|
||||
}
|
||||
|
||||
if (type === 'tool-getWeather') {
|
||||
if (type === "tool-getWeather") {
|
||||
const { toolCallId, state } = part;
|
||||
|
||||
return (
|
||||
<Tool key={toolCallId} defaultOpen={true}>
|
||||
<ToolHeader type="tool-getWeather" state={state} />
|
||||
<Tool defaultOpen={true} key={toolCallId}>
|
||||
<ToolHeader state={state} type="tool-getWeather" />
|
||||
<ToolContent>
|
||||
{state === 'input-available' && (
|
||||
{state === "input-available" && (
|
||||
<ToolInput input={part.input} />
|
||||
)}
|
||||
{state === 'output-available' && (
|
||||
{state === "output-available" && (
|
||||
<ToolOutput
|
||||
output={<Weather weatherAtLocation={part.output} />}
|
||||
errorText={undefined}
|
||||
output={<Weather weatherAtLocation={part.output} />}
|
||||
/>
|
||||
)}
|
||||
</ToolContent>
|
||||
|
|
@ -188,14 +186,14 @@ const PurePreviewMessage = ({
|
|||
);
|
||||
}
|
||||
|
||||
if (type === 'tool-createDocument') {
|
||||
if (type === "tool-createDocument") {
|
||||
const { toolCallId } = part;
|
||||
|
||||
if (part.output && 'error' in part.output) {
|
||||
if (part.output && "error" in part.output) {
|
||||
return (
|
||||
<div
|
||||
key={toolCallId}
|
||||
className="rounded-lg border border-red-200 bg-red-50 p-4 text-red-500 dark:bg-red-950/50"
|
||||
key={toolCallId}
|
||||
>
|
||||
Error creating document: {String(part.output.error)}
|
||||
</div>
|
||||
|
|
@ -204,21 +202,21 @@ const PurePreviewMessage = ({
|
|||
|
||||
return (
|
||||
<DocumentPreview
|
||||
key={toolCallId}
|
||||
isReadonly={isReadonly}
|
||||
key={toolCallId}
|
||||
result={part.output}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'tool-updateDocument') {
|
||||
if (type === "tool-updateDocument") {
|
||||
const { toolCallId } = part;
|
||||
|
||||
if (part.output && 'error' in part.output) {
|
||||
if (part.output && "error" in part.output) {
|
||||
return (
|
||||
<div
|
||||
key={toolCallId}
|
||||
className="rounded-lg border border-red-200 bg-red-50 p-4 text-red-500 dark:bg-red-950/50"
|
||||
key={toolCallId}
|
||||
>
|
||||
Error updating document: {String(part.output.error)}
|
||||
</div>
|
||||
|
|
@ -226,58 +224,60 @@ const PurePreviewMessage = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<div key={toolCallId} className="relative">
|
||||
<div className="relative" key={toolCallId}>
|
||||
<DocumentPreview
|
||||
args={{ ...part.output, isUpdate: true }}
|
||||
isReadonly={isReadonly}
|
||||
result={part.output}
|
||||
args={{ ...part.output, isUpdate: true }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'tool-requestSuggestions') {
|
||||
if (type === "tool-requestSuggestions") {
|
||||
const { toolCallId, state } = part;
|
||||
|
||||
return (
|
||||
<Tool key={toolCallId} defaultOpen={true}>
|
||||
<ToolHeader type="tool-requestSuggestions" state={state} />
|
||||
<Tool defaultOpen={true} key={toolCallId}>
|
||||
<ToolHeader state={state} type="tool-requestSuggestions" />
|
||||
<ToolContent>
|
||||
{state === 'input-available' && (
|
||||
{state === "input-available" && (
|
||||
<ToolInput input={part.input} />
|
||||
)}
|
||||
{state === 'output-available' && (
|
||||
{state === "output-available" && (
|
||||
<ToolOutput
|
||||
errorText={undefined}
|
||||
output={
|
||||
'error' in part.output ? (
|
||||
"error" in part.output ? (
|
||||
<div className="rounded border p-2 text-red-500">
|
||||
Error: {String(part.output.error)}
|
||||
</div>
|
||||
) : (
|
||||
<DocumentToolResult
|
||||
type="request-suggestions"
|
||||
result={part.output}
|
||||
isReadonly={isReadonly}
|
||||
result={part.output}
|
||||
type="request-suggestions"
|
||||
/>
|
||||
)
|
||||
}
|
||||
errorText={undefined}
|
||||
/>
|
||||
)}
|
||||
</ToolContent>
|
||||
</Tool>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
})}
|
||||
|
||||
{!isReadonly && (
|
||||
<MessageActions
|
||||
key={`action-${message.id}`}
|
||||
chatId={chatId}
|
||||
message={message}
|
||||
vote={vote}
|
||||
isLoading={isLoading}
|
||||
key={`action-${message.id}`}
|
||||
message={message}
|
||||
setMode={setMode}
|
||||
vote={vote}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -289,27 +289,36 @@ const PurePreviewMessage = ({
|
|||
export const PreviewMessage = memo(
|
||||
PurePreviewMessage,
|
||||
(prevProps, nextProps) => {
|
||||
if (prevProps.isLoading !== nextProps.isLoading) return false;
|
||||
if (prevProps.message.id !== nextProps.message.id) return false;
|
||||
if (prevProps.requiresScrollPadding !== nextProps.requiresScrollPadding)
|
||||
if (prevProps.isLoading !== nextProps.isLoading) {
|
||||
return false;
|
||||
if (!equal(prevProps.message.parts, nextProps.message.parts)) return false;
|
||||
if (!equal(prevProps.vote, nextProps.vote)) return false;
|
||||
}
|
||||
if (prevProps.message.id !== nextProps.message.id) {
|
||||
return false;
|
||||
}
|
||||
if (prevProps.requiresScrollPadding !== nextProps.requiresScrollPadding) {
|
||||
return false;
|
||||
}
|
||||
if (!equal(prevProps.message.parts, nextProps.message.parts)) {
|
||||
return false;
|
||||
}
|
||||
if (!equal(prevProps.vote, nextProps.vote)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export const ThinkingMessage = () => {
|
||||
const role = 'assistant';
|
||||
const role = "assistant";
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
data-testid="message-assistant-loading"
|
||||
className="group/message w-full"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="group/message w-full"
|
||||
data-role={role}
|
||||
data-testid="message-assistant-loading"
|
||||
initial={{ opacity: 0 }}
|
||||
>
|
||||
<div className="flex items-start justify-start gap-3">
|
||||
<div className="-mt-1 flex size-8 shrink-0 items-center justify-center rounded-full bg-background ring-1 ring-border">
|
||||
|
|
@ -329,20 +338,20 @@ export const ThinkingMessage = () => {
|
|||
const LoadingText = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<motion.div
|
||||
animate={{ backgroundPosition: ['100% 50%', '-100% 50%'] }}
|
||||
animate={{ backgroundPosition: ["100% 50%", "-100% 50%"] }}
|
||||
className="flex items-center text-transparent"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(90deg, hsl(var(--muted-foreground)) 0%, hsl(var(--muted-foreground)) 35%, hsl(var(--foreground)) 50%, hsl(var(--muted-foreground)) 65%, hsl(var(--muted-foreground)) 100%)",
|
||||
backgroundSize: "200% 100%",
|
||||
WebkitBackgroundClip: "text",
|
||||
backgroundClip: "text",
|
||||
}}
|
||||
transition={{
|
||||
duration: 1.5,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: 'linear',
|
||||
ease: "linear",
|
||||
}}
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(90deg, hsl(var(--muted-foreground)) 0%, hsl(var(--muted-foreground)) 35%, hsl(var(--foreground)) 50%, hsl(var(--muted-foreground)) 65%, hsl(var(--muted-foreground)) 100%)',
|
||||
backgroundSize: '200% 100%',
|
||||
WebkitBackgroundClip: 'text',
|
||||
backgroundClip: 'text',
|
||||
}}
|
||||
className="flex items-center text-transparent"
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue