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

fix dialog animations, mobile input ux, and tool descriptions (#1362)

Browse source
This commit is contained in:
josh 2025-12-20 00:23:15 +00:00 • committed by GitHub
parent 4d3ba8d9fe
commit 22de923298
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 101 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

11
app/(chat)/page.tsx
View file

@ -1,11 +1,9 @@
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { Suspense } from "react";
import { Chat } from "@/components/chat";
import { DataStreamHandler } from "@/components/data-stream-handler";
import { DEFAULT_CHAT_MODEL } from "@/lib/ai/models";
import { generateUUID } from "@/lib/utils";
import { auth } from "../(auth)/auth";
export default function Page() {
return (
@ -16,16 +14,9 @@ export default function Page() {
}
async function NewChatPage() {
const session = await auth();
if (!session) {
redirect("/api/auth/guest");
}
const id = generateUUID();
const cookieStore = await cookies();
const modelIdFromCookie = cookieStore.get("chat-model");
const id = generateUUID();
if (!modelIdFromCookie) {
return (

15
components/multimodal-input.tsx
View file

@ -11,7 +11,6 @@ import {
type SetStateAction,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
@ -100,6 +99,17 @@ function PureMultimodalInput({
}
}, [adjustHeight]);
const hasAutoFocused = useRef(false);
useEffect(() => {
if (!hasAutoFocused.current && width) {
const timer = setTimeout(() => {
textareaRef.current?.focus();
hasAutoFocused.current = true;
}, 100);
return () => clearTimeout(timer);
}
}, [width]);
const resetHeight = useCallback(() => {
if (textareaRef.current) {
textareaRef.current.style.height = "44px";
@ -352,8 +362,7 @@ function PureMultimodalInput({
)}
<div className="flex flex-row items-start gap-1 sm:gap-2">
<PromptInputTextarea
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"
className="grow resize-none border-0! border-none! bg-transparent p-2 text-base 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}

65
components/ui/alert-dialog.tsx
View file

@ -1,16 +1,15 @@
"use client"
"use client";
import * as React from "react"
import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
import * as React from "react";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
const AlertDialog = AlertDialogPrimitive.Root;
const AlertDialog = AlertDialogPrimitive.Root
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
const AlertDialogTrigger = AlertDialogPrimitive.Trigger
const AlertDialogPortal = AlertDialogPrimitive.Portal
const AlertDialogPortal = AlertDialogPrimitive.Portal;
const AlertDialogOverlay = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@ -18,14 +17,14 @@ const AlertDialogOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
className
)}
{...props}
ref={ref}
/>
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
));
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
const AlertDialogContent = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Content>,
@ -34,16 +33,16 @@ const AlertDialogContent = React.forwardRef<
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:rounded-lg",
className
)}
ref={ref}
{...props}
/>
</AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
));
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
const AlertDialogHeader = ({
className,
@ -56,8 +55,8 @@ const AlertDialogHeader = ({
)}
{...props}
/>
)
AlertDialogHeader.displayName = "AlertDialogHeader"
);
AlertDialogHeader.displayName = "AlertDialogHeader";
const AlertDialogFooter = ({
className,
@ -70,61 +69,61 @@ const AlertDialogFooter = ({
)}
{...props}
/>
)
AlertDialogFooter.displayName = "AlertDialogFooter"
);
AlertDialogFooter.displayName = "AlertDialogFooter";
const AlertDialogTitle = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Title
className={cn("font-semibold text-lg", className)}
ref={ref}
className={cn("text-lg font-semibold", className)}
{...props}
/>
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
));
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
const AlertDialogDescription = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Description
className={cn("text-muted-foreground text-sm", className)}
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
));
AlertDialogDescription.displayName =
AlertDialogPrimitive.Description.displayName
AlertDialogPrimitive.Description.displayName;
const AlertDialogAction = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Action>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Action
ref={ref}
className={cn(buttonVariants(), className)}
ref={ref}
{...props}
/>
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
));
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
const AlertDialogCancel = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Cancel
ref={ref}
className={cn(
buttonVariants({ variant: "outline" }),
"mt-2 sm:mt-0",
className
)}
ref={ref}
{...props}
/>
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
));
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
export {
AlertDialog,
@ -138,4 +137,4 @@ export {
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel,
}
};

2
components/ui/dialog.tsx
View file

@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
className
)}
{...props}

10
lib/ai/prompts.ts
View file

@ -30,10 +30,16 @@ This is a guide for using artifacts tools: \`createDocument\` and \`updateDocume
- Immediately after creating a document
Do not update document right after creating it. Wait for user feedback or request to update it.
**Using \`requestSuggestions\`:**
- ONLY use when the user explicitly asks for suggestions on an existing document
- Requires a valid document ID from a previously created document
- Never use for general questions or information requests
`;
export const regularPrompt =
"You are a friendly assistant! Keep your responses concise and helpful.";
export const regularPrompt = `You are a friendly assistant! Keep your responses concise and helpful.
When asked to write, create, or help with something, just do it directly. Don't ask clarifying questions unless absolutely necessary - make reasonable assumptions and proceed with the task.`;
export type RequestHints = {
latitude: Geo["latitude"];

72
lib/ai/tools/request-suggestions.ts
View file

@ -1,4 +1,4 @@
import { streamObject, tool, type UIMessageStreamWriter } from "ai";
import { Output, streamText, tool, type UIMessageStreamWriter } from "ai";
import type { Session } from "next-auth";
import { z } from "zod";
import { getDocumentById, saveSuggestions } from "@/lib/db/queries";
@ -17,11 +17,14 @@ export const requestSuggestions = ({
dataStream,
}: RequestSuggestionsProps) =>
tool({
description: "Request suggestions for a document",
description:
"Request writing suggestions for an existing document artifact. Only use this when the user explicitly asks to improve or get suggestions for a document they have already created. Never use for general questions.",
inputSchema: z.object({
documentId: z
.string()
.describe("The ID of the document to request edits"),
.describe(
"The UUID of an existing document artifact that was previously created with createDocument"
),
}),
execute: async ({ documentId }) => {
const document = await getDocumentById({ id: documentId });
@ -37,37 +40,56 @@ export const requestSuggestions = ({
"userId" | "createdAt" | "documentCreatedAt"
>[] = [];
const { elementStream } = streamObject({
const { partialOutputStream } = streamText({
model: getArtifactModel(),
system:
"You are a help writing assistant. Given a piece of writing, please offer suggestions to improve the piece of writing and describe the change. It is very important for the edits to contain full sentences instead of just words. Max 5 suggestions.",
prompt: document.content,
output: "array",
schema: z.object({
originalSentence: z.string().describe("The original sentence"),
suggestedSentence: z.string().describe("The suggested sentence"),
description: z.string().describe("The description of the suggestion"),
output: Output.array({
element: z.object({
originalSentence: z.string().describe("The original sentence"),
suggestedSentence: z.string().describe("The suggested sentence"),
description: z
.string()
.describe("The description of the suggestion"),
}),
}),
});
for await (const element of elementStream) {
// @ts-expect-error todo: fix type
const suggestion: Suggestion = {
originalText: element.originalSentence,
suggestedText: element.suggestedSentence,
description: element.description,
id: generateUUID(),
documentId,
isResolved: false,
};
let processedCount = 0;
for await (const partialOutput of partialOutputStream) {
if (!partialOutput) {
continue;
}
dataStream.write({
type: "data-suggestion",
data: suggestion,
transient: true,
});
for (let i = processedCount; i < partialOutput.length; i++) {
const element = partialOutput[i];
if (
!element?.originalSentence ||
!element?.suggestedSentence ||
!element?.description
) {
continue;
}
suggestions.push(suggestion);
const suggestion = {
originalText: element.originalSentence,
suggestedText: element.suggestedSentence,
description: element.description,
id: generateUUID(),
documentId,
isResolved: false,
};
dataStream.write({
type: "data-suggestion",
data: suggestion as Suggestion,
transient: true,
});
suggestions.push(suggestion);
processedCount++;
}
}
if (session.user?.id) {