mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 14:22:28 +08:00
upgrade to ai-sdk 5
This commit is contained in:
dayuan.jiang
@@ -5,13 +5,13 @@ import { useRef, useEffect, useState, useCallback } from "react";
|
||||
import Image from "next/image";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import ExamplePanel from "./chat-example-panel";
|
||||
import { Message } from "ai";
|
||||
import { UIMessage } from "ai";
|
||||
import { convertToLegalXml, replaceNodes } from "@/lib/utils";
|
||||
|
||||
import { useDiagram } from "@/contexts/diagram-context";
|
||||
|
||||
interface ChatMessageDisplayProps {
|
||||
messages: Message[];
|
||||
messages: UIMessage[];
|
||||
error?: Error | null;
|
||||
setInput: (input: string) => void;
|
||||
setFiles: (files: File[]) => void;
|
||||
@@ -30,15 +30,18 @@ export function ChatMessageDisplay({
|
||||
const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>(
|
||||
{}
|
||||
);
|
||||
const handleDisplayChart = useCallback((xml: string) => {
|
||||
const currentXml = xml || "";
|
||||
const convertedXml = convertToLegalXml(currentXml);
|
||||
if (convertedXml !== previousXML.current) {
|
||||
previousXML.current = convertedXml;
|
||||
const replacedXML = replaceNodes(chartXML, convertedXml);
|
||||
onDisplayChart(replacedXML);
|
||||
}
|
||||
}, [chartXML, onDisplayChart]);
|
||||
const handleDisplayChart = useCallback(
|
||||
(xml: string) => {
|
||||
const currentXml = xml || "";
|
||||
const convertedXml = convertToLegalXml(currentXml);
|
||||
if (convertedXml !== previousXML.current) {
|
||||
previousXML.current = convertedXml;
|
||||
const replacedXML = replaceNodes(chartXML, convertedXml);
|
||||
onDisplayChart(replacedXML);
|
||||
}
|
||||
},
|
||||
[chartXML, onDisplayChart]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (messagesEndRef.current) {
|
||||
@@ -50,27 +53,36 @@ export function ChatMessageDisplay({
|
||||
useEffect(() => {
|
||||
messages.forEach((message) => {
|
||||
if (message.parts) {
|
||||
message.parts.forEach((part) => {
|
||||
if (part.type === "tool-invocation") {
|
||||
const { toolCallId, state, args, toolName } = part.toolInvocation;
|
||||
|
||||
message.parts.forEach((part: any) => {
|
||||
if (part.type?.startsWith("tool-")) {
|
||||
const { toolCallId, state } = part;
|
||||
|
||||
// Auto-collapse args when diagrams are generated
|
||||
if (state === "result") {
|
||||
if (state === "output-available") {
|
||||
setExpandedTools((prev) => ({
|
||||
...prev,
|
||||
[toolCallId]: false,
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
// Handle diagram updates for display_diagram tool
|
||||
if (toolName === "display_diagram" && args?.xml) {
|
||||
// For partial calls, always update to show streaming
|
||||
if (state === "partial-call") {
|
||||
handleDisplayChart(args.xml);
|
||||
if (
|
||||
part.type === "tool-display_diagram" &&
|
||||
part.input?.xml
|
||||
) {
|
||||
// For streaming input, always update to show streaming
|
||||
if (
|
||||
state === "input-streaming" ||
|
||||
state === "input-available"
|
||||
) {
|
||||
handleDisplayChart(part.input.xml);
|
||||
}
|
||||
// For completed calls, only update if not processed yet
|
||||
else if (state === "result" && !processedToolCalls.current.has(toolCallId)) {
|
||||
handleDisplayChart(args.xml);
|
||||
else if (
|
||||
state === "output-available" &&
|
||||
!processedToolCalls.current.has(toolCallId)
|
||||
) {
|
||||
handleDisplayChart(part.input.xml);
|
||||
processedToolCalls.current.add(toolCallId);
|
||||
}
|
||||
}
|
||||
@@ -80,9 +92,9 @@ export function ChatMessageDisplay({
|
||||
});
|
||||
}, [messages, handleDisplayChart]);
|
||||
|
||||
const renderToolInvocation = (toolInvocation: any) => {
|
||||
const callId = toolInvocation.toolCallId;
|
||||
const { toolName, args, state } = toolInvocation;
|
||||
const renderToolPart = (part: any) => {
|
||||
const callId = part.toolCallId;
|
||||
const { state, input } = part;
|
||||
const isExpanded = expandedTools[callId] ?? true;
|
||||
|
||||
const toggleExpanded = () => {
|
||||
@@ -100,7 +112,7 @@ export function ChatMessageDisplay({
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs">Tool: display_diagram</div>
|
||||
{args && Object.keys(args).length > 0 && (
|
||||
{input && Object.keys(input).length > 0 && (
|
||||
<button
|
||||
onClick={toggleExpanded}
|
||||
className="text-xs text-gray-500 hover:text-gray-700"
|
||||
@@ -109,20 +121,24 @@ export function ChatMessageDisplay({
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{args && isExpanded && (
|
||||
{input && isExpanded && (
|
||||
<div className="mt-1 font-mono text-xs overflow-hidden">
|
||||
{typeof args === "object" &&
|
||||
Object.keys(args).length > 0 &&
|
||||
`Args: ${JSON.stringify(args, null, 2)}`}
|
||||
{typeof input === "object" &&
|
||||
Object.keys(input).length > 0 &&
|
||||
`Input: ${JSON.stringify(input, null, 2)}`}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-2 text-sm">
|
||||
{state === "partial-call" ? (
|
||||
{state === "input-streaming" ? (
|
||||
<div className="h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
) : state === "result" ? (
|
||||
) : state === "output-available" ? (
|
||||
<div className="text-green-600">
|
||||
Diagram generated
|
||||
</div>
|
||||
) : state === "output-error" ? (
|
||||
<div className="text-red-600">
|
||||
Error generating diagram
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,66 +165,35 @@ export function ChatMessageDisplay({
|
||||
: "bg-muted text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{message.parts
|
||||
? message.parts.map((part, index) => {
|
||||
switch (part.type) {
|
||||
case "text":
|
||||
return (
|
||||
<div key={index}>
|
||||
{part.text}
|
||||
</div>
|
||||
);
|
||||
case "tool-invocation":
|
||||
return renderToolInvocation(
|
||||
part.toolInvocation
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})
|
||||
: message.content}
|
||||
{message.parts?.map((part: any, index: number) => {
|
||||
switch (part.type) {
|
||||
case "text":
|
||||
return (
|
||||
<div key={index}>{part.text}</div>
|
||||
);
|
||||
case "file":
|
||||
return (
|
||||
<div key={index} className="mt-2">
|
||||
<Image
|
||||
src={part.url}
|
||||
width={200}
|
||||
height={200}
|
||||
alt={`file-${index}`}
|
||||
className="rounded-md border"
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
if (part.type?.startsWith("tool-")) {
|
||||
return renderToolPart(part);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
|
||||
{message?.experimental_attachments
|
||||
?.filter((attachment) =>
|
||||
attachment?.contentType?.startsWith("image/")
|
||||
)
|
||||
.map((attachment, index) => (
|
||||
<div
|
||||
key={`${message.id}-${index}`}
|
||||
className={`mt-2 ${
|
||||
message.role === "user"
|
||||
? "text-right"
|
||||
: "text-left"
|
||||
}`}
|
||||
>
|
||||
<div className="inline-block">
|
||||
<Image
|
||||
src={attachment.url}
|
||||
width={200}
|
||||
height={200}
|
||||
alt={
|
||||
attachment.name ??
|
||||
`attachment-${index}`
|
||||
}
|
||||
className="rounded-md border"
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{(message as any).function_call && (
|
||||
<div className="mt-2 text-left">
|
||||
<div className="text-xs text-gray-500">
|
||||
Using tool:{" "}
|
||||
{(message as any).function_call.name}
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user