mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 22:32:27 +08:00
refactor: move message-display to seperate component.
This commit is contained in:
dayuan.jiang
@@ -24,7 +24,6 @@ import {
|
|||||||
DialogFooter,
|
DialogFooter,
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
DialogTrigger,
|
|
||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
|
||||||
|
|||||||
194
components/chat-message-display.tsx
Normal file
194
components/chat-message-display.tsx
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import type React from "react";
|
||||||
|
import { useRef, useEffect } 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 { convertToLegalXml } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface ChatMessageDisplayProps {
|
||||||
|
messages: Message[];
|
||||||
|
error?: Error | null;
|
||||||
|
setInput: (input: string) => void;
|
||||||
|
setFiles: (files: FileList | undefined) => void;
|
||||||
|
onDisplayChart: (xml: string) => void;
|
||||||
|
stepCounterRef: React.MutableRefObject<number>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ChatMessageDisplay({
|
||||||
|
messages,
|
||||||
|
error,
|
||||||
|
setInput,
|
||||||
|
setFiles,
|
||||||
|
onDisplayChart,
|
||||||
|
stepCounterRef,
|
||||||
|
}: ChatMessageDisplayProps) {
|
||||||
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (messagesEndRef.current) {
|
||||||
|
messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}
|
||||||
|
}, [messages]);
|
||||||
|
|
||||||
|
const renderToolInvocation = (toolInvocation: any) => {
|
||||||
|
const callId = toolInvocation.toolCallId;
|
||||||
|
|
||||||
|
switch (toolInvocation.toolName) {
|
||||||
|
case "display_diagram": {
|
||||||
|
switch (toolInvocation.state) {
|
||||||
|
case "partial-call": {
|
||||||
|
const currentXml = toolInvocation.args?.xml || "";
|
||||||
|
|
||||||
|
// Increment the step counter
|
||||||
|
stepCounterRef.current += 1;
|
||||||
|
|
||||||
|
// Determine whether to show details based on a simple threshold
|
||||||
|
if (
|
||||||
|
stepCounterRef.current >= 50 &&
|
||||||
|
stepCounterRef.current % 20 === 0
|
||||||
|
) {
|
||||||
|
onDisplayChart(convertToLegalXml(currentXml));
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={callId}
|
||||||
|
className="mt-2 text-sm bg-blue-50 p-2 rounded border border-blue-200"
|
||||||
|
>
|
||||||
|
<div className="font-medium">
|
||||||
|
Generating diagram...
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500 mt-1">
|
||||||
|
Tool: display_diagram
|
||||||
|
<div className="mt-1 font-mono text-xs">
|
||||||
|
onDisplayChart
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
case "call":
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={callId}
|
||||||
|
className="mt-2 text-sm bg-yellow-50 p-2 rounded border border-yellow-200"
|
||||||
|
>
|
||||||
|
<div className="font-medium">
|
||||||
|
Displaying diagram...
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500 mt-1">
|
||||||
|
Tool: display_diagram
|
||||||
|
<div className="mt-1 font-mono text-xs">
|
||||||
|
Args:{" "}
|
||||||
|
{JSON.stringify(
|
||||||
|
toolInvocation.args,
|
||||||
|
null,
|
||||||
|
2
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
case "result":
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollArea className="h-full pr-4">
|
||||||
|
{messages.length === 0 ? (
|
||||||
|
<ExamplePanel setInput={setInput} setFiles={setFiles} />
|
||||||
|
) : (
|
||||||
|
messages.map((message) => (
|
||||||
|
<div
|
||||||
|
key={message.id}
|
||||||
|
className={`mb-4 ${
|
||||||
|
message.role === "user" ? "text-right" : "text-left"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${
|
||||||
|
message.role === "user"
|
||||||
|
? "bg-primary text-primary-foreground"
|
||||||
|
: "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}
|
||||||
|
</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>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
{error && (
|
||||||
|
<div className="text-red-500 text-sm mt-2">
|
||||||
|
Error: {error.message}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div ref={messagesEndRef} />
|
||||||
|
</ScrollArea>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -2,7 +2,6 @@
|
|||||||
|
|
||||||
import type React from "react";
|
import type React from "react";
|
||||||
import { useRef, useEffect, useState } from "react";
|
import { useRef, useEffect, useState } from "react";
|
||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
@@ -11,11 +10,9 @@ import {
|
|||||||
CardHeader,
|
CardHeader,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
} from "@/components/ui/card";
|
} from "@/components/ui/card";
|
||||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
||||||
import { useChat } from "@ai-sdk/react";
|
import { useChat } from "@ai-sdk/react";
|
||||||
import { ChatInput } from "@/components/chat-input";
|
import { ChatInput } from "@/components/chat-input";
|
||||||
import { convertToLegalXml } from "@/lib/utils";
|
import { ChatMessageDisplay } from "./chat-message-display";
|
||||||
import ExamplePanel from "./chat-example-panel";
|
|
||||||
interface ChatPanelProps {
|
interface ChatPanelProps {
|
||||||
onDisplayChart: (xml: string) => void;
|
onDisplayChart: (xml: string) => void;
|
||||||
onFetchChart: () => Promise<string>;
|
onFetchChart: () => Promise<string>;
|
||||||
@@ -33,7 +30,6 @@ export default function ChatPanel({
|
|||||||
const stepCounterRef = useRef<number>(0);
|
const stepCounterRef = useRef<number>(0);
|
||||||
// Add state for file attachments
|
// Add state for file attachments
|
||||||
const [files, setFiles] = useState<FileList | undefined>(undefined);
|
const [files, setFiles] = useState<FileList | undefined>(undefined);
|
||||||
// Add state to control visibility of prompt examples panel
|
|
||||||
// Add state for showing the history dialog
|
// Add state for showing the history dialog
|
||||||
const [showHistory, setShowHistory] = useState(false);
|
const [showHistory, setShowHistory] = useState(false);
|
||||||
|
|
||||||
@@ -101,185 +97,20 @@ export default function ChatPanel({
|
|||||||
setShowHistory(false);
|
setShowHistory(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Helper function to render tool invocations
|
|
||||||
const renderToolInvocation = (toolInvocation: any) => {
|
|
||||||
const callId = toolInvocation.toolCallId;
|
|
||||||
|
|
||||||
switch (toolInvocation.toolName) {
|
|
||||||
case "display_diagram": {
|
|
||||||
switch (toolInvocation.state) {
|
|
||||||
case "partial-call": {
|
|
||||||
const currentXml = toolInvocation.args?.xml || "";
|
|
||||||
|
|
||||||
// Increment the step counter
|
|
||||||
stepCounterRef.current += 1;
|
|
||||||
// Log the current step
|
|
||||||
|
|
||||||
// Determine whether to show details based on a simple threshold
|
|
||||||
// Rather than comparing lengths (which can cause re-renders)
|
|
||||||
if (
|
|
||||||
stepCounterRef.current >= 50 &&
|
|
||||||
stepCounterRef.current % 20 === 0
|
|
||||||
) {
|
|
||||||
onDisplayChart(convertToLegalXml(currentXml));
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={callId}
|
|
||||||
className="mt-2 text-sm bg-blue-50 p-2 rounded border border-blue-200"
|
|
||||||
>
|
|
||||||
<div className="font-medium">
|
|
||||||
Generating diagram...
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500 mt-1">
|
|
||||||
Tool: display_diagram
|
|
||||||
<div className="mt-1 font-mono text-xs">
|
|
||||||
onDisplayChart
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
case "call":
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={callId}
|
|
||||||
className="mt-2 text-sm bg-yellow-50 p-2 rounded border border-yellow-200"
|
|
||||||
>
|
|
||||||
<div className="font-medium">
|
|
||||||
Displaying diagram...
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500 mt-1">
|
|
||||||
Tool: display_diagram
|
|
||||||
<div className="mt-1 font-mono text-xs">
|
|
||||||
Args:{" "}
|
|
||||||
{JSON.stringify(
|
|
||||||
toolInvocation.args,
|
|
||||||
null,
|
|
||||||
2
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
case "result":
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="h-full flex flex-col rounded-none py-0 gap-0">
|
<Card className="h-full flex flex-col rounded-none py-0 gap-0">
|
||||||
<CardHeader className="p-4 text-center">
|
<CardHeader className="p-4 text-center">
|
||||||
<CardTitle>Next-AI-Drawio</CardTitle>
|
<CardTitle>Next-AI-Drawio</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="flex-grow overflow-hidden px-2">
|
<CardContent className="flex-grow overflow-hidden px-2">
|
||||||
<ScrollArea className="h-full pr-4">
|
<ChatMessageDisplay
|
||||||
{messages.length === 0 ? (
|
messages={messages}
|
||||||
<ExamplePanel
|
error={error}
|
||||||
setInput={setInput}
|
setInput={setInput}
|
||||||
setFiles={handleFileChange}
|
setFiles={handleFileChange}
|
||||||
|
onDisplayChart={onDisplayChart}
|
||||||
|
stepCounterRef={stepCounterRef}
|
||||||
/>
|
/>
|
||||||
) : (
|
|
||||||
messages.map((message) => (
|
|
||||||
<div
|
|
||||||
key={message.id}
|
|
||||||
className={`mb-4 ${
|
|
||||||
message.role === "user"
|
|
||||||
? "text-right"
|
|
||||||
: "text-left"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${
|
|
||||||
message.role === "user"
|
|
||||||
? "bg-primary text-primary-foreground"
|
|
||||||
: "bg-muted text-muted-foreground"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{/* Render message content based on parts if available */}
|
|
||||||
{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;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
: // Fallback to simple content for older format
|
|
||||||
message.content}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Display image attachments */}
|
|
||||||
{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>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{/* Legacy support for function_call format */}
|
|
||||||
{(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>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
{error && (
|
|
||||||
<div className="text-red-500 text-sm mt-2">
|
|
||||||
Error: {error.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div ref={messagesEndRef} />
|
|
||||||
</ScrollArea>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
|
||||||
<CardFooter className="p-2">
|
<CardFooter className="p-2">
|
||||||
|
|||||||
Reference in New Issue
Block a user