Tool calling

1"use client"
2 
3import {
4  ChatContainerContent,
5  ChatContainerRoot,
6} from "@/components/prompt-kit/chat-container"
7import { DotsLoader } from "@/components/prompt-kit/loader"
8import {
9  Message,
10  MessageAction,
11  MessageActions,
12  MessageContent,
13} from "@/components/prompt-kit/message"
14import {
15  PromptInput,
16  PromptInputActions,
17  PromptInputTextarea,
18} from "@/components/prompt-kit/prompt-input"
19import { Tool } from "@/components/prompt-kit/tool"
20import type { ToolPart } from "@/components/prompt-kit/tool"
21import { Button } from "@/components/ui/button"
22import { cn } from "@/lib/utils"
23import { useChat } from "@ai-sdk/react"
24import { DefaultChatTransport } from "ai"
25import type { UIMessage, UIMessagePart } from "ai"
26import {
27  AlertTriangle,
28  ArrowUp,
29  Copy,
30  ThumbsDown,
31  ThumbsUp,
32} from "lucide-react"
33import { memo, useState } from "react"
34 
35type MessageComponentProps = {
36  message: UIMessage
37  isLastMessage: boolean
38}
39 
40const renderToolPart = (
41  part: UIMessagePart<any, any>,
42  index: number
43): React.ReactNode => {
44  if (!part.type?.startsWith("tool-")) return null
45 
46  return <Tool key={`${part.type}-${index}`} toolPart={part as ToolPart} />
47}
48 
49export const MessageComponent = memo(
50  ({ message, isLastMessage }: MessageComponentProps) => {
51    const isAssistant = message?.role === "assistant"
52 
53    return (
54      <Message
55        className={cn(
56          "mx-auto flex w-full max-w-3xl flex-col gap-2 px-2 md:px-10",
57          isAssistant ? "items-start" : "items-end"
58        )}
59      >
60        {isAssistant ? (
61          <div className="group flex w-full flex-col gap-0 space-y-2">
62            <div className="w-full">
63              {message?.parts
64                .filter(
65                  (part: any) => part.type && part.type.startsWith("tool-")
66                )
67                .map((part: any, index: number) => renderToolPart(part, index))}
68            </div>
69            <MessageContent
70              className="text-foreground prose w-full min-w-0 flex-1 rounded-lg bg-transparent p-0"
71              markdown
72            >
73              {message?.parts
74                .filter((part: any) => part.type === "text")
75                .map((part: any) => part.text)
76                .join("")}
77            </MessageContent>
78 
79            <MessageActions
80              className={cn(
81                "-ml-2.5 flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100",
82                isLastMessage && "opacity-100"
83              )}
84// … truncated