Repository navigation
Expand file tree
/
Copy pathApp.tsx
More file actions
68 lines (63 loc) · 1.89 KB
/
Copy pathApp.tsx
File metadata and controls
68 lines (63 loc) · 1.89 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { ScrollArea } from "@/components/ui/ScrollArea";
import { VapiButton, vapi } from "./features/Assistant";
import { MessageList } from "./features/Messages";
import { useVapi } from "./features/Assistant";
import { CharacterPreview } from "./features/Character";
import { useEffect, useRef } from "react";
function App() {
const scrollAreaRef = useRef<any>(null);
const viewportRef = useRef<HTMLDivElement>(null);
const scrollToBottom = () => {
const viewport = viewportRef.current;
if (viewport) {
viewport.scrollTop = viewport.scrollHeight;
}
};
const { toggleCall, messages, callStatus, activeTranscript, audioLevel } =
useVapi();
useEffect(() => {
vapi.on("message", scrollToBottom);
return () => {
vapi.off("message", scrollToBottom);
};
});
return (
<main className="flex h-screen">
<CharacterPreview />
<div
id="card"
className="text-slate-950 dark:text-slate-50 w-full relative"
>
{/* <div
id="card-header"
className="flex flex-col space-y-1.5 p-6 shadow pb-4"
></div> */}
<div id="card-content" className="p-6 pt-0">
<ScrollArea
ref={scrollAreaRef}
viewportRef={viewportRef}
className="h-[90vh] flex flex-1 p-4"
>
<div className="flex flex-1 flex-col min-h-[85vh] justify-end">
<MessageList
messages={messages}
activeTranscript={activeTranscript}
/>
</div>
</ScrollArea>
</div>
<div
id="card-footer"
className="flex justify-center absolute bottom-0 left-0 right-0 py-4"
>
<VapiButton
audioLevel={audioLevel}
callStatus={callStatus}
toggleCall={toggleCall}
/>
</div>
</div>
</main>
);
}
export default App;