├── app
    ├── favicon.ico
    ├── layout.tsx
    ├── api
    │   └── route.ts
    ├── config.ts
    ├── global.css
    └── page.tsx
├── public
    ├── icon.png
    ├── social.png
    ├── shutter.mp3
    ├── color-wash-bg.png
    ├── logo-anthropic.svg
    ├── logo-openai.svg
    └── logo-together.svg
├── components
    ├── Setup
    │   ├── index.tsx
    │   ├── AudioIndicator
    │   │   ├── styles.module.css
    │   │   └── index.tsx
    │   ├── DeviceSelect.tsx
    │   └── Configure.tsx
    ├── ui
    │   ├── label.tsx
    │   ├── field.tsx
    │   ├── helptip.tsx
    │   ├── textarea.tsx
    │   ├── switch.tsx
    │   ├── tooltip.tsx
    │   ├── input.tsx
    │   ├── alert.tsx
    │   ├── select.tsx
    │   ├── button.tsx
    │   └── card.tsx
    ├── Header
    │   ├── ExpiryTimer
    │   │   ├── styles.module.css
    │   │   └── index.tsx
    │   └── index.tsx
    ├── Session
    │   ├── Agent
    │   │   ├── avatar.tsx
    │   │   ├── model.tsx
    │   │   ├── face.svg
    │   │   ├── index.tsx
    │   │   ├── styles.module.css
    │   │   └── waveform.tsx
    │   ├── TranscriptOverlay
    │   │   ├── styles.module.css
    │   │   └── index.tsx
    │   ├── UserMicBubble
    │   │   ├── index.tsx
    │   │   └── styles.module.css
    │   ├── Stats
    │   │   ├── styles.module.css
    │   │   └── index.tsx
    │   └── index.tsx
    ├── context.tsx
    ├── Splash.tsx
    └── App.tsx
├── next.config.mjs
├── utils
    ├── tailwind.ts
    └── stats_aggregator.ts
├── postcss.config.mjs
├── .gitignore
├── tsconfig.json
├── types
    └── stats_aggregator.d.ts
├── package.json
├── lib
    └── stores
    │   └── languageStore.ts
├── rtvi.config.ts
├── tailwind.config.ts
└── Readme.md


/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roshanbvadassery/ai-teacher/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roshanbvadassery/ai-teacher/HEAD/public/icon.png


--------------------------------------------------------------------------------
/public/social.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roshanbvadassery/ai-teacher/HEAD/public/social.png


--------------------------------------------------------------------------------
/components/Setup/index.tsx:
--------------------------------------------------------------------------------
1 | import { Configure } from "./Configure";
2 | 
3 | export { Configure };
4 | 


--------------------------------------------------------------------------------
/public/shutter.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roshanbvadassery/ai-teacher/HEAD/public/shutter.mp3


--------------------------------------------------------------------------------
/public/color-wash-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roshanbvadassery/ai-teacher/HEAD/public/color-wash-bg.png


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/utils/tailwind.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs));
6 | }
7 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('postcss-load-config').Config} */
 2 | const config = {
 3 |   plugins: {
 4 |     "tailwindcss/nesting": "postcss-nesting",
 5 |     tailwindcss: {},
 6 |   },
 7 | };
 8 | 
 9 | export default config;
10 | 


--------------------------------------------------------------------------------
/components/Setup/AudioIndicator/styles.module.css:
--------------------------------------------------------------------------------
 1 | .bar {
 2 |   background: theme(colors.gray.200);
 3 |   height: 8px;
 4 |   width: 100%;
 5 |   border-radius: 999px;
 6 |   overflow: hidden;
 7 | }
 8 | .bar div {
 9 |   background: theme(colors.green.500);
10 |   height: 8px;
11 |   width: 0px;
12 |   border-radius: 999px;
13 |   transition: width 0.1s ease;
14 | }
15 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/utils/tailwind";
 4 | 
 5 | export const Label: React.FC<{
 6 |   className?: string;
 7 |   children: React.ReactNode;
 8 | }> = ({ className, children }) => (
 9 |   <label className={cn("font-medium text-sm", className)}>{children}</label>
10 | );
11 | 
12 | Label.displayName = "Label";
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/components/Header/ExpiryTimer/styles.module.css:
--------------------------------------------------------------------------------
 1 | .expiry {
 2 |   margin-left: auto;
 3 |   display: flex;
 4 |   flex-flow: row nowrap;
 5 |   font-size: theme(fontSize.sm);
 6 |   background-color: theme(colors.primary.100);
 7 |   border-radius: theme(borderRadius.lg);
 8 |   padding: theme(spacing.2) theme(spacing.3);
 9 |   border-top: 1px solid theme(colors.primary.200);
10 |   gap: theme(spacing[1.5]);
11 | 
12 |   svg {
13 |     color: theme(colors.primary.400);
14 |   }
15 | }
16 | 
17 | .expired {
18 |   color: theme(colors.primary.400);
19 | }
20 | 
21 | .time {
22 |   font-weight: theme(fontWeight.semibold);
23 |   letter-spacing: theme(letterSpacing.wider);
24 |   width: 80px;
25 | }
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/components/ui/field.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/utils/tailwind";
 4 | 
 5 | import { Label } from "./label";
 6 | 
 7 | interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
 8 |   label: string;
 9 |   error?: string | undefined | boolean;
10 | }
11 | 
12 | export const Field: React.FC<FieldProps> = ({
13 |   className,
14 |   label,
15 |   error,
16 |   children,
17 | }) => (
18 |   <div className={cn("flex flex-col items-start gap-2 w-full", className)}>
19 |     <Label className="font-medium text-sm">{label}</Label>
20 |     {children}
21 |     {error && <p className="text-xs font-semibold text-red-500">{error}</p>}
22 |   </div>
23 | );
24 | 
25 | Field.displayName = "Field";
26 | 


--------------------------------------------------------------------------------
/components/Setup/AudioIndicator/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useCallback, useRef } from "react";
 2 | import { VoiceEvent } from "realtime-ai";
 3 | import { useVoiceClientEvent } from "realtime-ai-react";
 4 | 
 5 | import styles from "./styles.module.css";
 6 | 
 7 | export const AudioIndicatorBar: React.FC = () => {
 8 |   const volRef = useRef<HTMLDivElement>(null);
 9 | 
10 |   useVoiceClientEvent(
11 |     VoiceEvent.LocalAudioLevel,
12 |     useCallback((volume: number) => {
13 |       if (volRef.current)
14 |         volRef.current.style.width = Math.max(2, volume * 100) + "%";
15 |     }, [])
16 |   );
17 | 
18 |   return (
19 |     <div className={styles.bar}>
20 |       <div ref={volRef} />
21 |     </div>
22 |   );
23 | };
24 | 
25 | export default AudioIndicatorBar;
26 | 


--------------------------------------------------------------------------------
/components/ui/helptip.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { CircleHelp } from "lucide-react";
 3 | 
 4 | import { cn } from "@/utils/tailwind";
 5 | 
 6 | import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 7 | 
 8 | interface HelpTipProps {
 9 |   text: string;
10 |   className?: string;
11 | }
12 | 
13 | const HelpTip: React.FC<HelpTipProps> = ({ text, className }) => {
14 |   return (
15 |     <Tooltip>
16 |       <TooltipTrigger>
17 |         <CircleHelp
18 |           size={16}
19 |           className={cn("text-primary-400 hidden md:block", className)}
20 |         />
21 |       </TooltipTrigger>
22 |       <TooltipContent asChild>
23 |         <span className="text-sm font-medium">{text}</span>
24 |       </TooltipContent>
25 |     </Tooltip>
26 |   );
27 | };
28 | 
29 | export default HelpTip;
30 | 


--------------------------------------------------------------------------------
/types/stats_aggregator.d.ts:
--------------------------------------------------------------------------------
 1 | type Stat = [string, string, number, number];
 2 | 
 3 | interface MetricValue {
 4 |   latest: number;
 5 |   timeseries: number[];
 6 |   median: number | null;
 7 |   high: number | null;
 8 |   low: number | null;
 9 | }
10 | 
11 | interface Metric {
12 |   [metric: string]: MetricValue;
13 | }
14 | 
15 | interface StatsMap {
16 |   [service: string]: Metric;
17 | }
18 | 
19 | interface IStatsAggregator {
20 |   statsMap: StatsMap;
21 |   hasNewStats: boolean;
22 |   turns: number;
23 | 
24 |   addStat(stat: Stat): void;
25 |   getStats(): StatsMap | null;
26 | }
27 | 
28 | declare class StatsAggregator implements IStatsAggregator {
29 |   statsMap: StatsMap;
30 |   hasNewStats: boolean;
31 |   turns: number;
32 | 
33 |   constructor();
34 |   addStat(stat: Stat): void;
35 |   getStats(): StatsMap | null;
36 | }
37 | 


--------------------------------------------------------------------------------
/components/Header/index.tsx:
--------------------------------------------------------------------------------
 1 | import ExpiryTimer from "@/components/Header/ExpiryTimer";
 2 | 
 3 | const aCx =
 4 |   "underline decoration-primary-400/0 hover:decoration-primary-400 underline-offset-4 transition-all duration-300";
 5 | 
 6 | export function Header() {
 7 |   return (
 8 |     <header
 9 |       id="header"
10 |       className="w-full flex self-start items-center p-[--app-padding] justify-between"
11 |     >
12 |       <div className="group flex gap-8">
13 |         <a
14 |           href="https://github.com/SuyashPatil-29/ai-teacher"
15 |           target="_blank"
16 |           rel="noreferrer"
17 |           className={aCx}
18 |         >
19 |           <p>GitHub</p>
20 |         </a>
21 |         Made with ❤️ by Suyash Patil
22 |       </div>
23 |       <ExpiryTimer />
24 |     </header>
25 |   );
26 | }
27 | 
28 | export default Header;
29 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter, Space_Mono } from "next/font/google";
 3 | 
 4 | import "./global.css";
 5 | 
 6 | // Font
 7 | const fontSans = Inter({
 8 |   subsets: ["latin"],
 9 |   display: "swap",
10 |   variable: "--font-sans",
11 | });
12 | 
13 | const fontMono = Space_Mono({
14 |   subsets: ["latin"],
15 |   weight: ["400", "700"],
16 |   variable: "--font-mono",
17 | });
18 | 
19 | export const metadata: Metadata = {
20 |   title: "AI Vision Teacher",
21 |   description: "An AI vision teacher app using Next.js",
22 | };
23 | 
24 | export default function RootLayout({
25 |   children,
26 | }: Readonly<{
27 |   children: React.ReactNode;
28 | }>) {
29 |   return (
30 |     <html lang="en">
31 |       <body className={`${fontSans.variable} ${fontMono.variable}`}>
32 |         {children}
33 |       </body>
34 |     </html>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/components/Session/Agent/avatar.tsx:
--------------------------------------------------------------------------------
 1 | import { useCallback, useRef } from "react";
 2 | import Image from "next/image";
 3 | import { VoiceEvent } from "realtime-ai";
 4 | import { useVoiceClientEvent } from "realtime-ai-react";
 5 | 
 6 | import FaceSVG from "./face.svg";
 7 | 
 8 | import styles from "./styles.module.css";
 9 | 
10 | export const Avatar: React.FC = () => {
11 |   const volRef = useRef<HTMLDivElement>(null);
12 | 
13 |   useVoiceClientEvent(
14 |     VoiceEvent.RemoteAudioLevel,
15 |     useCallback((volume: number) => {
16 |       if (!volRef.current) return;
17 |       volRef.current.style.transform = `scale(${Math.max(1, 1 + volume)})`;
18 |     }, [])
19 |   );
20 | 
21 |   return (
22 |     <>
23 |       <Image src={FaceSVG} alt="Face" className={styles.face} />
24 |       <div className={styles.faceBubble} ref={volRef} />
25 |     </>
26 |   );
27 | };
28 | 
29 | export default Avatar;
30 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/utils/tailwind";
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     );
20 |   }
21 | );
22 | Textarea.displayName = "Textarea";
23 | 
24 | export { Textarea };
25 | 


--------------------------------------------------------------------------------
/components/context.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, ReactNode, useContext, useState } from "react";
 2 | 
 3 | interface CharacterContextType {
 4 |   character: number;
 5 |   setCharacter: (value: number) => void;
 6 | }
 7 | 
 8 | export const CharacterContext = createContext<CharacterContextType>({
 9 |   character: 0,
10 |   setCharacter: () => {
11 |     throw new Error("setCharacter function must be overridden");
12 |   },
13 | });
14 | CharacterContext.displayName = "CharacterContext";
15 | 
16 | type CharacterProviderProps = {
17 |   children: ReactNode;
18 | };
19 | 
20 | export const CharacterProvider: React.FC<
21 |   React.PropsWithChildren<CharacterProviderProps>
22 | > = ({ children }) => {
23 |   const [character, setCharacter] = useState<number>(0);
24 | 
25 |   return (
26 |     <CharacterContext.Provider value={{ character, setCharacter }}>
27 |       {children}
28 |     </CharacterContext.Provider>
29 |   );
30 | };
31 | 


--------------------------------------------------------------------------------
/components/Session/Agent/model.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { VoiceEvent } from "realtime-ai";
 3 | import { useVoiceClient, useVoiceClientEvent } from "realtime-ai-react";
 4 | 
 5 | import styles from "./styles.module.css";
 6 | 
 7 | const ModelBadge: React.FC = () => {
 8 |   const voiceClient = useVoiceClient()!;
 9 |   const [model, setModel] = React.useState<string | undefined>(undefined);
10 | 
11 |   const getModelFromConfig = () => {
12 |     if (!voiceClient) return;
13 | 
14 |     voiceClient.getServiceOptionsFromConfig("llm").options.find((option) => {
15 |       if (option.name === "model") {
16 |         setModel(option.value as string);
17 |       }
18 |     });
19 |   };
20 | 
21 |   useVoiceClientEvent(VoiceEvent.ConfigUpdated, () => {
22 |     if (!voiceClient) return;
23 |     getModelFromConfig();
24 |   });
25 | 
26 |   return <div className={styles.modelBadge}>{model}</div>;
27 | };
28 | 
29 | export default ModelBadge;
30 | 


--------------------------------------------------------------------------------
/app/api/route.ts:
--------------------------------------------------------------------------------
 1 | // [POST] /api
 2 | import { defaultBotProfile, defaultMaxDuration } from "./../../rtvi.config";
 3 | 
 4 | export async function POST(request: Request) {
 5 |   const { services, config } = await request.json();
 6 | 
 7 |   if (!services || !config || !process.env.DAILY_BOTS_URL) {
 8 |     return new Response(`Services or config not found on request body`, {
 9 |       status: 400,
10 |     });
11 |   }
12 | 
13 |   const payload = {
14 |     bot_profile: defaultBotProfile,
15 |     max_duration: defaultMaxDuration,
16 |     services,
17 |     api_keys: {
18 |       openai: process.env.OPENAI_API_KEY,
19 |     },
20 |     config: [...config],
21 |   };
22 | 
23 |   const req = await fetch(process.env.DAILY_BOTS_URL, {
24 |     method: "POST",
25 |     headers: {
26 |       "Content-Type": "application/json",
27 |       Authorization: `Bearer ${process.env.DAILY_API_KEY}`,
28 |     },
29 |     body: JSON.stringify(payload),
30 |   });
31 | 
32 |   const res = await req.json();
33 | 
34 |   if (req.status !== 200) {
35 |     return Response.json(res, { status: req.status });
36 |   }
37 | 
38 |   return Response.json(res);
39 | }
40 | 


--------------------------------------------------------------------------------
/components/Session/Agent/face.svg:
--------------------------------------------------------------------------------
1 | <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M200 100C200 155.228 155.228 200 100 200C44.7715 200 0 155.228 0 100C0 44.7715 44.7715 0 100 0C155.228 0 200 44.7715 200 100Z" fill="#E2E8F0"/>
3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M100 188C148.601 188 188 148.601 188 100C188 51.3989 148.601 12 100 12C51.3989 12 12 51.3989 12 100C12 148.601 51.3989 188 100 188ZM100 200C155.228 200 200 155.228 200 100C200 44.7715 155.228 0 100 0C44.7715 0 0 44.7715 0 100C0 155.228 44.7715 200 100 200Z" fill="#94A3B8"/>
4 | <path d="M82 100C82 105.523 77.5228 110 72 110C66.4772 110 62 105.523 62 100C62 94.4772 66.4772 90 72 90C77.5228 90 82 94.4772 82 100Z" fill="#1E293B"/>
5 | <path d="M82 100C82 105.523 77.5228 110 72 110C66.4772 110 62 105.523 62 100C62 94.4772 66.4772 90 72 90C77.5228 90 82 94.4772 82 100Z" fill="#1E293B"/>
6 | <path d="M138 100C138 105.523 133.523 110 128 110C122.477 110 118 105.523 118 100C118 94.4772 122.477 90 128 90C133.523 90 138 94.4772 138 100Z" fill="#1E293B"/>
7 | <path d="M138 100C138 105.523 133.523 110 128 110C122.477 110 118 105.523 118 100C118 94.4772 122.477 90 128 90C133.523 90 138 94.4772 138 100Z" fill="#1E293B"/>
8 | </svg>
9 | 


--------------------------------------------------------------------------------
/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as SwitchPrimitives from "@radix-ui/react-switch";
 3 | 
 4 | import { cn } from "@/utils/tailwind";
 5 | 
 6 | const Switch = React.forwardRef<
 7 |   React.ElementRef<typeof SwitchPrimitives.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <SwitchPrimitives.Root
11 |     className={cn(
12 |       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-primary-300",
13 |       className
14 |     )}
15 |     {...props}
16 |     ref={ref}
17 |   >
18 |     <SwitchPrimitives.Thumb
19 |       className={cn(
20 |         "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
21 |       )}
22 |     />
23 |   </SwitchPrimitives.Root>
24 | ));
25 | Switch.displayName = SwitchPrimitives.Root.displayName;
26 | 
27 | export { Switch };
28 | 


--------------------------------------------------------------------------------
/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 3 | 
 4 | import { cn } from "../../utils/tailwind";
 5 | 
 6 | const TooltipProvider = TooltipPrimitive.Provider;
 7 | 
 8 | const Tooltip = TooltipPrimitive.Root;
 9 | 
10 | const TooltipTrigger = TooltipPrimitive.Trigger;
11 | 
12 | const TooltipContent = React.forwardRef<
13 |   React.ElementRef<typeof TooltipPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
15 | >(({ className, sideOffset = 4, ...props }, ref) => (
16 |   <TooltipPrimitive.Content
17 |     ref={ref}
18 |     sideOffset={sideOffset}
19 |     className={cn(
20 |       "z-50 overflow-hidden rounded-md text-white bg-primary-700 px-3 py-1.5 text-sm shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
21 |       className
22 |     )}
23 |     {...props}
24 |   />
25 | ));
26 | TooltipContent.displayName = TooltipPrimitive.Content.displayName;
27 | 
28 | export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rtvi-client-demo-nextjs",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@pipecat-ai/client-js": "^0.3.2",
13 |     "@radix-ui/react-switch": "^1.0.3",
14 |     "@radix-ui/react-tooltip": "^1.0.7",
15 |     "class-variance-authority": "^0.7.0",
16 |     "clsx": "^2.1.1",
17 |     "deepmerge-ts": "^7.1.0",
18 |     "lucide-react": "^0.378.0",
19 |     "next": "14.2.5",
20 |     "react": "^18",
21 |     "react-dom": "^18",
22 |     "react-sparklines": "^1.7.0",
23 |     "realtime-ai": "0.1.6",
24 |     "realtime-ai-daily": "0.1.6",
25 |     "realtime-ai-react": "0.1.6",
26 |     "tailwind-merge": "^2.3.0",
27 |     "zustand": "^5.0.2"
28 |   },
29 |   "devDependencies": {
30 |     "@types/node": "^20",
31 |     "@types/react": "^18",
32 |     "@types/react-dom": "^18",
33 |     "@types/react-sparklines": "^1.7.5",
34 |     "eslint": "^8",
35 |     "eslint-config-next": "14.2.5",
36 |     "eslint-plugin-simple-import-sort": "^12.1.1",
37 |     "postcss": "^8",
38 |     "postcss-nesting": "^13.0.0",
39 |     "tailwindcss": "^3.4.1",
40 |     "typescript": "^5"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { cva, VariantProps } from "class-variance-authority";
 3 | 
 4 | import { cn } from "@/utils/tailwind";
 5 | 
 6 | const inputVariants = cva(
 7 |   "flex h-12 px-3 w-full rounded-xl border border-primary-200 bg-background text-sm ring-ring file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "",
12 |         danger:
13 |           "border-red-500 text-red-500 focus-visible:ring-red-500 placeholder:text-red-300",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   }
20 | );
21 | 
22 | export interface InputProps
23 |   extends React.InputHTMLAttributes<HTMLInputElement>,
24 |     VariantProps<typeof inputVariants> {}
25 | 
26 | export const Input: React.FC<InputProps> = ({
27 |   variant,
28 |   className,
29 |   type,
30 |   ...props
31 | }) => {
32 |   return (
33 |     <input
34 |       type={type}
35 |       className={cn(inputVariants({ variant }), className)}
36 |       {...props}
37 |     />
38 |   );
39 | };
40 | Input.displayName = "Input";
41 | 


--------------------------------------------------------------------------------
/components/Session/TranscriptOverlay/styles.module.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   position: absolute;
 3 |   left: 1rem;
 4 |   right: 1rem;
 5 |   bottom: 1.5rem;
 6 |   top: 1.5rem;
 7 |   color: white;
 8 |   z-index: 50;
 9 |   margin: 0 auto;
10 |   display: flex;
11 |   flex-direction: column;
12 |   gap: 8px;
13 |   align-items: center;
14 |   justify-content: end;
15 |   text-align: center;
16 | }
17 | 
18 | .transcript {
19 |   font-weight: 600;
20 |   font-size: theme(fontSize.sm);
21 |   max-width: 320px;
22 | }
23 | 
24 | .transcript span {
25 |   box-decoration-break: clone;
26 |   -webkit-box-decoration-break: clone;
27 |   -moz-box-decoration-break: clone;
28 |   background-color: color-mix(
29 |     in srgb,
30 |     theme(colors.primary.800),
31 |     transparent 30%
32 |   );
33 |   border-radius: theme(borderRadius.md);
34 |   padding: 4px 8px;
35 |   line-height: 1;
36 | }
37 | 
38 | .sentence {
39 |   opacity: 1;
40 |   margin: 0px;
41 |   animation: fadeOut 2.5s linear forwards;
42 |   animation-delay: 1s;
43 |   line-height: 2;
44 | }
45 | 
46 | @keyframes fadeOut {
47 |   0% {
48 |     opacity: 1;
49 |     transform: scale(1);
50 |   }
51 |   20% {
52 |     transform: scale(1);
53 |     filter: blur(0);
54 |   }
55 |   100% {
56 |     transform: scale(0.8) translateY(-50%);
57 |     filter: blur(25px);
58 |     opacity: 0;
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/utils/stats_aggregator.ts:
--------------------------------------------------------------------------------
 1 | class StatsAggregator implements IStatsAggregator {
 2 |   statsMap: StatsMap = {};
 3 |   hasNewStats = false;
 4 |   turns = 0;
 5 | 
 6 |   constructor() {}
 7 | 
 8 |   addStat(stat: Stat) {
 9 |     const [service, metric, value] = stat;
10 |     if (!service || !metric || value <= 0) {
11 |       return;
12 |     }
13 | 
14 |     // Ensure the service exists in statsMap
15 |     if (!this.statsMap[service]) {
16 |       this.statsMap[service] = {};
17 |     }
18 | 
19 |     const timeseries = [
20 |       ...(this.statsMap[service][metric]?.timeseries || []),
21 |       value,
22 |     ];
23 | 
24 |     const median =
25 |       timeseries.reduce((acc, curr) => acc + curr, 0) / timeseries.length;
26 |     const high = timeseries.reduce((acc, curr) => Math.max(acc, curr), 0);
27 |     const low = timeseries.reduce((acc, curr) => Math.min(acc, curr), Infinity);
28 | 
29 |     this.statsMap[service][metric] = {
30 |       latest: value,
31 |       timeseries,
32 |       median,
33 |       high,
34 |       low,
35 |     };
36 | 
37 |     this.hasNewStats = true;
38 |   }
39 | 
40 |   getStats(): StatsMap | null {
41 |     if (this.hasNewStats) {
42 |       this.hasNewStats = false;
43 |       return this.statsMap;
44 |     } else {
45 |       return null;
46 |     }
47 |   }
48 | }
49 | 
50 | export default StatsAggregator;
51 | 


--------------------------------------------------------------------------------
/lib/stores/languageStore.ts:
--------------------------------------------------------------------------------
 1 | import { create } from 'zustand';
 2 | import { LANGUAGES } from '@/rtvi.config';
 3 | import { VoiceClient } from 'realtime-ai';
 4 | 
 5 | interface LanguageState {
 6 |   selectedLanguage: string;
 7 |   ttsVoice: string;
 8 |   setLanguage: (language: string, voiceClient: VoiceClient) => Promise<void>;
 9 | }
10 | 
11 | export const useLanguageStore = create<LanguageState>((set) => ({
12 |   selectedLanguage: LANGUAGES[0].value,
13 |   ttsVoice: LANGUAGES[0].ttsVoice,
14 |   setLanguage: async (language: string, voiceClient: VoiceClient) => {
15 |     const selectedLang = LANGUAGES.find(lang => lang.value === language);
16 |     if (selectedLang) {
17 |       // Update store state
18 |       set({
19 |         selectedLanguage: selectedLang.value,
20 |         ttsVoice: selectedLang.ttsVoice,
21 |       });
22 | 
23 |       // Update voice client config
24 |       await voiceClient.updateConfig([
25 |         {
26 |           service: "stt",
27 |           options: [
28 |             { name: "model", value: "nova-2-general" },
29 |             { name: "language", value: selectedLang.value },
30 |           ],
31 |         },
32 |         {
33 |           service: "tts",
34 |           options: [
35 |             { name: "voice", value: selectedLang.ttsVoice }
36 |           ],
37 |         }
38 |       ]);
39 |     }
40 |   },
41 | }));


--------------------------------------------------------------------------------
/components/ui/alert.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { cva, VariantProps } from "class-variance-authority";
 3 | import { CircleAlert } from "lucide-react";
 4 | 
 5 | import { cn } from "@/utils/tailwind";
 6 | 
 7 | const alertVariants = cva("text-left border border-black rounded-lg p-4", {
 8 |   variants: {
 9 |     intent: {
10 |       info: "alert-info",
11 |       danger: "border-red-200 text-red-600 bg-red-50",
12 |     },
13 |   },
14 |   defaultVariants: {
15 |     intent: "info",
16 |   },
17 | });
18 | 
19 | export interface AlertProps
20 |   extends React.HTMLAttributes<HTMLElement>,
21 |     VariantProps<typeof alertVariants> {}
22 | 
23 | export const Alert: React.FC<AlertProps> = ({ children, intent, title }) => {
24 |   return (
25 |     <div className={alertVariants({ intent })}>
26 |       <AlertTitle>
27 |         {intent === "danger" && <CircleAlert size={18} />}
28 |         {title}
29 |       </AlertTitle>
30 |       {children}
31 |     </div>
32 |   );
33 | };
34 | 
35 | export const AlertTitle = React.forwardRef<
36 |   HTMLParagraphElement,
37 |   React.HTMLAttributes<HTMLHeadingElement>
38 | >(({ className, ...props }, ref) => (
39 |   <p
40 |     ref={ref}
41 |     className={cn(
42 |       "text-base font-bold flex items-center gap-2 mb-2",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ));
48 | AlertTitle.displayName = "AlertTitle";
49 | 


--------------------------------------------------------------------------------
/components/Session/TranscriptOverlay/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useEffect, useRef, useState } from "react";
 2 | import { VoiceEvent } from "realtime-ai";
 3 | import { useVoiceClientEvent } from "realtime-ai-react";
 4 | 
 5 | import styles from "./styles.module.css";
 6 | 
 7 | const TranscriptOverlay: React.FC = () => {
 8 |   const [sentences, setSentences] = useState<string[]>([]);
 9 |   const [sentencesBuffer, setSentencesBuffer] = useState<string[]>([]);
10 |   const displayIntervalRef = useRef<NodeJS.Timeout | null>(null);
11 | 
12 |   useVoiceClientEvent(
13 |     VoiceEvent.BotTranscript,
14 |     useCallback((text: string) => {
15 |       setSentencesBuffer((s) => [...s, text.trim()]);
16 |     }, [])
17 |   );
18 | 
19 |   useEffect(() => {
20 |     if (sentencesBuffer.length > 0) {
21 |       const interval = 1000 * sentences.length;
22 |       displayIntervalRef.current = setTimeout(() => {
23 |         setSentences((s) => [...s, sentencesBuffer[0]]);
24 |         setSentencesBuffer((s) => s.slice(1));
25 |       }, interval);
26 |     }
27 |     return () => {
28 |       if (displayIntervalRef.current) {
29 |         clearInterval(displayIntervalRef.current);
30 |       }
31 |     };
32 |   }, [sentencesBuffer, sentences]);
33 | 
34 |   return (
35 |     <div className={styles.container}>
36 |       {sentences.map((sentence, index) => (
37 |         <abbr
38 |           key={index}
39 |           className={`${styles.transcript} ${styles.sentence}`}
40 |           onAnimationEnd={() => setSentences((s) => s.slice(1))}
41 |         >
42 |           <span>{sentence}</span>
43 |         </abbr>
44 |       ))}
45 |     </div>
46 |   );
47 | };
48 | 
49 | export default TranscriptOverlay;
50 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { cva, VariantProps } from "class-variance-authority";
 3 | 
 4 | import { cn } from "@/utils/tailwind";
 5 | 
 6 | const selectVariants = cva(
 7 |   "appearance-none bg-none bg-white bg-selectArrow bg-no-repeat bg-selectArrow flex h-12 px-3 pr-10 w-full rounded-xl border border-primary-200 text-sm ring-ring file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "",
12 |         danger:
13 |           "border-red-500 text-red-500 focus-visible:ring-red-500 placeholder:text-red-300",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   }
20 | );
21 | 
22 | export interface SelectProps
23 |   extends React.SelectHTMLAttributes<HTMLSelectElement>,
24 |     VariantProps<typeof selectVariants> {
25 |   icon?: React.ReactNode;
26 | }
27 | 
28 | export const Select: React.FC<SelectProps> = ({
29 |   variant,
30 |   className,
31 |   children,
32 |   icon,
33 |   ...props
34 | }) => {
35 |   return (
36 |     <div className="relative w-full">
37 |       {icon && (
38 |         <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-primary-500">
39 |           {icon}
40 |         </div>
41 |       )}
42 |       <select
43 |         className={cn(
44 |           selectVariants({ variant }),
45 |           icon ? "pl-11" : "",
46 |           className
47 |         )}
48 |         {...props}
49 |       >
50 |         {children}
51 |       </select>
52 |     </div>
53 |   );
54 | };
55 | Select.displayName = "Input";
56 | 


--------------------------------------------------------------------------------
/components/Splash.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button } from "./ui/button";
 3 | import { ArrowRight } from "lucide-react";
 4 | 
 5 | type SplashProps = {
 6 |   handleReady: () => void;
 7 | };
 8 | 
 9 | export const Splash: React.FC<SplashProps> = ({ handleReady }) => {
10 |   return (
11 |     <main className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-blue-50 to-purple-50">
12 |       <div className="max-w-2xl mx-auto p-8 text-center space-y-6">
13 |         <div className="space-y-4 mb-8">
14 |           <h1 className="text-4xl font-bold text-gray-900">
15 |             AI Teaching Assistant Demo
16 |           </h1>
17 | 
18 |           <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-lg space-y-4">
19 |             <p className="text-lg text-gray-700">
20 |               Experience an interactive AI Teacher that can see and respond to you in real-time.
21 |             </p>
22 | 
23 |             <div className="flex flex-col gap-2 text-gray-600">
24 |               <p className="text-sm">
25 |                 Powered by:
26 |               </p>
27 |               <ul className="text-sm font-medium">
28 |                 <li>🤖 Anthropic's Claude</li>
29 |                 <li>⚡ OpenAI's Real-time AI</li>
30 |               </ul>
31 |             </div>
32 |           </div>
33 |         </div>
34 | 
35 |         <Button
36 |           onClick={handleReady}
37 |           className="text-lg px-8 py-6 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl"
38 |         >
39 |           <span>Start Demo</span>
40 |           <ArrowRight className="ml-2 h-5 w-5" />
41 |         </Button>
42 |       </div>
43 |     </main>
44 |   );
45 | };
46 | 
47 | export default Splash;
48 | 


--------------------------------------------------------------------------------
/app/config.ts:
--------------------------------------------------------------------------------
 1 | export const BOT_READY_TIMEOUT = 30 * 1000;
 2 | export const LATENCY_MIN = 300;
 3 | export const LATENCY_MAX = 3000;
 4 | export const VAD_POSITIVE_SPEECH_THRESHOLD = 0.8;
 5 | export const VAD_NEGATIVE_SPEECH_THRESHOLD = 0.8 - 0.15;
 6 | export const VAD_MIN_SPEECH_FRAMES = 5;
 7 | export const VAD_REDEMPTION_FRAMES = 3;
 8 | export const VAD_PRESPEECH_PAD_FRAMES = 1;
 9 | 
10 | export type Language = {
11 |   language: string;
12 |   model_id: string;
13 |   code: string;
14 |   voice: string;
15 | };
16 | 
17 | export type Voice = {
18 |   label: string;
19 |   id: string;
20 | };
21 | 
22 | export type LLMModel = {
23 |   label: string;
24 |   id: string;
25 | };
26 | 
27 | export const ttsVoices: Voice[] = [
28 |   { label: "Default", id: "79a125e8-cd45-4c13-8a67-188112f4dd22" },
29 | ];
30 | 
31 | export const languages: Language[] = [
32 |   {
33 |     language: "English",
34 |     model_id: "sonic-english",
35 |     code: "en",
36 |     voice: "79a125e8-cd45-4c13-8a67-188112f4dd22",
37 |   },
38 |   {
39 |     language: "Hindi",
40 |     model_id: "sonic-multilingual",
41 |     code: "hi",
42 |     voice: "a8a1eb38-5f15-4c1d-8722-7ac0f329727d",
43 |   },
44 | ];
45 | 
46 | export const llmModels: LLMModel[] = [
47 |   { label: "LLama3 70b", id: "llama-3.1-70b-versatile" },
48 |   { label: "Llama3 8b", id: "llama-3.1-8b-instant" },
49 | ];
50 | 
51 | // ... other exports ...
52 | 
53 | export const defaultConfig = {
54 |   llm: {
55 |     model: llmModels[0].id,
56 |     "messages": [
57 |       {
58 |         "role": "system",
59 |         "content": `You are a focused educational AI assistant. Follow these rules strictly:
60 | 
61 | 1. Be direct and concise - use 1-2 sentences when possible
62 | 2. No unnecessary greetings or small talk
63 | 3. For math/science problems:
64 |    - State your understanding in one line
65 |    - Give hints, not answers
66 |    - Guide through solution steps briefly
67 | 
68 | 4. For visual analysis:
69 |    - Describe what you see in one sentence
70 |    - Give feedback in 1-2 sentences
71 | 
72 | 5. Only elaborate if explicitly asked
73 | 
74 | Remember: Your goal is efficient, clear teaching with minimal verbosity.`
75 |       }
76 |     ]
77 |   },
78 |   tts: {
79 |     voice: ttsVoices[0].id,
80 |   },
81 | };
82 | 


--------------------------------------------------------------------------------
/components/Setup/DeviceSelect.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import { Mic, Webcam } from "lucide-react";
 3 | import { useVoiceClientMediaDevices } from "realtime-ai-react";
 4 | 
 5 | import { Field } from "../ui/field";
 6 | import { Select } from "../ui/select";
 7 | 
 8 | import { AudioIndicatorBar } from "./AudioIndicator";
 9 | 
10 | interface DeviceSelectProps {
11 |   hideMeter: boolean;
12 | }
13 | 
14 | export const DeviceSelect: React.FC<DeviceSelectProps> = ({
15 |   hideMeter = false,
16 | }) => {
17 |   const {
18 |     availableMics,
19 |     selectedMic,
20 |     updateMic,
21 |     availableCams,
22 |     selectedCam,
23 |     updateCam,
24 |   } = useVoiceClientMediaDevices();
25 | 
26 |   useEffect(() => {
27 |     updateMic(selectedMic?.deviceId);
28 |     updateCam(selectedCam?.deviceId);
29 |   }, [updateMic, selectedMic, updateCam, selectedCam]);
30 | 
31 |   return (
32 |     <div className="flex flex-col flex-wrap gap-4">
33 |       <Field label="Microphone" error={false}>
34 |         <Select
35 |           onChange={(e) => updateMic(e.currentTarget.value)}
36 |           value={selectedMic?.deviceId}
37 |           icon={<Mic size={24} />}
38 |         >
39 |           {availableMics.length === 0 ? (
40 |             <option value="">Loading devices...</option>
41 |           ) : (
42 |             availableMics.map((mic) => (
43 |               <option key={mic.deviceId} value={mic.deviceId}>
44 |                 {mic.label}
45 |               </option>
46 |             ))
47 |           )}
48 |         </Select>
49 |         {!hideMeter && <AudioIndicatorBar />}
50 |       </Field>
51 | 
52 |       <Field label="Camera" error={false}>
53 |         <Select
54 |           onChange={(e) => updateCam(e.currentTarget.value)}
55 |           value={selectedCam?.deviceId}
56 |           icon={<Webcam size={24} />}
57 |         >
58 |           {availableCams.length === 0 ? (
59 |             <option value="">Loading devices...</option>
60 |           ) : (
61 |             availableCams.map((cam) => (
62 |               <option key={cam.deviceId} value={cam.deviceId}>
63 |                 {cam.label}
64 |               </option>
65 |             ))
66 |           )}
67 |         </Select>
68 |       </Field>
69 |     </div>
70 |   );
71 | };
72 | 
73 | export default DeviceSelect;
74 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/utils/tailwind";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex gap-2 items-center justify-center whitespace-nowrap rounded-xl border text-base font-semibold ring-ring transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-5",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         primary:
13 |           "border-primary bg-primary text-primary-foreground hover:bg-primary/90 disabled:text-primary-foreground/50",
14 |         success:
15 |           "border-emerald-200 bg-emerald-200 text-emerald-800 hover:bg-teal/90 disabled:text-teal-800/50",
16 |         ghost:
17 |           "border-primary-200 bg-white text-primary hover:border-primary-300 hover:bg-white/0 disabled:text-primary-foreground/50",
18 |         outline: "button-outline",
19 |         light: "border-transparent bg-transparent hover:bg-primary/[.07]",
20 |         icon: "bg-transparent border-0 hover:bg-primary-200",
21 |       },
22 |       size: {
23 |         default: "h-12 px-6 py-2",
24 |         sm: "h-9 px-3 text-sm",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-12 w-12",
27 |         iconSm: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "primary",
32 |       size: "default",
33 |     },
34 |   }
35 | );
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   fullWidthMobile?: boolean;
41 |   asChild?: boolean;
42 | }
43 | 
44 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
45 |   (
46 |     { variant, size, fullWidthMobile, className, asChild = false, ...props },
47 |     ref
48 |   ) => {
49 |     const Comp = asChild ? Slot : "button";
50 |     return (
51 |       <Comp
52 |         ref={ref}
53 |         className={cn(
54 |           buttonVariants({ variant, size }),
55 |           fullWidthMobile ? "w-full md:w-auto" : "",
56 |           className
57 |         )}
58 |         {...props}
59 |       />
60 |     );
61 |   }
62 | );
63 | Button.displayName = "Button";
64 | 
65 | export { Button };
66 | 


--------------------------------------------------------------------------------
/rtvi.config.ts:
--------------------------------------------------------------------------------
 1 | export const BOT_READY_TIMEOUT = 30 * 1000; // 30 seconds
 2 | 
 3 | export const defaultBotProfile = "vision_2024_08";
 4 | export const defaultMaxDuration = 60 * 6;
 5 | 
 6 | export const defaultServices = {
 7 |   llm: "anthropic",
 8 |   tts: "cartesia",
 9 | };
10 | 
11 | export interface Language {
12 |   name: string;
13 |   value: string;
14 |   ttsVoice: string;
15 | }
16 | 
17 | export const LANGUAGES: Language[] = [
18 |   {
19 |     name: "English",
20 |     value: "en",
21 |     ttsVoice: "79a125e8-cd45-4c13-8a67-188112f4dd22" // British voice
22 |   },
23 |   {
24 |     name: "Hindi",
25 |     value: "hi",
26 |     ttsVoice: "79a125e8-cd45-4c13-8a67-188112f4dd22" // Hindi voice
27 |   },
28 |   {
29 |     name: "Tamil",
30 |     value: "ta",
31 |     ttsVoice: "79a125e8-cd45-4c13-8a67-188112f4dd22" // Tamil voice
32 |   },
33 |   {
34 |     name: "Telugu",
35 |     value: "te",
36 |     ttsVoice: "79a125e8-cd45-4c13-8a67-188112f4dd22" // Telugu voice
37 |   }
38 | ];
39 | 
40 | export const defaultConfig = [
41 |   {
42 |     service: "tts",
43 |     options: [
44 |       {
45 |         "name": "model",
46 |         "value": "sonic"
47 |       },
48 |       {
49 |         "name": "voice",
50 |         "value": "bdab08ad-4137-4548-b9db-6142854c7525"
51 |       }
52 |     ],
53 |   },
54 |   {
55 |     service: "llm",
56 |     options: [
57 |       { name: "model", value: "claude-3-5-sonnet-20240620" },
58 |       {
59 |         name: "initial_messages",
60 |         value: [
61 |           {
62 |             role: "system",
63 |             content: `You are a focused and efficient AI teaching assistant. Follow these guidelines strictly:
64 | 
65 | 1. Keep responses brief and direct - aim for 1-2 sentences when possible
66 | 2. Skip pleasantries and get straight to the point
67 | 3. Only elaborate if specifically asked
68 | 4. Use simple, clear language
69 | 5. When analyzing visual content through the camera:
70 |    - State what you see in 1 sentence
71 |    - Provide feedback in 1-2 sentences
72 |    
73 | Remember: Brevity and clarity are your primary goals.`,
74 |           },
75 |           {
76 |             role: "user",
77 |             content: "Introduce yourself briefly.",
78 |           },
79 |         ],
80 |       },
81 |       { name: "run_on_config", value: true },
82 |     ],
83 |   },
84 | ];
85 | 
86 | export const TTS_VOICES = [
87 |   { name: "Britsh Lady", value: "bdab08ad-4137-4548-b9db-6142854c7525" },
88 | ];
89 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | import colors from "tailwindcss/colors";
 3 | import defaultTheme from "tailwindcss/defaultTheme";
 4 | 
 5 | const config: Config = {
 6 |   content: [
 7 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 9 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
10 |   ],
11 |   theme: {
12 |     extend: {
13 |       colors: {
14 |         primary: {
15 |           ...colors.gray,
16 |           DEFAULT: colors.gray[900],
17 |           foreground: colors.white,
18 |           hairline: colors.gray[100],
19 |         },
20 |         ring: colors.gray[500],
21 |       },
22 |       fontFamily: {
23 |         sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
24 |         mono: ["var(--font-mono)"],
25 |       },
26 |       container: {
27 |         center: true,
28 |         padding: {
29 |           DEFAULT: "12px",
30 |           md: "1rem",
31 |         },
32 |       },
33 |       backgroundImage: {
34 |         colorWash: "url('/color-wash-bg.png')",
35 |         cardBorder: `linear-gradient(90deg, white, white), linear-gradient(0deg, ${colors.gray[300]}, ${colors.gray[200]})`,
36 |         selectArrow:
37 |           "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgNkw4IDEwTDEyIDYiIHN0cm9rZT0iIzY0NzQ4QiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=')",
38 |       },
39 |       backgroundPosition: {
40 |         selectArrow: "right 1rem center",
41 |       },
42 |       boxShadow: {
43 |         short:
44 |           "0px 7px 2px 0px rgba(0, 0, 0, 0), 0px 5px 2px 0px rgba(0, 0, 0, 0.01), 0px 3px 2px 0px rgba(0, 0, 0, 0.03), 0px 1px 1px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.05)",
45 |         mid: "0px 100px 28px 0px rgba(0, 0, 0, 0), 0px 64px 26px 0px rgba(0, 0, 0, 0.01), 0px 36px 22px 0px rgba(0, 0, 0, 0.03), 0px 16px 16px 0px rgba(0, 0, 0, 0.04), 0px 4px 9px 0px rgba(0, 0, 0, 0.05)",
46 |         long: "0px 360px 101px 0px rgba(0, 0, 0, 0), 0px 231px 92px 0px rgba(0, 0, 0, 0), 0px 130px 78px 0px rgba(0, 0, 0, 0.02),0px 58px 58px 0px rgba(0, 0, 0, 0.03), 0px 14px 32px 0px rgba(0, 0, 0, 0.03)",
47 |         stats: "0px -2px 15px 0px rgba(0, 0, 0, 0.07)",
48 |       },
49 |       animation: {
50 |         wiggle: "wiggle 0.2s 1",
51 |         appear: "appear 0.5s ease-out forwards",
52 |       },
53 |     },
54 |   },
55 |   plugins: [],
56 | };
57 | export default config;
58 | 


--------------------------------------------------------------------------------
/components/Session/Agent/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { memo, useCallback, useEffect, useState } from "react";
 2 | import clsx from "clsx";
 3 | import { Loader2 } from "lucide-react";
 4 | import { VoiceEvent } from "realtime-ai";
 5 | import { useVoiceClientEvent, VoiceClientVideo } from "realtime-ai-react";
 6 | 
 7 | import ModelBadge from "./model";
 8 | import WaveForm from "./waveform";
 9 | 
10 | import styles from "./styles.module.css";
11 | 
12 | export const Agent: React.FC<{
13 |   isReady: boolean;
14 |   statsAggregator: StatsAggregator;
15 | }> = memo(
16 |   ({ isReady, statsAggregator }) => {
17 |     const [hasStarted, setHasStarted] = useState<boolean>(false);
18 |     const [botStatus, setBotStatus] = useState<
19 |       "initializing" | "connected" | "disconnected"
20 |     >("initializing");
21 |     const [botIsTalking, setBotIsTalking] = useState<boolean>(false);
22 | 
23 |     useEffect(() => {
24 |       // Update the started state when the transport enters the ready state
25 |       if (!isReady) return;
26 |       setHasStarted(true);
27 |       setBotStatus("connected");
28 |     }, [isReady]);
29 | 
30 |     useVoiceClientEvent(
31 |       VoiceEvent.BotDisconnected,
32 |       useCallback(() => {
33 |         setHasStarted(false);
34 |         setBotStatus("disconnected");
35 |       }, [])
36 |     );
37 | 
38 |     useVoiceClientEvent(
39 |       VoiceEvent.BotStartedSpeaking,
40 |       useCallback(() => {
41 |         setBotIsTalking(true);
42 |       }, [])
43 |     );
44 | 
45 |     useVoiceClientEvent(
46 |       VoiceEvent.BotStoppedSpeaking,
47 |       useCallback(() => {
48 |         setBotIsTalking(false);
49 |       }, [])
50 |     );
51 | 
52 |     // Cleanup
53 |     useEffect(() => () => setHasStarted(false), []);
54 | 
55 |     const cx = clsx(
56 |       styles.agentWindow,
57 |       hasStarted && styles.ready,
58 |       botIsTalking && styles.talking
59 |     );
60 | 
61 |     return (
62 |       <div className={styles.agent}>
63 |         <div className={cx}>
64 |           <ModelBadge />
65 |           {!hasStarted ? (
66 |             <span className={styles.loader}>
67 |               <Loader2 size={32} className="animate-spin" />
68 |             </span>
69 |           ) : (
70 |             <WaveForm />
71 |           )}
72 |         </div>
73 |         <VoiceClientVideo
74 |           participant="local"
75 |           className={styles.video}
76 |         />
77 |       </div>
78 |     );
79 |   },
80 |   (p, n) => p.isReady === n.isReady
81 | );
82 | Agent.displayName = "Agent";
83 | 
84 | export default Agent;
85 | 


--------------------------------------------------------------------------------
/public/logo-anthropic.svg:
--------------------------------------------------------------------------------
 1 | <svg width="200" height="60" viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect width="200" height="60" fill="transparent"/>
 3 | <g clip-path="url(#clip0_65_209)">
 4 | <path d="M48.9453 23.5595H56.2345V41.0843H60.8869V23.5595H68.1761V19.3722H48.9453V23.5595Z" fill="#1F1F1E"/>
 5 | <path d="M40.7258 34.5707L30.9552 19.3722H25.6823V41.0843H30.1798V25.8858L39.9504 41.0843H45.2232V19.3722H40.7258V34.5707Z" fill="#1F1F1E"/>
 6 | <path d="M86.7866 28.026H76.5509V19.3722H71.8983V41.0843H76.5509V32.2134H86.7866V41.0843H91.4392V19.3722H86.7866V28.026Z" fill="#1F1F1E"/>
 7 | <path d="M8.65384 19.3722L0 41.0843H4.8387L6.60855 36.5248H15.6622L17.4318 41.0843H22.2705L13.6166 19.3722H8.65384ZM8.1737 32.4925L11.1352 24.8623L14.0969 32.4925H8.1737Z" fill="#1F1F1E"/>
 8 | <path d="M129.994 19C123.728 19 119.293 23.6526 119.293 30.2593C119.293 36.8039 123.728 41.4566 129.994 41.4566C136.228 41.4566 140.633 36.8039 140.633 30.2593C140.633 23.6526 136.228 19 129.994 19ZM129.994 37.1141C126.334 37.1141 124.1 34.5087 124.1 30.2593C124.1 25.9479 126.334 23.3424 129.994 23.3424C133.623 23.3424 135.825 25.9479 135.825 30.2593C135.825 34.5087 133.623 37.1141 129.994 37.1141Z" fill="#1F1F1E"/>
 9 | <path d="M195.037 33.7953C194.231 35.9045 192.618 37.1141 190.415 37.1141C186.755 37.1141 184.522 34.5087 184.522 30.2593C184.522 25.9479 186.755 23.3424 190.415 23.3424C192.618 23.3424 194.231 24.5521 195.037 26.6613H199.969C198.76 22.0087 195.13 19 190.415 19C184.15 19 179.714 23.6526 179.714 30.2593C179.714 36.8039 184.15 41.4566 190.415 41.4566C195.161 41.4566 198.789 38.4169 200 33.7953H195.037Z" fill="#1F1F1E"/>
10 | <path d="M165.385 19.3722L174.038 41.0843H178.784L170.13 19.3722H165.385Z" fill="#1F1F1E"/>
11 | <path d="M155.583 19.3722H144.975V41.0843H149.628V33.2059H155.583C160.515 33.2059 163.523 30.6005 163.523 26.289C163.523 21.9776 160.515 19.3722 155.583 19.3722ZM155.366 29.0186H149.628V23.5595H155.366C157.661 23.5595 158.871 24.49 158.871 26.289C158.871 28.088 157.661 29.0186 155.366 29.0186Z" fill="#1F1F1E"/>
12 | <path d="M115.726 25.9789C115.726 21.8846 112.717 19.3722 107.785 19.3722H97.1774V41.0843H101.83V32.5856H107.01L111.662 41.0843H116.811L111.659 31.9382C114.245 30.9441 115.726 28.8508 115.726 25.9789ZM101.83 23.5594H107.568C109.863 23.5594 111.073 24.3969 111.073 25.9789C111.073 27.5608 109.863 28.3983 107.568 28.3983H101.83V23.5594Z" fill="#1F1F1E"/>
13 | </g>
14 | <defs>
15 | <clipPath id="clip0_65_209">
16 | <rect width="200" height="22.4566" fill="white" transform="translate(0 19)"/>
17 | </clipPath>
18 | </defs>
19 | </svg>
20 | 


--------------------------------------------------------------------------------
/components/Setup/Configure.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from "react";
 2 | import { useVoiceClient } from "realtime-ai-react";
 3 | import { LANGUAGES } from "@/rtvi.config";
 4 | import { useLanguageStore } from "@/lib/stores/languageStore";
 5 | import HelpTip from "../ui/helptip";
 6 | import { Label } from "../ui/label";
 7 | import { Switch } from "../ui/switch";
 8 | import { Select } from "../ui/select";
 9 | import DeviceSelect from "./DeviceSelect";
10 | 
11 | interface ConfigureProps {
12 |   state: string;
13 |   startAudioOff?: boolean;
14 |   handleStartAudioOff?: () => void;
15 |   inSession?: boolean;
16 | }
17 | 
18 | export const Configure: React.FC<ConfigureProps> = React.memo(
19 |   ({ startAudioOff, handleStartAudioOff, inSession = false }) => {
20 |     const [showPrompt, setshowPrompt] = useState<boolean>(false);
21 |     const modalRef = useRef<HTMLDialogElement>(null);
22 |     const voiceClient = useVoiceClient();
23 |     const { selectedLanguage, setLanguage } = useLanguageStore();
24 | 
25 |     useEffect(() => {
26 |       const current = modalRef.current;
27 | 
28 |       if (current && showPrompt) {
29 |         current.inert = true;
30 |         current.showModal();
31 |         current.inert = false;
32 |       }
33 |       return () => current?.close();
34 |     }, [showPrompt]);
35 | 
36 |     const handleLanguageChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
37 |       if (voiceClient) {
38 |         await setLanguage(e.target.value, voiceClient);
39 |       }
40 |     };
41 | 
42 |     return (
43 |       <>
44 |         <section className="flex flex-col flex-wrap gap-3 lg:gap-4">
45 |           <DeviceSelect hideMeter={false} />
46 |         </section>
47 | 
48 |         {!inSession && (
49 |           <section className="flex flex-col gap-4 border-y border-primary-hairline py-4 mt-4">
50 |             <div className="flex flex-row justify-between items-center">
51 |               <Label className="flex flex-row gap-1 items-center">
52 |                 Join with mic muted{" "}
53 |                 <HelpTip text="Start with microphone muted (click to unmute)" />
54 |               </Label>
55 |               <Switch
56 |                 checked={startAudioOff}
57 |                 onCheckedChange={handleStartAudioOff}
58 |               />
59 |             </div>
60 |           </section>
61 |         )}
62 |       </>
63 |     );
64 |   },
65 |   (prevProps, nextProps) =>
66 |     prevProps.startAudioOff === nextProps.startAudioOff &&
67 |     prevProps.state === nextProps.state
68 | );
69 | 
70 | Configure.displayName = "Configure";
71 | 


--------------------------------------------------------------------------------
/components/Header/ExpiryTimer/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useEffect, useState } from "react";
 2 | import { Timer } from "lucide-react";
 3 | import { VoiceEvent } from "realtime-ai";
 4 | import { useVoiceClient, useVoiceClientEvent } from "realtime-ai-react";
 5 | 
 6 | import {
 7 |   Tooltip,
 8 |   TooltipContent,
 9 |   TooltipTrigger,
10 | } from "@/components/ui/tooltip";
11 | import { cn } from "@/utils/tailwind";
12 | 
13 | import styles from "./styles.module.css";
14 | 
15 | const ExpiryTimer: React.FC = () => {
16 |   const voiceClient = useVoiceClient();
17 |   const [exp, setExp] = useState<number | undefined>(undefined);
18 |   const [time, setTime] = useState({ minutes: 0, seconds: 0 });
19 | 
20 |   useVoiceClientEvent(
21 |     VoiceEvent.Connected,
22 |     useCallback(() => setExp(voiceClient?.transportExpiry), [voiceClient])
23 |   );
24 | 
25 |   useVoiceClientEvent(
26 |     VoiceEvent.Disconnected,
27 |     useCallback(() => {
28 |       setExp(undefined);
29 |       setTime({ minutes: 0, seconds: 0 });
30 |     }, [])
31 |   );
32 | 
33 |   const noExpiry = !exp || exp === 0;
34 | 
35 |   useEffect(() => {
36 |     if (noExpiry) return;
37 | 
38 |     const futureTimestamp = exp;
39 | 
40 |     // Function to update time
41 |     const updateTime = () => {
42 |       if (noExpiry) clearInterval(interval);
43 |       const currentTimestamp = Math.floor(Date.now() / 1000);
44 |       const differenceInSeconds = futureTimestamp! - currentTimestamp;
45 |       const minutes = Math.floor(differenceInSeconds / 60);
46 |       const seconds = differenceInSeconds % 60;
47 |       setTime({ minutes, seconds });
48 |     };
49 | 
50 |     // Update time every second
51 |     const interval = setInterval(updateTime, 1000);
52 | 
53 |     // Initial update
54 |     updateTime();
55 | 
56 |     // Clear interval on component unmount
57 |     return () => clearInterval(interval);
58 |   }, [noExpiry, exp]);
59 | 
60 |   if (noExpiry) return null;
61 | 
62 |   const isExpired = time.minutes <= 0 && time.seconds <= 0;
63 | 
64 |   return (
65 |     <Tooltip>
66 |       <TooltipTrigger>
67 |         <div className={styles.expiry}>
68 |           <Timer size={20} />
69 |           <span className={cn(styles.time, isExpired && styles.expired)}>
70 |             {isExpired
71 |               ? "--:--"
72 |               : `${time.minutes}m ${time.seconds.toString().padStart(2, "0")}s`}
73 |           </span>
74 |         </div>
75 |       </TooltipTrigger>
76 |       <TooltipContent>
77 |         <p>Remaining session time before expiry</p>
78 |       </TooltipContent>
79 |     </Tooltip>
80 |   );
81 | };
82 | 
83 | export default ExpiryTimer;
84 | 


--------------------------------------------------------------------------------
/components/Session/UserMicBubble/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useRef, useState } from "react";
 2 | import clsx from "clsx";
 3 | import { Loader2, Mic, MicOff, Pause } from "lucide-react";
 4 | import { VoiceEvent } from "realtime-ai";
 5 | import { useVoiceClient, useVoiceClientEvent } from "realtime-ai-react";
 6 | 
 7 | import styles from "./styles.module.css";
 8 | 
 9 | const AudioIndicatorBubble: React.FC = () => {
10 |   const volRef = useRef<HTMLDivElement>(null);
11 | 
12 |   useVoiceClientEvent(
13 |     VoiceEvent.LocalAudioLevel,
14 |     useCallback((volume: number) => {
15 |       if (volRef.current) {
16 |         const v = Number(volume) * 1.75;
17 |         volRef.current.style.transform = `scale(${Math.max(0.1, v)})`;
18 |       }
19 |     }, [])
20 |   );
21 | 
22 |   return <div ref={volRef} className={styles.volume} />;
23 | };
24 | 
25 | interface Props {
26 |   active: boolean;
27 |   muted: boolean;
28 |   handleMute: () => void;
29 | }
30 | 
31 | export default function UserMicBubble({
32 |   active,
33 |   muted = false,
34 |   handleMute,
35 | }: Props) {
36 | 
37 |   const canTalk = !muted && active;
38 |   const [botIsSpeaking, setBotIsSpeaking] = useState(false);
39 | 
40 |   // ---- Voice Client Events
41 |   useVoiceClientEvent(
42 |     VoiceEvent.BotStartedSpeaking,
43 |     useCallback(() => {
44 |       setBotIsSpeaking(true);
45 |     }, [])
46 |   );
47 | 
48 |   useVoiceClientEvent(
49 |     VoiceEvent.BotStoppedSpeaking,
50 |     useCallback(() => {
51 |       setBotIsSpeaking(false);
52 |     }, [])
53 |   );
54 | 
55 |   const voiceClient = useVoiceClient()!;
56 |   const handleInterrupt = () => {
57 |     voiceClient.action({
58 |       service: "tts",
59 |       action: "interrupt",
60 |       arguments: [],
61 |     });
62 |   };
63 | 
64 |   const cx = clsx(
65 |     muted && active && styles.muted,
66 |     !active && styles.blocked,
67 |     canTalk && styles.canTalk
68 |   );
69 | 
70 |   if (botIsSpeaking) {
71 |     return (
72 |       <div className={`${styles.bubbleContainer}`} onClick={handleInterrupt}>
73 |         <div className={`${styles.bubble} ${cx}`}>
74 |           <div className={styles.icon}>
75 |             <Pause size={42} className="size-8 md:size-10" />
76 |           </div>
77 |         </div>
78 |       </div>
79 |     )
80 |   }
81 | 
82 |   return (
83 |     <div className={`${styles.bubbleContainer}`}>
84 |       <div className={`${styles.bubble} ${cx}`} onClick={() => handleMute()}>
85 |         <div className={styles.icon}>
86 |           {!active ? (
87 |             <Loader2 size={42} className="size-8 md:size-10 animate-spin text-black" />
88 |           ) : canTalk ? (
89 |             <Mic size={42} className="size-8 md:size-10" />
90 |           ) : (
91 |             <MicOff size={42} className="size-8 md:size-10" />
92 |           )}
93 |         </div>
94 |         {canTalk && <AudioIndicatorBubble />}
95 |       </div>
96 |     </div>
97 |   );
98 | }
99 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | 
  3 | import { cn } from "@/utils/tailwind";
  4 | 
  5 | interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  6 |   shadow?: boolean;
  7 |   fullWidthMobile?: boolean;
  8 | }
  9 | 
 10 | const Card = React.forwardRef<HTMLDivElement, CardProps>(
 11 |   ({ className, shadow, fullWidthMobile = true, ...props }, ref) => (
 12 |     <div
 13 |       ref={ref}
 14 |       className={cn(
 15 |         "rounded-3xl border border-transparent bg-origin-border borderClip bg-cardBorder",
 16 |         shadow && "shadow-long",
 17 |         fullWidthMobile && "w-full max-w-full min-w-full md:min-w-0",
 18 |         className
 19 |       )}
 20 |       {...props}
 21 |     />
 22 |   )
 23 | );
 24 | 
 25 | Card.displayName = "Card";
 26 | 
 27 | const CardHeader = React.forwardRef<
 28 |   HTMLDivElement,
 29 |   React.HTMLAttributes<HTMLDivElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <div
 32 |     ref={ref}
 33 |     className={cn("flex flex-col space-y-3 p-6 lg:p-9", className)}
 34 |     {...props}
 35 |   />
 36 | ));
 37 | CardHeader.displayName = "CardHeader";
 38 | 
 39 | const CardTitle = React.forwardRef<
 40 |   HTMLParagraphElement,
 41 |   React.HTMLAttributes<HTMLHeadingElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <h3
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "text-2xl font-semibold leading-none tracking-tight text-pretty",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ));
 52 | CardTitle.displayName = "CardTitle";
 53 | 
 54 | const CardDescription = React.forwardRef<
 55 |   HTMLParagraphElement,
 56 |   React.HTMLAttributes<HTMLParagraphElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <p
 59 |     ref={ref}
 60 |     className={cn("text-lg text-pretty text-primary-500", className)}
 61 |     {...props}
 62 |   />
 63 | ));
 64 | CardDescription.displayName = "CardDescription";
 65 | 
 66 | interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
 67 |   stack?: boolean;
 68 | }
 69 | 
 70 | const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
 71 |   ({ className, stack = false, ...props }, ref) => (
 72 |     <div
 73 |       ref={ref}
 74 |       className={cn(
 75 |         "p-6 pt-0 lg:p-9 lg:pt-0",
 76 |         stack && "flex flex-col gap-3 lg:gap-4",
 77 |         className
 78 |       )}
 79 |       {...props}
 80 |     />
 81 |   )
 82 | );
 83 | CardContent.displayName = "CardContent";
 84 | 
 85 | const CardFooter = React.forwardRef<
 86 |   HTMLDivElement,
 87 |   React.HTMLAttributes<HTMLDivElement>
 88 | >(({ className, ...props }, ref) => (
 89 |   <div
 90 |     ref={ref}
 91 |     className={cn(
 92 |       "flex justify-center items-center p-6 pt-0 lg:p-9 lg:pt-0",
 93 |       className
 94 |     )}
 95 |     {...props}
 96 |   />
 97 | ));
 98 | CardFooter.displayName = "CardFooter";
 99 | 
100 | export {
101 |   Card,
102 |   CardContent,
103 |   CardDescription,
104 |   CardFooter,
105 |   CardHeader,
106 |   CardTitle,
107 | };
108 | 


--------------------------------------------------------------------------------
/app/global.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | :root {
  6 |   --default-font-size: theme(fontSize.sm);
  7 |   --app-padding: 12px;
  8 |   --layout-aside-width: 100%;
  9 | 
 10 |   @screen md {
 11 |     --app-padding: 1rem;
 12 |     --default-font-size: theme(fontSize.base);
 13 |     --layout-aside-width: 320px;
 14 |   }
 15 |   @screen lg {
 16 |     --layout-aside-width: 380px;
 17 |   }
 18 | }
 19 | 
 20 | * {
 21 |   box-sizing: border-box;
 22 | }
 23 | 
 24 | *:focus-visible {
 25 |   outline-color: black;
 26 |   outline-offset: 2px;
 27 |   outline-width: 2px;
 28 | }
 29 | 
 30 | html {
 31 |   font-size: var(--default-font-size);
 32 | }
 33 | 
 34 | html,
 35 | body {
 36 |   background-color: theme(colors.primary.50);
 37 |   color: theme(colors.primary.900);
 38 |   overscroll-behavior: none;
 39 | }
 40 | 
 41 | body {
 42 |   font-family: theme(fontFamily.sans);
 43 |   font-synthesis: none;
 44 |   text-rendering: optimizeLegibility;
 45 |   -webkit-font-smoothing: antialiased;
 46 |   -moz-osx-font-smoothing: grayscale;
 47 | }
 48 | 
 49 | /* App layout */
 50 | 
 51 | body {
 52 |   margin: 0 auto;
 53 |   text-align: center;
 54 |   display: flex;
 55 |   flex-flow: row nowrap;
 56 |   flex: 1;
 57 |   min-height: 100svh;
 58 | }
 59 | 
 60 | main {
 61 |   display: flex;
 62 |   flex-direction: column;
 63 |   flex: 1;
 64 | }
 65 | 
 66 | #app {
 67 |   display: flex;
 68 |   flex-direction: column;
 69 |   align-items: center;
 70 |   justify-content: center;
 71 |   flex: 1;
 72 |   padding: 0 var(--app-padding) var(--app-padding) var(--app-padding);
 73 | }
 74 | 
 75 | /* Animation keyframes */
 76 | @keyframes appear {
 77 |   from {
 78 |     opacity: 0;
 79 |     transform: translateY(1rem);
 80 |   }
 81 |   to {
 82 |     opacity: 1;
 83 |     transform: translateY(0);
 84 |   }
 85 | }
 86 | 
 87 | @keyframes wiggle {
 88 |   0% {
 89 |     transform: translateX(0);
 90 |   }
 91 |   25% {
 92 |     transform: translateX(-5px);
 93 |   }
 94 |   50% {
 95 |     transform: translateX(5px);
 96 |   }
 97 |   75% {
 98 |     transform: translateX(-5px);
 99 |   }
100 |   100% {
101 |     transform: translateX(0);
102 |   }
103 | }
104 | 
105 | /* Utilities */
106 | 
107 | .borderClip {
108 |   background-clip: padding-box, border-box;
109 | }
110 | 
111 | samp {
112 |   font-family: theme(fontFamily.mono);
113 |   display: inline;
114 |   font-size: theme(fontSize.xs);
115 |   padding: 0 0.4em;
116 |   line-height: 1;
117 |   border-radius: 0.25rem;
118 |   background: color-mix(in srgb, currentColor, transparent 92%);
119 |   letter-spacing: 0.05rem;
120 | }
121 | 
122 | sub {
123 |   vertical-align: baseline;
124 |   margin-left: 2px;
125 |   font-size: 65%;
126 |   bottom: 0 !important;
127 |   color: theme(colors.primary.500);
128 | }
129 | 
130 | /* Dialog (modal) */
131 | 
132 | dialog {
133 |   background: transparent;
134 |   box-shadow: theme(boxShadow.long);
135 |   border-radius: theme(borderRadius.3xl);
136 |   animation: appear 0.3s ease-out;
137 | 
138 |   @screen md {
139 |   }
140 | }
141 | 
142 | dialog::backdrop {
143 |   background-color: rgba(255, 255, 255, 0.5);
144 |   backdrop-filter: blur(5px);
145 | }
146 | 
147 | #tray {
148 |   overflow: hidden;
149 |   height: 100vh;
150 | }
151 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { useEffect, useState } from "react";
  3 | import { TooltipProvider } from "@radix-ui/react-tooltip";
  4 | import { LLMHelper } from "realtime-ai";
  5 | import { DailyVoiceClient } from "realtime-ai-daily";
  6 | import { VoiceClientAudio, VoiceClientProvider } from "realtime-ai-react";
  7 | import { Loader2 } from "lucide-react";
  8 | import App from "@/components/App";
  9 | import { CharacterProvider } from "@/components/context";
 10 | import Header from "@/components/Header";
 11 | import {
 12 |   BOT_READY_TIMEOUT,
 13 |   defaultConfig,
 14 |   defaultServices,
 15 | } from "@/rtvi.config";
 16 | 
 17 | const LoadingScreen = () => (
 18 |   <div className="min-h-screen w-full flex flex-col items-center justify-center bg-gradient-to-br from-blue-50 to-purple-50">
 19 |     <div className="text-center space-y-4">
 20 |       <Loader2 className="h-12 w-12 animate-spin text-blue-600 mx-auto" />
 21 |       <h2 className="text-xl font-medium text-gray-700">
 22 |         Initializing AI Teacher...
 23 |       </h2>
 24 |       <p className="text-sm text-gray-500">
 25 |         Setting up your interactive learning experience
 26 |       </p>
 27 |     </div>
 28 |   </div>
 29 | );
 30 | 
 31 | export default function Home() {
 32 |   const [voiceClient, setVoiceClient] = useState<DailyVoiceClient | null>(null);
 33 |   const [isInitializing, setIsInitializing] = useState(true);
 34 | 
 35 |   useEffect(() => {
 36 |     let mounted = true;
 37 | 
 38 |     const initializeVoiceClient = async () => {
 39 |       try {
 40 |         setIsInitializing(true);
 41 | 
 42 |         // Create new voice client instance
 43 |         const newVoiceClient = new DailyVoiceClient({
 44 |           baseUrl: process.env.NEXT_PUBLIC_BASE_URL || "/api",
 45 |           services: defaultServices,
 46 |           config: defaultConfig,
 47 |           timeout: BOT_READY_TIMEOUT,
 48 |           enableCam: true,
 49 |         });
 50 | 
 51 |         const llmHelper = new LLMHelper({
 52 |           callbacks: {
 53 |             onLLMFunctionCall: () => {
 54 |               const audio = new Audio("shutter.mp3");
 55 |               audio.play();
 56 |             },
 57 |           },
 58 |         });
 59 | 
 60 |         newVoiceClient.registerHelper("llm", llmHelper);
 61 | 
 62 |         if (mounted) {
 63 |           setVoiceClient(newVoiceClient);
 64 |           setIsInitializing(false);
 65 |         }
 66 |       } catch (error) {
 67 |         console.error("Failed to initialize voice client:", error);
 68 |         if (mounted) {
 69 |           setIsInitializing(false);
 70 |         }
 71 |       }
 72 |     };
 73 | 
 74 |     initializeVoiceClient();
 75 | 
 76 |     // Cleanup function
 77 |     return () => {
 78 |       mounted = false;
 79 |       if (voiceClient) {
 80 |         voiceClient.removeAllListeners();
 81 |         setVoiceClient(null);
 82 |       }
 83 |     };
 84 |   }, []); // Empty dependency array means this runs once on mount
 85 | 
 86 |   if (isInitializing || !voiceClient) {
 87 |     return <LoadingScreen />;
 88 |   }
 89 | 
 90 |   return (
 91 |     <VoiceClientProvider voiceClient={voiceClient}>
 92 |       <CharacterProvider>
 93 |         <TooltipProvider>
 94 |           <main>
 95 |             <Header />
 96 |             <div id="app">
 97 |               <App />
 98 |             </div>
 99 |           </main>
100 |           <aside id="tray" />
101 |         </TooltipProvider>
102 |       </CharacterProvider>
103 |       <VoiceClientAudio />
104 |     </VoiceClientProvider>
105 |   );
106 | }
107 | 


--------------------------------------------------------------------------------
/components/Session/Agent/styles.module.css:
--------------------------------------------------------------------------------
  1 | .agent {
  2 |   position: relative;
  3 |   overflow: hidden;
  4 | }
  5 | 
  6 | .agentWindow {
  7 |   min-width: 400px;
  8 |   aspect-ratio: 1;
  9 | 
 10 |   border-radius: theme(borderRadius.2xl);
 11 |   position: relative;
 12 |   display: flex;
 13 |   align-items: center;
 14 |   justify-content: center;
 15 |   transition: background-color 2s;
 16 |   overflow: hidden;
 17 |   z-index: 1;
 18 | 
 19 |   @media (max-width: 768px) {
 20 |     min-width: 0;
 21 |   }
 22 | }
 23 | 
 24 | .video {
 25 |   position: absolute;
 26 |   object-fit: cover !important;
 27 |   z-index: 0;
 28 |   border-radius: theme(borderRadius.3xl);
 29 |   inset: 0;
 30 |   height: 100%;
 31 |   width: 100%;
 32 | }
 33 | 
 34 | .ready {
 35 | }
 36 | 
 37 | .talking {
 38 |   background: rgba(0, 0, 0, 0.4);
 39 | }
 40 | 
 41 | .agentFooter {
 42 |   display: flex;
 43 |   flex-flow: row nowrap;
 44 |   justify-content: space-between;
 45 |   width: 100%;
 46 | 
 47 |   > :first-child {
 48 |     border-right: 1px solid var(--color-gray-200);
 49 |   }
 50 | }
 51 | 
 52 | .status {
 53 |   flex: 1;
 54 |   line-height: 1;
 55 |   display: flex;
 56 |   flex-flow: column wrap;
 57 |   align-items: center;
 58 |   gap: 0.5rem;
 59 | 
 60 |   > span {
 61 |     font-family: var(--font-mono);
 62 |     font-size: 11px;
 63 |     text-transform: uppercase;
 64 |     line-height: 1;
 65 |     letter-spacing: 0.7px;
 66 |   }
 67 | }
 68 | 
 69 | .statusIndicator {
 70 |   display: inline-flex;
 71 |   align-items: center;
 72 |   gap: 0.5rem;
 73 |   font-size: 0.75rem;
 74 |   font-weight: 700;
 75 |   padding: 0.5rem 0.75rem;
 76 |   border-radius: var(--borderRadius-xs);
 77 | 
 78 |   > span {
 79 |     display: block;
 80 |     width: 9px;
 81 |     height: 9px;
 82 |     border-radius: 9px;
 83 |     background: red;
 84 |   }
 85 | }
 86 | 
 87 | .statusDefault {
 88 |   color: var(--color-gray-500);
 89 |   background: var(--color-gray-100);
 90 | 
 91 |   > span {
 92 |     background: var(--color-gray-400);
 93 |   }
 94 | }
 95 | .statusOrange {
 96 |   color: var(--color-orange-800);
 97 |   background: var(--color-orange-100);
 98 | 
 99 |   > span {
100 |     background: var(--color-orange-400);
101 |   }
102 | }
103 | .statusRed {
104 |   color: var(--color-red-800);
105 |   background: var(--color-red-100);
106 | 
107 |   > span {
108 |     background: var(--color-red-400);
109 |   }
110 | }
111 | 
112 | .statusGreen {
113 |   color: var(--color-green-800);
114 |   background: var(--color-green-100);
115 | 
116 |   > span {
117 |     background: var(--color-green-400);
118 |   }
119 | }
120 | 
121 | .loader {
122 |   padding: 12px;
123 |   display: inline-block;
124 |   line-height: 0;
125 |   background-color: theme(colors.primary.600);
126 |   border-radius: 99px;
127 |   color: white;
128 |   position: absolute;
129 | }
130 | 
131 | .modelBadge {
132 |   position: absolute;
133 |   top: 12px;
134 |   left: 12px;
135 |   right: 12px;
136 |   text-align: center;
137 |   z-index: 99;
138 |   text-transform: uppercase;
139 |   font-size: 11px;
140 |   font-weight: theme(fontWeight.semibold);
141 |   color: theme(colors.primary.500);
142 | }
143 | 
144 | .face {
145 |   animation: faceAppear 1s ease-out forwards;
146 |   position: relative;
147 |   z-index: 2;
148 | }
149 | 
150 | .faceBubble {
151 |   position: absolute;
152 |   width: 220px;
153 |   height: 220px;
154 |   border-radius: 999px;
155 |   z-index: 1;
156 |   background-color: theme(colors.primary.700);
157 |   transition: transform 0.1s ease;
158 | }
159 | 
160 | @keyframes faceAppear {
161 |   from {
162 |     opacity: 0;
163 |     transform: translateY(1rem);
164 |   }
165 |   to {
166 |     opacity: 1;
167 |     transform: translateY(0);
168 |   }
169 | }
170 | 


--------------------------------------------------------------------------------
/components/Session/UserMicBubble/styles.module.css:
--------------------------------------------------------------------------------
  1 | .bubbleContainer {
  2 |   color: #ffffff;
  3 |   position: relative;
  4 |   z-index: 20;
  5 |   display: flex;
  6 |   flex-direction: column;
  7 |   margin: auto;
  8 |   position: relative;
  9 |   z-index: 20;
 10 |   padding-top: 20px;
 11 |   @screen md {
 12 |     padding-top: 0px;
 13 |   }
 14 | }
 15 | 
 16 | .bubble {
 17 |   position: relative;
 18 |   cursor: pointer;
 19 |   box-sizing: border-box;
 20 |   -moz-box-sizing: border-box;
 21 |   -webkit-box-sizing: border-box;
 22 |   width: 100px;
 23 |   height: 100px;
 24 |   border-radius: 100px;
 25 |   display: flex;
 26 |   justify-content: center;
 27 |   align-items: center;
 28 |   margin: 0 auto;
 29 |   z-index: 20;
 30 |   transition: all 0.5s ease, opacity 2s ease;
 31 |   border: 6px solid
 32 |     color-mix(in srgb, theme(colors.primary.300), transparent 70%);
 33 |   outline: 6px solid
 34 |     color-mix(in srgb, theme(colors.primary.300), transparent 70%);
 35 |   outline-offset: 0px;
 36 |   opacity: 0.5;
 37 | 
 38 |   background-color: theme(colors.primary.500);
 39 |   background-image: radial-gradient(
 40 |     theme(colors.primary.300),
 41 |     theme(colors.primary.400)
 42 |   );
 43 | 
 44 |   @screen md {
 45 |     width: 120px;
 46 |     height: 120px;
 47 |     border-radius: 120px;
 48 |   }
 49 | }
 50 | 
 51 | @keyframes pulse {
 52 |   0% {
 53 |     outline-width: 6px;
 54 |   }
 55 |   50% {
 56 |     outline-width: 24px;
 57 |   }
 58 |   100% {
 59 |     outline-width: 6px;
 60 |   }
 61 | }
 62 | 
 63 | .icon {
 64 |   position: relative;
 65 |   z-index: 20;
 66 |   opacity: 0.3;
 67 |   transition: opacity 0.5s ease;
 68 |   line-height: 1;
 69 | }
 70 | 
 71 | .canTalk {
 72 |   opacity: 1;
 73 |   background-color: theme(colors.primary.500);
 74 |   background-image: radial-gradient(
 75 |     theme(colors.primary.500),
 76 |     theme(colors.primary.600)
 77 |   );
 78 |   border: 6px solid
 79 |     color-mix(in srgb, theme(colors.primary.200), transparent 60%);
 80 |   outline: 6px solid
 81 |     color-mix(in srgb, theme(colors.primary.400), transparent 70%);
 82 |   outline-offset: 4px;
 83 | 
 84 |   .icon {
 85 |     opacity: 1;
 86 |   }
 87 | }
 88 | 
 89 | .blocked {
 90 |   pointer-events: none;
 91 |   cursor: disabled;
 92 | }
 93 | 
 94 | .muted {
 95 |   opacity: 1;
 96 |   background-color: theme(colors.red.500);
 97 |   background-image: radial-gradient(
 98 |     theme(colors.red.500),
 99 |     theme(colors.red.600)
100 |   );
101 |   animation: pulseText 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
102 |   border: 6px solid color-mix(in srgb, theme(colors.red.200), transparent 60%);
103 |   outline: 6px solid color-mix(in srgb, theme(colors.red.400), transparent 70%);
104 | 
105 |   &:after {
106 |     content: "Unmute";
107 |     position: absolute;
108 |     inset: 0;
109 |     display: flex;
110 |     justify-content: center;
111 |     align-items: center;
112 |     font-size: 12px;
113 |     font-weight: theme(fontWeight.bold);
114 |     font-family: theme(fontFamily.mono);
115 |     text-transform: uppercase;
116 |     letter-spacing: theme(letterSpacing.wider);
117 |     color: theme(colors.red.100);
118 |   }
119 | }
120 | 
121 | @keyframes pulseText {
122 |   0%,
123 |   100% {
124 |     opacity: 1;
125 |   }
126 |   50% {
127 |     opacity: 0.5;
128 |   }
129 | }
130 | 
131 | .volume {
132 |   position: absolute;
133 |   overflow: hidden;
134 |   inset: 0px;
135 |   z-index: 0;
136 |   border-radius: 999px;
137 |   transition: all 0.1s ease;
138 |   transform: scale(0);
139 |   opacity: 0.5;
140 |   background-color: theme(colors.green.300);
141 | }
142 | 
143 | /* Transcript */
144 | 
145 | .transcript {
146 |   pointer-events: none;
147 |   user-select: none;
148 |   position: absolute;
149 |   bottom: 0px;
150 |   flex: 0;
151 |   align-self: center;
152 |   opacity: 0.25;
153 |   font-size: var(--font-size-xs);
154 |   font-weight: 600;
155 |   z-index: 999;
156 |   color: white;
157 |   background-color: color-mix(in srgb, theme(colors.gray.800), transparent 30%);
158 |   border-radius: theme(borderRadius.sm);
159 |   padding: 4px 8px;
160 | 
161 |   &:global(.active) {
162 |     opacity: 1;
163 |   }
164 | }
165 | 
166 | .typewriter {
167 |   display: flex;
168 | }
169 | 
170 | .word {
171 |   display: inline-block;
172 | }
173 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
  1 | ### Deployment URL : https://ai-teacher-rho.vercel.app/
  2 | 
  3 | # AI Teaching Assistant Demo
  4 | 
  5 | An interactive AI teaching assistant powered by real-time voice communication and computer vision capabilities. This application enables natural conversations with an AI tutor that can see, hear, and respond to students in real-time.
  6 | 
  7 | ## Features
  8 | 
  9 | - 🎙️ Real-time voice communication
 10 | - 👁️ Computer vision capabilities
 11 | - 🤖 Powered by Claude 3.5 Sonnet
 12 | - 🔄 Interactive conversations
 13 | - 📊 Real-time performance metrics
 14 | - 🎯 Low-latency responses
 15 | - 🌐 Multi-language support
 16 | - 🎥 Camera integration
 17 | - 🔊 Audio device management
 18 | 
 19 | ## Tech Stack
 20 | 
 21 | - **Frontend Framework**: Next.js 14
 22 | - **Language**: TypeScript
 23 | - **Styling**: Tailwind CSS
 24 | - **UI Components**: Custom components with Radix UI primitives
 25 | - **AI Integration**: 
 26 |   - Anthropic's Claude 3.5 Sonnet
 27 |   - OpenAI's Real-time AI
 28 | - **Voice/Video**: Daily.co SDK
 29 | 
 30 | ## Getting Started
 31 | 
 32 | ### Prerequisites
 33 | 
 34 | - Node.js 18.0 or higher
 35 | - npm or yarn
 36 | - A Daily.co API key
 37 | - OpenAI API key
 38 | - Anthropic API key
 39 | 
 40 | ### Installation
 41 | 
 42 | 1. Clone the repository:
 43 | ```bash
 44 | git clone https://github.com/SuyashPatil-29/ai-teacher
 45 | cd ai-teacher-demo
 46 | ```
 47 | 
 48 | 2. Install dependencies:
 49 | Use Yarn 
 50 | ```bash
 51 | yarn 
 52 | ```
 53 | 
 54 | 3. Create a `.env.local` file in the root directory:
 55 | DAILY_API_KEY=your_daily_api_key
 56 | OPENAI_API_KEY=your_openai_api_key
 57 | DAILY_BOTS_URL=your_daily_bots_url
 58 | 
 59 | 4. Start the development server:
 60 | ```yarn run dev```
 61 | 
 62 | 5. Open [http://localhost:3000](http://localhost:3000) in your browser.
 63 | 
 64 | ## Usage
 65 | 
 66 | 1. **Initial Setup**:
 67 |    - Grant microphone and camera permissions
 68 |    - Select your preferred audio/video devices
 69 |    - Choose to start with microphone muted/unmuted
 70 | 
 71 | 2. **During Session**:
 72 |    - Speak naturally with the AI tutor
 73 |    - Show materials to the camera for visual analysis
 74 |    - Use the interrupt button when needed
 75 |    - Monitor performance metrics in real-time
 76 |    - Configure devices on the fly
 77 | 
 78 | 3. **Controls**:
 79 |    - Mute/Unmute microphone
 80 |    - Interrupt bot while speaking
 81 |    - View statistics
 82 |    - Configure devices
 83 |    - End session
 84 | 
 85 | ## Project Structure
 86 | ai-teacher-demo/
 87 | ├── app/ # Next.js app directory
 88 | ├── components/
 89 | │ ├── Session/ # Main session components
 90 | │ ├── Setup/ # Device setup components
 91 | │ └── ui/ # Reusable UI components
 92 | ├── utils/ # Utility functions
 93 | ├── types/ # TypeScript type definitions
 94 | └── public/ # Static assets
 95 | 
 96 | 
 97 | ## Key Components
 98 | 
 99 | - **Session**: Manages the main teaching session
100 | - **UserMicBubble**: Controls user audio input
101 | - **Agent**: Handles AI agent visualization
102 | - **TranscriptOverlay**: Displays real-time transcriptions
103 | - **Configure**: Manages device settings
104 | 
105 | ## Contributing
106 | 
107 | 1. Fork the repository
108 | 2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
109 | 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
110 | 4. Push to the branch (`git push origin feature/AmazingFeature`)
111 | 5. Open a Pull Request
112 | 
113 | ## License
114 | 
115 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
116 | 
117 | ## Acknowledgments
118 | 
119 | - [Daily.co](https://daily.co) for real-time communication infrastructure
120 | - [Anthropic](https://anthropic.com) for Claude AI model
121 | - [OpenAI](https://openai.com) for real-time AI capabilities
122 | - [Vercel](https://vercel.com) for hosting and deployment platform
123 | 
124 | ## Support
125 | 
126 | For support, please open an issue in the GitHub repository or contact [patilsuyash892@gmail.com](mailto:patilsuyash892@gmail.com).
127 | Instagram : https://www.instagram.com/_suyashpatil_/
128 | Ph No : +91 7483543757
129 | 
130 | ---
131 | 
132 | ### Deployment URL : https://ai-teacher-rho.vercel.app/
133 | 
134 | Built with ❤️ by Suyash Ganesh Patil
135 | 


--------------------------------------------------------------------------------
/public/logo-openai.svg:
--------------------------------------------------------------------------------
 1 | <svg width="200" height="60" viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect width="200" height="60" fill="transparent"/>
 3 | <g clip-path="url(#clip0_65_200)">
 4 | <path d="M67.1819 29.5952C67.1819 37.2797 72.1365 42.6377 79.0021 42.6377C85.8677 42.6377 90.8223 37.2797 90.8223 29.5952C90.8223 21.9107 85.8677 16.5527 79.0021 16.5527C72.1365 16.5527 67.1819 21.9107 67.1819 29.5952ZM86.2924 29.5952C86.2924 35.0942 83.2843 38.6545 79.0021 38.6545C74.7199 38.6545 71.7118 35.0942 71.7118 29.5952C71.7118 24.0962 74.7199 20.536 79.0021 20.536C83.2843 20.536 86.2924 24.0962 86.2924 29.5952Z" fill="black"/>
 5 | <path d="M103.579 42.6377C108.781 42.6377 111.754 38.2667 111.754 33.0145C111.754 27.7622 108.781 23.3912 103.579 23.3912C101.172 23.3912 99.4028 24.343 98.2349 25.7177V23.7437H93.9882V48.595H98.2349V40.3112C99.4028 41.686 101.172 42.6377 103.579 42.6377ZM98.1288 32.4857C98.1288 28.996 100.111 27.0925 102.729 27.0925C105.808 27.0925 107.472 29.4895 107.472 33.0145C107.472 36.5395 105.808 38.9365 102.729 38.9365C100.111 38.9365 98.1288 36.9977 98.1288 33.5785V32.4857Z" fill="black"/>
 6 | <path d="M123.247 42.6377C126.963 42.6377 129.9 40.699 131.209 37.456L127.564 36.0812C126.998 37.9847 125.335 39.0422 123.247 39.0422C120.522 39.0422 118.611 37.1035 118.292 33.931H131.316V32.521C131.316 27.445 128.449 23.3912 123.07 23.3912C117.69 23.3912 114.222 27.586 114.222 33.0145C114.222 38.725 117.938 42.6377 123.247 42.6377ZM123.034 26.9515C125.724 26.9515 126.998 28.714 127.033 30.7585H118.504C119.141 28.2557 120.84 26.9515 123.034 26.9515Z" fill="black"/>
 7 | <path d="M134.502 42.25H138.749V31.393C138.749 28.7492 140.695 27.3392 142.606 27.3392C144.942 27.3392 145.862 28.996 145.862 31.2872V42.25H150.109V30.0535C150.109 26.0702 147.773 23.3912 143.88 23.3912C141.474 23.3912 139.811 24.484 138.749 25.7177V23.7437H134.502V42.25Z" fill="black"/>
 8 | <path d="M162.547 16.9405L152.921 42.25H157.416L159.574 36.469H170.545L172.739 42.25H177.305L167.679 16.9405H162.547ZM165.024 21.946L169.059 32.521H161.061L165.024 21.946Z" fill="black"/>
 9 | <path d="M184.595 17.0139H180.065V42.3234H184.595V17.0139Z" fill="black"/>
10 | <path d="M56.8038 26.2362C57.8743 23.0358 57.5057 19.5299 55.7937 16.6188C53.2191 12.1538 48.0433 9.85669 42.9885 10.9377C40.7398 8.41438 37.509 6.97941 34.1219 6.99997C28.955 6.98822 24.3705 10.3017 22.7809 15.1985C19.4616 15.8756 16.5965 17.9451 14.9199 20.8782C12.3262 25.3314 12.9175 30.945 16.3827 34.7638C15.3122 37.9642 15.6808 41.4701 17.3928 44.3811C19.9674 48.8461 25.1432 51.1433 30.198 50.0623C32.4453 52.5856 35.6775 54.0205 39.0646 53.9985C44.2345 54.0117 48.8204 50.6953 50.41 45.7941C53.7293 45.117 56.5944 43.0475 58.271 40.1144C60.8618 35.6612 60.2691 30.052 56.8053 26.2333L56.8038 26.2362ZM39.0676 50.9274C36.9988 50.9303 34.9948 50.2091 33.4067 48.8887C33.479 48.8505 33.6043 48.7815 33.6854 48.7316L43.0814 43.3266C43.5621 43.0549 43.857 42.5452 43.8541 41.9944V28.8006L47.8251 31.0845C47.8679 31.1051 47.8959 31.1462 47.9018 31.1932V42.1193C47.8959 46.9779 43.9455 50.9171 39.0676 50.9274ZM20.0692 42.8448C19.0325 41.0618 18.6595 38.9717 19.0148 36.9434C19.0841 36.9845 19.2065 37.0594 19.2935 37.1094L28.6895 42.5144C29.1658 42.7919 29.7556 42.7919 30.2334 42.5144L41.7041 35.9167V40.4845C41.7071 40.5315 41.685 40.5771 41.6481 40.6064L32.1504 46.0687C27.9198 48.4951 22.5169 47.0528 20.0706 42.8448H20.0692ZM17.5963 22.416C18.6285 20.63 20.2579 19.264 22.1984 18.5546C22.1984 18.6354 22.194 18.7779 22.194 18.8778V29.6892C22.1911 30.2385 22.486 30.7482 22.9652 31.0199L34.4359 37.6161L30.4649 39.9C30.4251 39.9264 30.375 39.9308 30.3307 39.9117L20.8315 34.445C16.6098 32.0098 15.1618 26.6298 17.5948 22.4174L17.5963 22.416ZM50.2228 29.9786L38.752 23.3809L42.7231 21.0985C42.7629 21.0721 42.813 21.0677 42.8573 21.0868L52.3565 26.549C56.5856 28.9828 58.0351 34.3716 55.5917 38.584C54.558 40.367 52.9301 41.733 50.991 42.4439V31.3093C50.9954 30.7599 50.702 30.2518 50.2242 29.9786H50.2228ZM54.1746 24.0536C54.1053 24.011 53.9829 23.9376 53.8959 23.8877L44.4999 18.4827C44.0236 18.2051 43.4338 18.2051 42.9561 18.4827L31.4853 25.0803V20.5125C31.4824 20.4655 31.5045 20.4199 31.5414 20.3906L41.0391 14.9327C45.2697 12.5019 50.6784 13.9486 53.1174 18.1639C54.1481 19.9441 54.5212 22.0282 54.1717 24.0536H54.1746ZM29.3265 32.1949L25.354 29.911C25.3113 29.8904 25.2833 29.8493 25.2774 29.8023V18.8763C25.2803 14.0118 29.2425 10.0697 34.1263 10.0726C36.1922 10.0726 38.1917 10.7952 39.7798 12.1112C39.7076 12.1494 39.5837 12.2184 39.5011 12.2684L30.1051 17.6734C29.6244 17.9451 29.3295 18.4533 29.3324 19.0041L29.3265 32.192V32.1949ZM31.4838 27.5625L36.5933 24.6235L41.7027 27.561V33.4375L36.5933 36.375L31.4838 33.4375V27.5625Z" fill="black"/>
11 | </g>
12 | <defs>
13 | <clipPath id="clip0_65_200">
14 | <rect width="174" height="47" fill="white" transform="translate(13 7)"/>
15 | </clipPath>
16 | </defs>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/components/App.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useCallback, useEffect, useState } from "react";
  4 | import { Ear, Loader2 } from "lucide-react";
  5 | import { VoiceError, VoiceEvent, VoiceMessage } from "realtime-ai";
  6 | import {
  7 |   useVoiceClient,
  8 |   useVoiceClientEvent,
  9 |   useVoiceClientTransportState,
 10 | } from "realtime-ai-react";
 11 | 
 12 | import { Alert } from "./ui/alert";
 13 | import { Button } from "./ui/button";
 14 | import * as Card from "./ui/card";
 15 | import Session from "./Session";
 16 | import { Configure } from "./Setup";
 17 | 
 18 | const status_text = {
 19 |   idle: "Initializing...",
 20 |   initializing: "Initializing...",
 21 |   initialized: "Start",
 22 |   authenticating: "Requesting bot...",
 23 |   connecting: "Connecting...",
 24 | };
 25 | 
 26 | export default function App() {
 27 |   const voiceClient = useVoiceClient()!;
 28 |   const transportState = useVoiceClientTransportState();
 29 | 
 30 |   const [appState, setAppState] = useState<
 31 |     "idle" | "ready" | "connecting" | "connected"
 32 |   >("idle");
 33 |   const [error, setError] = useState<string | null>(null);
 34 |   const [startAudioOff, setStartAudioOff] = useState<boolean>(false);
 35 | 
 36 |   useVoiceClientEvent(
 37 |     VoiceEvent.Error,
 38 |     useCallback((message: VoiceMessage) => {
 39 |       const errorData = message.data as { error: string; fatal: boolean };
 40 |       if (!errorData.fatal) return;
 41 |       setError(errorData.error);
 42 |     }, [])
 43 |   );
 44 | 
 45 |   useEffect(() => {
 46 |     // Initialize local audio devices
 47 |     if (!voiceClient || appState !== "idle") return;
 48 |     voiceClient.initDevices();
 49 |   }, [appState, voiceClient]);
 50 | 
 51 |   useEffect(() => {
 52 |     // Update app state based on voice client transport state.
 53 |     // We only need a subset of states to determine the ui state,
 54 |     // so this effect helps avoid excess inline conditionals.
 55 |     switch (transportState) {
 56 |       case "initialized":
 57 |         setAppState("ready");
 58 |         break;
 59 |       case "authenticating":
 60 |       case "connecting":
 61 |         setAppState("connecting");
 62 |         break;
 63 |       case "connected":
 64 |       case "ready":
 65 |         setAppState("connected");
 66 |         break;
 67 |       default:
 68 |         setAppState("idle");
 69 |     }
 70 |   }, [transportState]);
 71 | 
 72 |   async function start() {
 73 |     if (!voiceClient) return;
 74 | 
 75 |     // Join the session
 76 |     try {
 77 |       // Disable the mic until the bot has joined
 78 |       // to avoid interrupting the bot's welcome message
 79 |       voiceClient.enableMic(false);
 80 | 
 81 |       await voiceClient.start();
 82 |     } catch (e) {
 83 |       setError((e as VoiceError).message || "Unknown error occured");
 84 |       voiceClient.disconnect();
 85 |     }
 86 |   }
 87 | 
 88 |   async function leave() {
 89 |     await voiceClient.disconnect();
 90 |   }
 91 | 
 92 |   /**
 93 |    * UI States
 94 |    */
 95 | 
 96 |   // Error: show full screen message
 97 |   if (error) {
 98 |     return (
 99 |       <Alert intent="danger" title="An error occurred">
100 |         {error}
101 |       </Alert>
102 |     );
103 |   }
104 | 
105 |   // Connected: show session view
106 |   if (appState === "connected") {
107 |     return (
108 |       <Session
109 |         state={transportState}
110 |         onLeave={() => leave()}
111 |         startAudioOff={startAudioOff}
112 |       />
113 |     );
114 |   }
115 | 
116 |   // Default: show setup view
117 |   const isReady = appState === "ready";
118 | 
119 |   return (
120 |     <Card.Card shadow className="animate-appear max-w-lg mb-14">
121 |       <Card.CardHeader>
122 |         <Card.CardTitle>Configuration</Card.CardTitle>
123 |       </Card.CardHeader>
124 |       <Card.CardContent stack>
125 |         <div className="flex flex-row gap-2 bg-primary-50 px-4 py-2 md:p-2 text-sm items-center justify-center rounded-md font-medium text-pretty">
126 |           <Ear className="size-7 md:size-5 text-primary-400" />
127 |           Works best in a quiet environment with a good internet.
128 |         </div>
129 |         <Configure
130 |           startAudioOff={startAudioOff}
131 |           handleStartAudioOff={() => setStartAudioOff(!startAudioOff)}
132 |           state={appState}
133 |         />
134 |       </Card.CardContent>
135 |       <Card.CardFooter>
136 |         <Button
137 |           key="start"
138 |           fullWidthMobile
139 |           onClick={() => start()}
140 |           disabled={!isReady}
141 |         >
142 |           {!isReady && <Loader2 className="animate-spin" />}
143 |           {status_text[transportState as keyof typeof status_text]}
144 |         </Button>
145 |       </Card.CardFooter>
146 |     </Card.Card>
147 |   );
148 | }
149 | 


--------------------------------------------------------------------------------
/components/Session/Stats/styles.module.css:
--------------------------------------------------------------------------------
  1 | .container {
  2 |   position: absolute;
  3 |   width: var(--layout-aside-width);
  4 |   z-index: 9999;
  5 |   left: 0px;
  6 |   right: 0px;
  7 |   bottom: 0px;
  8 |   background: white;
  9 |   border-top: 1px solid theme(colors.primary.200);
 10 |   animation: appear 0.3s ease-in-out;
 11 |   text-align: left;
 12 |   box-shadow: theme(boxShadow.stats);
 13 | 
 14 |   @screen md {
 15 |     box-shadow: none;
 16 |     z-index: 1;
 17 |     height: 100%;
 18 |     position: relative;
 19 |     background: transparent;
 20 |     border-top: 0px;
 21 |     border-left: 1px solid theme(colors.primary.200);
 22 |   }
 23 | }
 24 | 
 25 | .inner {
 26 |   user-select: none;
 27 |   padding: theme(spacing.4) theme(spacing.3);
 28 |   padding-top: 0px;
 29 |   overflow-x: scroll;
 30 |   display: flex;
 31 |   flex-flow: row nowrap;
 32 |   gap: theme(spacing.8);
 33 | 
 34 |   @screen md {
 35 |     gap: theme(spacing.8);
 36 |     height: 100%;
 37 |     overflow-x: visible;
 38 |     overflow-y: scroll;
 39 |     flex-flow: column wrap;
 40 |     padding-bottom: 100px;
 41 |   }
 42 | }
 43 | 
 44 | .close {
 45 |   text-align: center;
 46 | 
 47 |   @screen md {
 48 |     text-align: right;
 49 |   }
 50 | }
 51 | 
 52 | .networkStats {
 53 |   display: flex;
 54 |   flex-flow: column nowrap;
 55 |   gap: theme(spacing.3);
 56 |   height: 100%;
 57 | 
 58 |   > div {
 59 |     display: flex;
 60 |     flex-flow: column wrap;
 61 |     flex: 1;
 62 |     min-width: 100px;
 63 |     padding: theme(spacing.3) theme(spacing.2);
 64 |     align-items: center;
 65 |     justify-content: center;
 66 |     border-radius: theme(borderRadius.md);
 67 |     background-color: theme(colors.primary.100);
 68 |     flex-shrink: 0;
 69 |     overflow: hidden;
 70 | 
 71 |     span {
 72 |       color: theme(colors.primary.900);
 73 |       font-weight: theme(fontWeight.semibold);
 74 |       flex-shrink: 0;
 75 |     }
 76 |   }
 77 | 
 78 |   @screen md {
 79 |     height: auto;
 80 |     flex-flow: row nowrap;
 81 | 
 82 |     > div {
 83 |       min-width: auto;
 84 |     }
 85 |   }
 86 | }
 87 | 
 88 | .statsHeader {
 89 |   font-weight: 600;
 90 |   display: none;
 91 | 
 92 |   @screen md {
 93 |     display: block;
 94 |   }
 95 | }
 96 | 
 97 | .monoHeader {
 98 |   font-family: theme(fontFamily.mono);
 99 |   font-size: theme(fontSize.xs);
100 |   text-transform: uppercase;
101 |   letter-spacing: theme(letterSpacing.wide);
102 |   color: theme(colors.primary.600);
103 | }
104 | 
105 | .section {
106 |   @screen md {
107 |   }
108 | }
109 | 
110 | .section,
111 | .sectionServices {
112 |   display: flex;
113 |   flex-flow: row;
114 |   gap: theme(spacing.6);
115 | 
116 |   @screen md {
117 |     display: flex;
118 |     flex-flow: column wrap;
119 |     gap: theme(spacing.6);
120 |   }
121 | }
122 | 
123 | .serviceTiles {
124 |   display: flex;
125 |   flex-flow: row nowrap;
126 |   gap: theme(spacing.2);
127 | 
128 |   @screen md {
129 |     display: flex;
130 |     flex-flow: column wrap;
131 |     gap: theme(spacing.6);
132 |   }
133 | }
134 | 
135 | .serviceStat {
136 |   font-size: theme(fontSize.sm);
137 |   background-color: white;
138 |   border: 1px solid theme(colors.primary.200);
139 |   border-radius: theme(borderRadius.md);
140 | 
141 |   > header {
142 |     padding: theme(spacing.3);
143 |   }
144 | 
145 |   > footer {
146 |     border-top: 1px solid theme(colors.primary.200);
147 |     display: flex;
148 |     flex-flow: row nowrap;
149 |     font-size: 11px;
150 |     font-family: theme(fontFamily.mono);
151 |     justify-content: space-between;
152 |     padding: theme(spacing.2) theme(spacing.3);
153 |   }
154 | }
155 | 
156 | .serviceName {
157 |   font-weight: theme(fontWeight.semibold);
158 |   font-size: theme(fontSize.base);
159 |   margin-bottom: theme(spacing.3);
160 |   display: flex;
161 |   flex-flow: row nowrap;
162 |   gap: 5px;
163 |   align-items: center;
164 | }
165 | 
166 | .latest {
167 |   background-color: theme(colors.primary.50);
168 |   border-radius: theme(borderRadius.md);
169 |   font-size: theme(fontSize.xs);
170 |   text-transform: uppercase;
171 |   letter-spacing: theme(letterSpacing.wide);
172 |   display: flex;
173 |   flex-flow: row wrap;
174 |   align-items: center;
175 |   justify-content: center;
176 |   gap: theme(spacing.2);
177 |   padding: theme(spacing.2) theme(spacing.3);
178 | }
179 | 
180 | .statValue {
181 |   line-height: 1;
182 |   font-family: theme(fontFamily.mono);
183 |   font-weight: theme(fontWeight.bold);
184 |   text-transform: uppercase;
185 |   display: inline-flex;
186 |   flex-flow: row nowrap;
187 |   gap: 5px;
188 |   line-height: 1;
189 | 
190 |   > span {
191 |     font-weight: theme(fontWeight.normal);
192 |   }
193 | }
194 | 
195 | .chart {
196 |   width: auto;
197 |   line-height: 1;
198 |   margin: 0 theme(spacing.3);
199 | }
200 | 


--------------------------------------------------------------------------------
/components/Session/Stats/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useState } from "react";
  2 | import {
  3 |   Sparklines,
  4 |   SparklinesBars,
  5 |   SparklinesLine,
  6 |   SparklinesReferenceLine,
  7 | } from "react-sparklines";
  8 | import { Loader2, X } from "lucide-react";
  9 | import { current } from "tailwindcss/colors";
 10 | 
 11 | import { Button } from "../../ui/button";
 12 | import HelpTip from "../../ui/helptip";
 13 | 
 14 | import styles from "./styles.module.css";
 15 | 
 16 | interface StatsProps {
 17 |   statsAggregator: StatsAggregator;
 18 |   handleClose: () => void;
 19 | }
 20 | 
 21 | const StatsTile = ({
 22 |   service,
 23 |   metric,
 24 |   tip,
 25 |   sub = "s",
 26 |   multiplier = 3,
 27 |   data,
 28 | }: {
 29 |   service: string;
 30 |   sub?: string;
 31 |   metric: string;
 32 |   tip?: string;
 33 |   multiplier?: number;
 34 |   data: MetricValue;
 35 | }) => {
 36 |   return (
 37 |     <div className={styles.serviceStat}>
 38 |       <header>
 39 |         <div className={styles.serviceName}>
 40 |           {service.charAt(0).toUpperCase() + service.slice(1)} {metric}
 41 |           {tip && <HelpTip text={tip} />}
 42 |         </div>
 43 |         <div className={styles.latest}>
 44 |           <span>Latest</span>
 45 |           <span className="font-medium">
 46 |             {data.latest?.toFixed(multiplier)}
 47 |             <sub>{sub}</sub>
 48 |           </span>
 49 |         </div>
 50 |       </header>
 51 |       <div className={styles.chart}>
 52 |         <Sparklines
 53 |           data={data.timeseries}
 54 |           limit={20}
 55 |           height={80}
 56 |           svgHeight={80}
 57 |         >
 58 |           <SparklinesBars style={{ fill: "#41c3f9", fillOpacity: ".25" }} />
 59 |           <SparklinesLine style={{ stroke: "#41c3f9", fill: "none" }} />
 60 |           <SparklinesReferenceLine type="mean" />
 61 |         </Sparklines>
 62 |       </div>
 63 |       <footer>
 64 |         <div className={styles.statValue}>
 65 |           H:
 66 |           <span>
 67 |             {data.high?.toFixed(multiplier)}
 68 |             <sub>{sub}</sub>
 69 |           </span>
 70 |         </div>
 71 |         <div className={styles.statValue}>
 72 |           M:
 73 |           <span>
 74 |             {data.median?.toFixed(multiplier)}
 75 |             <sub>{sub}</sub>
 76 |           </span>
 77 |         </div>
 78 |         <div className={styles.statValue}>
 79 |           L:
 80 |           <span>
 81 |             {data.low?.toFixed(multiplier)}
 82 |             <sub>{sub}</sub>
 83 |           </span>
 84 |         </div>
 85 |       </footer>
 86 |     </div>
 87 |   );
 88 | };
 89 | 
 90 | export const Stats = React.memo(
 91 |   ({ statsAggregator, handleClose }: StatsProps) => {
 92 |     const [currentStats, setCurrentStats] = useState<StatsMap>(
 93 |       statsAggregator.statsMap
 94 |     );
 95 |     const intervalRef = useRef<NodeJS.Timeout | null>(null);
 96 | 
 97 |     useEffect(() => {
 98 |       if (intervalRef.current) {
 99 |         clearInterval(intervalRef.current!);
100 |       }
101 | 
102 |       intervalRef.current = setInterval(async () => {
103 |         // Get latest stats from aggregator
104 |         const newStats = statsAggregator.getStats();
105 |         if (newStats) {
106 |           setCurrentStats({ ...newStats });
107 |         }
108 |       }, 2500);
109 | 
110 |       return () => clearInterval(intervalRef.current!);
111 |     }, [statsAggregator]);
112 | 
113 |     //const numTurns = statsAggregator.turns;
114 | 
115 |     return (
116 |       <div className={styles.container}>
117 |         <div className={styles.close}>
118 |           <Button
119 |             variant="icon"
120 |             size="iconSm"
121 |             onClick={handleClose}
122 |             className="m-3"
123 |           >
124 |             <X />
125 |           </Button>
126 |         </div>
127 |         <div className={styles.inner}>
128 |           <section className={styles.sectionServices}>
129 |             {Object.entries(currentStats).length < 1 ? (
130 |               <div>
131 |                 <Loader2 className="animate-spin mx-auto" />
132 |               </div>
133 |             ) : (
134 |               Object.entries(currentStats).map(([service, data], index) => {
135 |                 return (
136 |                   <div key={service} className={styles.serviceTiles}>
137 |                     <StatsTile
138 |                       key={`${service}-ttfb-${index}`}
139 |                       metric="TTFB"
140 |                       tip="Time to first byte"
141 |                       service={service}
142 |                       multiplier={3}
143 |                       data={data.ttfb}
144 |                     />
145 |                     {currentStats[service].characters && (
146 |                       <StatsTile
147 |                         key={`${service}-chars-${index}`}
148 |                         metric="Characters"
149 |                         sub=""
150 |                         service={service}
151 |                         multiplier={0}
152 |                         data={data.characters}
153 |                       />
154 |                     )}
155 |                     {currentStats[service].processing && (
156 |                       <StatsTile
157 |                         key={`${service}-proc-${index}`}
158 |                         metric="Processing"
159 |                         service={service}
160 |                         data={data.processing}
161 |                       />
162 |                     )}
163 |                   </div>
164 |                 );
165 |               })
166 |             )}
167 |           </section>
168 |         </div>
169 |       </div>
170 |     );
171 |   },
172 |   () => true
173 | );
174 | 
175 | Stats.displayName = "Stats";
176 | 
177 | export default Stats;
178 | 


--------------------------------------------------------------------------------
/components/Session/Agent/waveform.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef } from "react";
  2 | import { useVoiceClientMediaTrack } from "realtime-ai-react";
  3 | 
  4 | const WaveForm: React.FC = React.memo(() => {
  5 |   const canvasRef = useRef<HTMLCanvasElement>(null);
  6 | 
  7 |   const track: MediaStreamTrack | null = useVoiceClientMediaTrack(
  8 |     "audio",
  9 |     "bot"
 10 |   );
 11 | 
 12 |   useEffect(() => {
 13 |     if (!track || !canvasRef.current) return;
 14 | 
 15 |     const canvas = canvasRef.current;
 16 | 
 17 |     const scaleFactor = 2;
 18 | 
 19 |     // Make canvas fill the width and height of its container
 20 |     const resizeCanvas = () => {
 21 |       const parentElement = canvas.parentElement;
 22 | 
 23 |       const containerWidth = parentElement ? parentElement.clientWidth : 300; // Default to 300px width
 24 |       const containerHeight = parentElement ? parentElement.clientHeight : 150; // Default to 150px height
 25 | 
 26 |       canvas.width = containerWidth * scaleFactor;
 27 |       canvas.height = containerHeight * scaleFactor;
 28 | 
 29 |       canvas.style.width = `${containerWidth}px`;
 30 |       canvas.style.height = `${containerHeight}px`;
 31 | 
 32 |       canvasCtx.lineCap = "round";
 33 |       canvasCtx.scale(scaleFactor, scaleFactor);
 34 |     };
 35 | 
 36 |     const canvasCtx = canvas.getContext("2d")!;
 37 |     resizeCanvas();
 38 | 
 39 |     const audioContext = new AudioContext();
 40 |     const source = audioContext.createMediaStreamSource(
 41 |       new MediaStream([track])
 42 |     );
 43 |     const analyser = audioContext.createAnalyser();
 44 | 
 45 |     analyser.fftSize = 1024;
 46 | 
 47 |     source.connect(analyser);
 48 | 
 49 |     const frequencyData = new Uint8Array(analyser.frequencyBinCount);
 50 | 
 51 |     canvasCtx.lineCap = "round";
 52 | 
 53 |     const bands = [
 54 |       { startFreq: 85, endFreq: 255, smoothValue: 0 }, // Covers fundamental frequencies for male and female voices
 55 |       { startFreq: 255, endFreq: 500, smoothValue: 0 }, // Lower formants and some harmonics
 56 |       { startFreq: 500, endFreq: 2000, smoothValue: 0 }, // Vowel formants and key consonant frequencies
 57 |       { startFreq: 2000, endFreq: 4000, smoothValue: 0 }, // Higher formants, "clarity" of speech
 58 |       { startFreq: 4000, endFreq: 8000, smoothValue: 0 }, // Sibilance and high-frequency consonants
 59 |     ];
 60 | 
 61 |     const barWidth = 30; // Fixed bar width
 62 |     const barGap = 12; // Fixed gap between bars
 63 |     const maxBarHeight = 160; // Set a maximum height for the bars
 64 | 
 65 |     const getFrequencyBinIndex = (frequency: number) => {
 66 |       const nyquist = audioContext.sampleRate / 2;
 67 |       return Math.round(
 68 |         (frequency / nyquist) * (analyser.frequencyBinCount - 1)
 69 |       );
 70 |     };
 71 | 
 72 |     function drawSpectrum() {
 73 |       analyser.getByteFrequencyData(frequencyData);
 74 |       canvasCtx.clearRect(
 75 |         0,
 76 |         0,
 77 |         canvas.width / scaleFactor,
 78 |         canvas.height / scaleFactor
 79 |       );
 80 | 
 81 |       let isActive = false;
 82 | 
 83 |       const totalBarsWidth =
 84 |         bands.length * barWidth + (bands.length - 1) * barGap;
 85 |       const startX = (canvas.width / scaleFactor - totalBarsWidth) / 2; // Center bars
 86 | 
 87 |       const adjustedCircleRadius = barWidth / 2; // Fixed radius for reset circles
 88 | 
 89 |       bands.forEach((band, i) => {
 90 |         const startIndex = getFrequencyBinIndex(band.startFreq);
 91 |         const endIndex = getFrequencyBinIndex(band.endFreq);
 92 |         const bandData = frequencyData.slice(startIndex, endIndex);
 93 |         const bandValue =
 94 |           bandData.reduce((acc, val) => acc + val, 0) / bandData.length;
 95 | 
 96 |         const smoothingFactor = 0.2;
 97 | 
 98 |         if (bandValue < 1) {
 99 |           band.smoothValue = Math.max(
100 |             band.smoothValue - smoothingFactor * 5,
101 |             0
102 |           );
103 |         } else {
104 |           band.smoothValue =
105 |             band.smoothValue + (bandValue - band.smoothValue) * smoothingFactor;
106 |           isActive = true;
107 |         }
108 | 
109 |         const x = startX + i * (barWidth + barGap);
110 |         // Calculate bar height with a maximum cap
111 |         const barHeight = Math.min(
112 |           (band.smoothValue / 255) * maxBarHeight,
113 |           maxBarHeight
114 |         );
115 | 
116 |         const yTop = Math.max(
117 |           canvas.height / scaleFactor / 2 - barHeight / 2,
118 |           adjustedCircleRadius
119 |         );
120 |         const yBottom = Math.min(
121 |           canvas.height / scaleFactor / 2 + barHeight / 2,
122 |           canvas.height / scaleFactor - adjustedCircleRadius
123 |         );
124 | 
125 |         if (band.smoothValue > 0) {
126 |           canvasCtx.beginPath();
127 |           canvasCtx.moveTo(x + barWidth / 2, yTop);
128 |           canvasCtx.lineTo(x + barWidth / 2, yBottom);
129 |           canvasCtx.lineWidth = barWidth;
130 |           canvasCtx.strokeStyle = "white";
131 |           canvasCtx.stroke();
132 |         } else {
133 |           canvasCtx.beginPath();
134 |           canvasCtx.arc(
135 |             x + barWidth / 2,
136 |             canvas.height / scaleFactor / 2,
137 |             adjustedCircleRadius,
138 |             0,
139 |             2 * Math.PI
140 |           );
141 |           canvasCtx.fillStyle = "white";
142 |           canvasCtx.fill();
143 |           canvasCtx.closePath();
144 |         }
145 |       });
146 | 
147 |       if (!isActive) {
148 |         drawInactiveCircles(adjustedCircleRadius);
149 |       }
150 | 
151 |       requestAnimationFrame(drawSpectrum);
152 |     }
153 | 
154 |     function drawInactiveCircles(circleRadius: number) {
155 |       const totalBarsWidth =
156 |         bands.length * barWidth + (bands.length - 1) * barGap;
157 |       const startX = (canvas.width / scaleFactor - totalBarsWidth) / 2;
158 |       const y = canvas.height / scaleFactor / 2;
159 | 
160 |       bands.forEach((_, i) => {
161 |         const x = startX + i * (barWidth + barGap);
162 | 
163 |         canvasCtx.beginPath();
164 |         canvasCtx.arc(x + barWidth / 2, y, circleRadius, 0, 2 * Math.PI);
165 |         canvasCtx.fillStyle = "white";
166 |         canvasCtx.fill();
167 |         canvasCtx.closePath();
168 |       });
169 |     }
170 | 
171 |     drawSpectrum();
172 | 
173 |     // Handle resizing
174 |     window.addEventListener("resize", resizeCanvas);
175 | 
176 |     return () => {
177 |       audioContext.close();
178 |       window.removeEventListener("resize", resizeCanvas);
179 |     };
180 |   }, [track]);
181 | 
182 |   return (
183 |     <canvas
184 |       ref={canvasRef}
185 |       style={{
186 |         display: "block",
187 |         width: "100%",
188 |         height: "100%",
189 |       }}
190 |     />
191 |   );
192 | });
193 | 
194 | WaveForm.displayName = "WaveForm";
195 | 
196 | export default WaveForm;
197 | 


--------------------------------------------------------------------------------
/components/Session/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useEffect, useRef, useState } from "react";
  2 | import { createPortal } from "react-dom";
  3 | import { LineChart, LogOut, Settings, StopCircle } from "lucide-react";
  4 | import { PipecatMetrics, TransportState, VoiceEvent } from "realtime-ai";
  5 | import { useVoiceClient, useVoiceClientEvent } from "realtime-ai-react";
  6 | 
  7 | import StatsAggregator from "../../utils/stats_aggregator";
  8 | import { Configure } from "../Setup";
  9 | import { Button } from "../ui/button";
 10 | import * as Card from "../ui/card";
 11 | import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 12 | 
 13 | import Agent from "./Agent";
 14 | import Stats from "./Stats";
 15 | import UserMicBubble from "./UserMicBubble";
 16 | 
 17 | let stats_aggregator: StatsAggregator;
 18 | 
 19 | interface SessionProps {
 20 |   state: TransportState;
 21 |   onLeave: () => void;
 22 |   openMic?: boolean;
 23 |   startAudioOff?: boolean;
 24 | }
 25 | 
 26 | export const Session = React.memo(
 27 |   ({ state, onLeave, startAudioOff = false }: SessionProps) => {
 28 |     const voiceClient = useVoiceClient()!;
 29 |     const [hasStarted, setHasStarted] = useState<boolean>(false);
 30 |     const [showDevices, setShowDevices] = useState<boolean>(false);
 31 |     const [showStats, setShowStats] = useState<boolean>(false);
 32 |     const [muted, setMuted] = useState(startAudioOff);
 33 |     const modalRef = useRef<HTMLDialogElement>(null);
 34 | 
 35 |     // ---- Voice Client Events
 36 | 
 37 |     useVoiceClientEvent(
 38 |       VoiceEvent.Metrics,
 39 |       useCallback((metrics: PipecatMetrics) => {
 40 |         metrics?.ttfb?.map((m: { processor: string; value: number }) => {
 41 |           stats_aggregator.addStat([m.processor, "ttfb", m.value, Date.now()]);
 42 |         });
 43 |       }, [])
 44 |     );
 45 | 
 46 |     useVoiceClientEvent(
 47 |       VoiceEvent.BotStoppedSpeaking,
 48 |       useCallback(() => {
 49 |         if (hasStarted) return;
 50 |         setHasStarted(true);
 51 |       }, [hasStarted])
 52 |     );
 53 | 
 54 |     // ---- Effects
 55 | 
 56 |     useEffect(() => {
 57 |       // Reset started state on mount
 58 |       setHasStarted(false);
 59 |     }, []);
 60 | 
 61 |     useEffect(() => {
 62 |       // If we joined unmuted, enable the mic once in ready state
 63 |       if (!hasStarted || startAudioOff) return;
 64 |       voiceClient.enableMic(true);
 65 |     }, [voiceClient, startAudioOff, hasStarted]);
 66 | 
 67 |     useEffect(() => {
 68 |       // Create new stats aggregator on mount (removes stats from previous session)
 69 |       stats_aggregator = new StatsAggregator();
 70 |     }, []);
 71 | 
 72 |     useEffect(() => {
 73 |       // Leave the meeting if there is an error
 74 |       if (state === "error") {
 75 |         onLeave();
 76 |       }
 77 |     }, [state, onLeave]);
 78 | 
 79 |     useEffect(() => {
 80 |       // Modal effect
 81 |       // Note: backdrop doesn't currently work with dialog open, so we use setModal instead
 82 |       const current = modalRef.current;
 83 | 
 84 |       if (current && showDevices) {
 85 |         current.inert = true;
 86 |         current.showModal();
 87 |         current.inert = false;
 88 |       }
 89 |       return () => current?.close();
 90 |     }, [showDevices]);
 91 | 
 92 |     function toggleMute() {
 93 |       voiceClient.enableMic(muted);
 94 |       setMuted(!muted);
 95 |     }
 96 | 
 97 |     return (
 98 |       <>
 99 |         <dialog ref={modalRef}>
100 |           <Card.Card className="w-svw max-w-full md:max-w-md lg:max-w-lg">
101 |             <Card.CardHeader>
102 |               <Card.CardTitle>Configuration</Card.CardTitle>
103 |             </Card.CardHeader>
104 |             <Card.CardContent>
105 |               <Configure state={state} inSession={true} />
106 |             </Card.CardContent>
107 |             <Card.CardFooter>
108 |               <Button onClick={() => setShowDevices(false)}>Close</Button>
109 |             </Card.CardFooter>
110 |           </Card.Card>
111 |         </dialog>
112 | 
113 |         {showStats &&
114 |           createPortal(
115 |             <Stats
116 |               statsAggregator={stats_aggregator}
117 |               handleClose={() => setShowStats(false)}
118 |             />,
119 |             document.getElementById("tray")!
120 |           )}
121 | 
122 |         <div className="flex-1 flex flex-col items-center justify-center w-full">
123 |           <Card.Card
124 |             fullWidthMobile={false}
125 |             className="w-full max-w-[320px] sm:max-w-[420px] mt-auto shadow-long"
126 |           >
127 |             <Agent
128 |               isReady={state === "ready"}
129 |               statsAggregator={stats_aggregator}
130 |             />
131 |           </Card.Card>
132 |           <UserMicBubble
133 |             active={hasStarted}
134 |             muted={muted}
135 |             handleMute={() => toggleMute()}
136 |           />
137 |         </div>
138 | 
139 |         <footer className="w-full flex flex-row mt-auto self-end md:w-auto">
140 |           <div className="flex flex-row justify-between gap-3 w-full md:w-auto">
141 |             <Tooltip>
142 |               <TooltipContent>Interrupt bot</TooltipContent>
143 |               <TooltipTrigger asChild>
144 |                 <Button
145 |                   variant="ghost"
146 |                   size="icon"
147 |                   onClick={() => {
148 |                     voiceClient.action({
149 |                       service: "tts",
150 |                       action: "interrupt",
151 |                       arguments: [],
152 |                     });
153 |                   }}
154 |                 >
155 |                   <StopCircle />
156 |                 </Button>
157 |               </TooltipTrigger>
158 |             </Tooltip>
159 | 
160 |             <Tooltip>
161 |               <TooltipContent>Show bot statistics panel</TooltipContent>
162 |               <TooltipTrigger asChild>
163 |                 <Button
164 |                   variant={showStats ? "light" : "ghost"}
165 |                   size="icon"
166 |                   onClick={() => setShowStats(!showStats)}
167 |                 >
168 |                   <LineChart />
169 |                 </Button>
170 |               </TooltipTrigger>
171 |             </Tooltip>
172 |             <Tooltip>
173 |               <TooltipContent>Configure</TooltipContent>
174 |               <TooltipTrigger asChild>
175 |                 <Button
176 |                   variant="ghost"
177 |                   size="icon"
178 |                   onClick={() => setShowDevices(true)}
179 |                 >
180 |                   <Settings />
181 |                 </Button>
182 |               </TooltipTrigger>
183 |             </Tooltip>
184 |             <Button onClick={() => onLeave()} className="ml-auto">
185 |               <LogOut size={16} />
186 |               End
187 |             </Button>
188 |           </div>
189 |         </footer>
190 |       </>
191 |     );
192 |   },
193 |   (p, n) => p.state === n.state
194 | );
195 | 
196 | Session.displayName = "Session";
197 | 
198 | export default Session;
199 | 


--------------------------------------------------------------------------------
/public/logo-together.svg:
--------------------------------------------------------------------------------
 1 | <svg width="200" height="60" viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect width="200" height="60" fill="transparent"/>
 3 | <g clip-path="url(#clip0_65_228)">
 4 | <path d="M3.9517 21.6833H0V18.4618H3.9517V12.3195H7.47388V18.4618H13.0149V21.6833H7.47388V34.6123C7.47388 35.5286 7.64569 36.1872 7.98932 36.5881C8.36158 36.9603 8.99157 37.1464 9.87926 37.1465H13.7021V40.368H9.66449C7.60273 40.368 6.128 39.9098 5.24031 38.9934C4.38123 38.0771 3.95169 36.631 3.9517 34.6551V21.6833Z" fill="black"/>
 5 | <path d="M25.0502 40.6256C23.0685 40.6604 21.1126 40.1714 19.3803 39.2082C17.7604 38.276 16.4356 36.9065 15.5575 35.2566C14.6411 33.5671 14.183 31.6199 14.183 29.4149C14.183 27.2099 14.6411 25.2627 15.5575 23.5732C16.4356 21.9233 17.7604 20.5538 19.3803 19.6215C21.1126 18.6583 23.0685 18.1694 25.0502 18.2041C27.1692 18.2041 29.0448 18.6765 30.6771 19.6215C32.3157 20.5437 33.6569 21.9147 34.5428 23.5732C35.4592 25.2627 35.9174 27.21 35.9174 29.4149C35.9174 31.6198 35.4592 33.567 34.5428 35.2565C33.6569 36.915 32.3157 38.286 30.6771 39.2082C29.0449 40.1533 27.1693 40.6257 25.0502 40.6256ZM25.0502 37.4902C26.3831 37.5174 27.6956 37.1594 28.8301 36.4592C29.9493 35.7693 30.8445 34.7696 31.4072 33.5813C32.024 32.2803 32.3327 30.8546 32.3092 29.4149C32.3327 27.9752 32.024 26.5495 31.4072 25.2484C30.8445 24.0601 29.9493 23.0605 28.8301 22.3705C27.6956 21.6703 26.3831 21.3124 25.0502 21.3397C23.7042 21.3163 22.379 21.6736 21.2273 22.3705C20.1275 23.071 19.2488 24.0688 18.6931 25.2484C18.0763 26.5495 17.7676 27.9752 17.791 29.4149C17.7677 30.8546 18.0763 32.2803 18.6931 33.5813C19.2488 34.7609 20.1275 35.7588 21.2273 36.4592C22.379 37.1562 23.7042 37.5135 25.0502 37.4902Z" fill="black"/>
 6 | <path d="M60.0393 18.4618V39.2941C60.0393 45.909 56.4169 49.2164 49.1721 49.2164C46.3373 49.2164 44.0178 48.5721 42.2137 47.2834C40.4383 45.9949 39.4075 44.1622 39.1211 41.7855H42.7293C42.8526 42.4387 43.1112 43.0589 43.4884 43.6063C43.8657 44.1537 44.3533 44.6162 44.9198 44.9639C46.0939 45.7085 47.5973 46.0808 49.4299 46.0807C54.1547 46.0807 56.5171 43.7756 56.5172 39.1654V36.5881C54.9423 39.2798 52.4367 40.6256 49.0004 40.6256C47.0978 40.6579 45.219 40.1993 43.5452 39.2941C41.9547 38.3904 40.6575 37.0485 39.8084 35.4283C38.9206 33.7388 38.4767 31.7344 38.4768 29.4149C38.4768 27.2099 38.9207 25.2627 39.8084 23.5732C40.6787 21.9318 41.9871 20.5639 43.5883 19.6215C45.2301 18.6663 47.1011 18.1763 49.0004 18.2041C50.7757 18.2041 52.2934 18.562 53.5534 19.2779C54.807 19.9587 55.8364 20.9881 56.5172 22.2417L56.9897 18.4618L60.0393 18.4618ZM49.344 37.4902C50.6572 37.5142 51.9512 37.1721 53.0809 36.5022C54.1919 35.8213 55.0859 34.8379 55.6582 33.6672C56.2749 32.3661 56.5836 30.9405 56.5602 29.5008C56.5866 28.047 56.2779 26.6067 55.6582 25.2914C55.1048 24.0856 54.2084 23.0697 53.0809 22.3705C51.9606 21.6742 50.6629 21.3162 49.344 21.3397C47.1677 21.3397 45.4066 22.0985 44.0608 23.6162C42.7435 25.1052 42.0849 27.0381 42.0848 29.4149C42.0848 31.7917 42.7435 33.7389 44.0608 35.2565C45.4066 36.7456 47.1677 37.4901 49.344 37.4902Z" fill="black"/>
 7 | <path d="M63.3579 29.4149C63.3579 27.1813 63.7874 25.2197 64.6464 23.5303C65.4778 21.9003 66.76 20.5435 68.3405 19.6215C69.9795 18.6594 71.8524 18.1688 73.7526 18.204C75.757 18.204 77.5324 18.6193 79.0788 19.4497C80.6191 20.2741 81.8873 21.5274 82.7298 23.0578C83.6174 24.6327 84.0899 26.4797 84.1473 28.5987C84.1473 28.9137 84.1186 29.4148 84.0614 30.102H67.0518V30.4028C67.1091 32.5504 67.7677 34.2685 69.0276 35.5572C70.2876 36.8459 71.9342 37.4902 73.9673 37.4901C75.5422 37.4901 76.8738 37.1035 77.962 36.3303C79.0778 35.5301 79.8702 34.3569 80.1956 33.0229H83.7606C83.3756 35.1807 82.2332 37.1302 80.5391 38.5209C78.821 39.924 76.7163 40.6256 74.2249 40.6256C72.0486 40.6256 70.1444 40.1675 68.5122 39.2512C66.8923 38.3189 65.5675 36.9494 64.6895 35.2994C63.8017 33.5813 63.3578 31.6198 63.3579 29.4149ZM80.4962 27.1813C80.3243 25.32 79.6228 23.8739 78.3915 22.843C77.1889 21.8121 75.6568 21.2967 73.7954 21.2967C72.1832 21.2786 70.6217 21.8604 69.4143 22.9289C68.7937 23.4612 68.2844 24.1109 67.9158 24.8407C67.5472 25.5705 67.3266 26.3659 67.2665 27.1813L80.4962 27.1813Z" fill="black"/>
 8 | <path d="M88.6688 21.6833H84.7172V18.4618H88.6688V12.3195H92.1909V18.4618H97.7319V21.6833H92.1909V34.6123C92.1909 35.5286 92.3628 36.1872 92.7065 36.5881C93.0787 36.9603 93.7087 37.1464 94.5965 37.1465H98.4192V40.368H94.3817C92.3198 40.368 90.8451 39.9098 89.9575 38.9934C89.0983 38.0771 88.6687 36.631 88.6688 34.6551V21.6833Z" fill="black"/>
 9 | <path d="M110.957 18.2041C113.62 18.2041 115.768 19.0059 117.4 20.6094C119.032 22.213 119.848 24.733 119.848 28.1692V40.368H116.326V28.384C116.326 26.1218 115.811 24.4037 114.78 23.2296C113.749 22.0269 112.274 21.4256 110.356 21.4256C108.322 21.4256 106.705 22.1415 105.502 23.5732C104.328 25.005 103.741 26.9522 103.741 29.4149V40.368H100.219V10.3007H103.741V22.0699C104.452 20.9287 105.424 19.972 106.576 19.2779C107.778 18.562 109.239 18.2041 110.957 18.2041Z" fill="black"/>
10 | <path d="M122.858 29.4149C122.858 27.1813 123.288 25.2197 124.147 23.5303C124.978 21.9003 126.261 20.5435 127.841 19.6215C129.48 18.6594 131.353 18.1688 133.253 18.204C135.257 18.204 137.033 18.6193 138.579 19.4497C140.12 20.2741 141.388 21.5274 142.23 23.0578C143.118 24.6327 143.59 26.4797 143.648 28.5987C143.648 28.9137 143.619 29.4148 143.562 30.102H126.552V30.4028C126.61 32.5504 127.268 34.2685 128.528 35.5572C129.788 36.8459 131.435 37.4902 133.468 37.4901C135.043 37.4901 136.374 37.1035 137.463 36.3303C138.578 35.5302 139.371 34.3569 139.696 33.0229H143.261C142.876 35.1807 141.734 37.1302 140.04 38.5209C138.322 39.924 136.217 40.6256 133.725 40.6256C131.549 40.6256 129.645 40.1675 128.013 39.2512C126.393 38.3189 125.068 36.9494 124.19 35.2994C123.302 33.5813 122.858 31.6198 122.858 29.4149ZM139.997 27.1813C139.825 25.32 139.123 23.8739 137.892 22.843C136.689 21.8121 135.157 21.2967 133.296 21.2967C131.684 21.2786 130.122 21.8604 128.915 22.9289C128.294 23.4612 127.785 24.1109 127.416 24.8407C127.048 25.5704 126.827 26.3659 126.767 27.1813H139.997Z" fill="black"/>
11 | <path d="M158.085 18.4618V21.898H156.324C154.234 21.898 152.731 22.5996 151.814 24.0028C150.927 25.4059 150.483 27.1384 150.483 29.2002V40.368H146.96V18.4618H150.01L150.483 21.7692C151.095 20.7838 151.935 19.9591 152.931 19.3638C153.933 18.7625 155.322 18.4618 157.098 18.4618H158.085Z" fill="black"/>
12 | <path d="M193.961 37.1466V40.3681H192.027C190.624 40.3681 189.621 40.0817 189.02 39.5089C188.419 38.9362 188.105 38.0914 188.076 36.9746C186.386 39.4087 183.938 40.6257 180.731 40.6257C178.297 40.6257 176.335 40.053 174.846 38.9076C173.386 37.7623 172.655 36.2016 172.656 34.2257C172.656 32.0208 173.4 30.3313 174.889 29.1572C176.407 27.9831 178.597 27.3961 181.461 27.3961H187.904V25.8927C187.904 24.461 187.417 23.3442 186.444 22.5424C185.499 21.7406 184.167 21.3397 182.449 21.3397C180.931 21.3397 179.671 21.6833 178.669 22.3706C178.205 22.6705 177.806 23.0609 177.496 23.5184C177.186 23.976 176.971 24.4913 176.865 25.0337H173.343C173.6 22.886 174.545 21.2108 176.178 20.0081C177.839 18.8055 179.986 18.2041 182.621 18.2041C185.427 18.2041 187.589 18.8914 189.106 20.2659C190.652 21.6117 191.426 23.559 191.427 26.1075V35.5572C191.427 36.6167 191.914 37.1465 192.887 37.1465L193.961 37.1466ZM187.904 30.3599H181.117C177.853 30.3599 176.221 31.5769 176.221 34.0109C176.207 34.5193 176.317 35.0235 176.542 35.4799C176.766 35.9363 177.098 36.3313 177.509 36.631C178.368 37.2897 179.528 37.6191 180.988 37.6191C183.136 37.6191 184.826 37.0607 186.057 35.9439C187.288 34.7983 187.904 33.2949 187.904 31.4337V30.3599Z" fill="black"/>
13 | <path d="M197.723 9.99997C198.025 9.99005 198.325 10.0421 198.606 10.153C198.887 10.2639 199.142 10.4312 199.355 10.6446C199.568 10.858 199.736 11.113 199.847 11.3937C199.958 11.6743 200.01 11.9748 200 12.2765C200.006 12.5792 199.951 12.8799 199.839 13.1612C199.727 13.4425 199.561 13.6987 199.349 13.9148C199.137 14.1309 198.884 14.3026 198.605 14.4197C198.325 14.5369 198.026 14.5973 197.723 14.5973C197.42 14.5973 197.121 14.5369 196.841 14.4197C196.562 14.3026 196.309 14.1309 196.097 13.9148C195.885 13.6987 195.719 13.4425 195.607 13.1612C195.495 12.8799 195.44 12.5792 195.446 12.2765C195.436 11.9748 195.488 11.6744 195.599 11.3937C195.71 11.113 195.878 10.858 196.091 10.6447C196.304 10.4313 196.559 10.2639 196.84 10.153C197.121 10.0422 197.421 9.99006 197.723 9.99997ZM195.962 18.4618H199.484V40.368H195.962V18.4618Z" fill="black"/>
14 | <path d="M165.769 37.0325C165.777 37.702 165.586 38.3587 165.22 38.9192C164.853 39.4798 164.329 39.9189 163.713 40.1807C163.097 40.4424 162.417 40.5151 161.759 40.3895C161.101 40.2638 160.496 39.9455 160.02 39.475C159.543 39.0045 159.218 38.403 159.084 37.7469C158.951 37.0909 159.015 36.41 159.269 35.7907C159.524 35.1714 159.956 34.6416 160.513 34.2688C161.069 33.896 161.723 33.697 162.393 33.697C163.283 33.6916 164.138 34.04 164.771 34.6655C165.405 35.2911 165.763 36.1425 165.769 37.0325Z" fill="#0F6FFF"/>
15 | </g>
16 | <defs>
17 | <clipPath id="clip0_65_228">
18 | <rect width="200" height="39.2164" fill="white" transform="translate(0 10)"/>
19 | </clipPath>
20 | </defs>
21 | </svg>
22 | 


--------------------------------------------------------------------------------