chat-reasoning-demo

1"use client"
2 
3import { useCallback, useRef, useState } from "react"
4 
5import { cn } from "@/lib/utils"
6import { ChatContainer } from "@/components/ui/ai-elements/chat-container"
7import {
8  Conversation,
9  ConversationContent,
10  ConversationScrollButton,
11} from "@/components/ui/ai-elements/conversation"
12import {
13  Message,
14  MessageContent,
15} from "@/components/ui/ai-elements/message"
16import {
17  PromptInput,
18  PromptInputActionAddAttachments,
19  PromptInputActionMenu,
20  PromptInputActionMenuContent,
21  PromptInputActionMenuTrigger,
22  PromptInputAttachment,
23  PromptInputAttachments,
24  PromptInputBody,
25  PromptInputFooter,
26  PromptInputModelSelect,
27  PromptInputModelSelectContent,
28  PromptInputModelSelectItem,
29  PromptInputModelSelectTrigger,
30  PromptInputModelSelectValue,
31  PromptInputSubmit,
32  PromptInputTextarea,
33  PromptInputTools,
34  type PromptInputMessage,
35} from "@/components/ui/ai-elements/prompt-input"
36import {
37  Reasoning,
38  ReasoningContent,
39  ReasoningTrigger,
40} from "@/components/ui/ai-elements/reasoning"
41import { Response } from "@/components/ui/ai-elements/response"
42 
43type MessageType = {
44  key: string
45  from: "user" | "assistant"
46  content: string
47  reasoning?: {
48    content: string
49    isStreaming?: boolean
50  }
51  avatar: string
52  name: string
53}
54 
55const initialMessages: MessageType[] = []
56 
57const models = [
58  { id: "gpt-4", name: "GPT-4" },
59  { id: "claude-2", name: "Claude 2" },
60  { id: "palm-2", name: "PaLM 2" },
61]
62 
63const reasoningTexts = [
64  "The user is asking about implementing a complex feature. Let me break this down systematically:\n\n1. First, I need to understand the technical requirements and constraints\n2. Consider the existing architecture and how this fits in\n3. Think about potential edge cases and error handling\n4. Evaluate different implementation approaches\n5. Consider performance implications and scalability\n\nBased on the context, I should provide a comprehensive solution that addresses both the immediate need and long-term maintainability. I'll structure my response to include code examples, best practices, and potential pitfalls to avoid.",
65 
66// … truncated