Chatbot

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 { Button } from "@/components/ui/button"
20import { cn } from "@/lib/utils"
21import { useChat } from "@ai-sdk/react"
22import { DefaultChatTransport } from "ai"
23import type { UIMessage } from "ai"
24import {
25  AlertTriangle,
26  ArrowUp,
27  Copy,
28  ThumbsDown,
29  ThumbsUp,
30} from "lucide-react"
31import { memo, useState } from "react"
32 
33type MessageComponentProps = {
34  message: UIMessage
35  isLastMessage: boolean
36}
37 
38export const MessageComponent = memo(
39  ({ message, isLastMessage }: MessageComponentProps) => {
40    const isAssistant = message.role === "assistant"
41 
42    return (
43      <Message
44        className={cn(
45          "mx-auto flex w-full max-w-3xl flex-col gap-2 px-2 md:px-10",
46          isAssistant ? "items-start" : "items-end"
47        )}
48      >
49        {isAssistant ? (
50          <div className="group flex w-full flex-col gap-0">
51            <MessageContent
52              className="text-foreground prose w-full min-w-0 flex-1 rounded-lg bg-transparent p-0"
53              markdown
54            >
55              {message.parts
56                .map((part) => (part.type === "text" ? part.text : null))
57                .join("")}
58            </MessageContent>
59            <MessageActions
60              className={cn(
61                "-ml-2.5 flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100",
62                isLastMessage && "opacity-100"
63              )}
64            >
65              <MessageAction tooltip="Copy" delayDuration={100}>
66                <Button variant="ghost" size="icon" className="rounded-full">
67                  <Copy />
68                </Button>
69              </MessageAction>
70              <MessageAction tooltip="Upvote" delayDuration={100}>
71                <Button variant="ghost" size="icon" className="rounded-full">
72                  <ThumbsUp />
73                </Button>
74              </MessageAction>
75              <MessageAction tooltip="Downvote" delayDuration={100}>
76                <Button variant="ghost" size="icon" className="rounded-full">
77                  <ThumbsDown />
78                </Button>
79// … truncated