voice-chat-01

1"use client"
2 
3import { useCallback, useEffect, useRef, useState } from "react"
4import type { ComponentProps } from "react"
5import {
6  ConversationProvider,
7  useConversation,
8  useConversationControls,
9  useConversationStatus,
10} from "@elevenlabs/react"
11import {
12  AudioLinesIcon,
13  CheckIcon,
14  CopyIcon,
15  PhoneOffIcon,
16  SendIcon,
17} from "lucide-react"
18 
19import { cn } from "@/lib/utils"
20import { Button } from "@/components/ui/button"
21import {
22  Card,
23  CardContent,
24  CardFooter,
25  CardHeader,
26} from "@/components/ui/card"
27import {
28  Conversation,
29  ConversationContent,
30  ConversationEmptyState,
31  ConversationScrollButton,
32} from "@/components/ui/conversation"
33import { Input } from "@/components/ui/input"
34import { Message, MessageContent } from "@/components/ui/message"
35import { Orb } from "@/components/ui/orb"
36import { Response } from "@/components/ui/response"
37import { ShimmeringText } from "@/components/ui/shimmering-text"
38import {
39  Tooltip,
40  TooltipContent,
41  TooltipProvider,
42  TooltipTrigger,
43} from "@/components/ui/tooltip"
44 
45type SystemMessageType = "initial" | "connecting" | "connected" | "error"
46 
47interface ChatMessage {
48  role: "user" | "assistant"
49  content: string
50  timestamp?: Date
51  type?: SystemMessageType
52}
53 
54const DEFAULT_AGENT = {
55  agentId: process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID!,
56  name: "Customer Support",
57  description: "AI Voice Assistant",
58}
59 
60type ChatActionsProps = ComponentProps<"div">
61 
62const ChatActions = ({ className, children, ...props }: ChatActionsProps) => (
63  <div className={cn("flex items-center gap-1", className)} {...props}>
64    {children}
65  </div>
66)
67 
68type ChatActionProps = ComponentProps<typeof Button> & {
69  tooltip?: string
70  label?: string
71}
72 
73const ChatAction = ({
74  tooltip,
75  children,
76  label,
77  className,
78  variant = "ghost",
79  size = "sm",
80  ...props
81}: ChatActionProps) => {
82  const button = (
83    <Button
84      className={cn(
85        "text-muted-foreground hover:text-foreground relative size-9 p-1.5",
86        className
87      )}
88      size={size}
89      type="button"
90      variant={variant}
91      {...props}
92    >
93      {children}
94      <span className="sr-only">{label || tooltip}</span>
95    </Button>
96  )
97 
98  if (tooltip) {
99    return (
100      <TooltipProvider>
101        <Tooltip>
102          <TooltipTrigger asChild>{button}</TooltipTrigger>
103          <TooltipContent>
104            <p>{tooltip}</p>
105          </TooltipContent>
106        </Tooltip>
107      </TooltipProvider>
108    )
109  }
110 
111  return button
112}
113 
114// … truncated