├── .eslintrc.json
├── .env.example
├── app
    ├── favicon.ico
    ├── page.tsx
    ├── layout.tsx
    ├── api
    │   ├── authenticate
    │   │   └── route.ts
    │   └── validate-statement
    │   │   └── route.ts
    ├── globals.css
    └── context
    │   ├── DeepgramContextProvider.tsx
    │   └── MicrophoneContextProvider.tsx
├── declarations.d.ts
├── postcss.config.js
├── next.config.js
├── utils
    ├── hooks.ts
    └── schemas.ts
├── lib
    └── utils.ts
├── components
    ├── tooltip-trigger-context.tsx
    ├── loading-indicator.tsx
    ├── ui
    │   ├── label.tsx
    │   ├── input.tsx
    │   ├── sonner.tsx
    │   ├── badge.tsx
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── dialog.tsx
    │   └── select.tsx
    ├── tooltip-root.tsx
    ├── settings-modal.tsx
    ├── flowing-transcript.tsx
    ├── icons.tsx
    └── app-layout.tsx
├── components.json
├── .gitignore
├── tsconfig.json
├── package.json
├── middleware.ts
├── README.md
└── tailwind.config.ts


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | DEEPGRAM_API_KEY=
2 | OPENAI_API_KEY=
3 | PERPLEXITY_API_KEY=
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-facts/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/declarations.d.ts:
--------------------------------------------------------------------------------
1 | interface Window {
2 |   webkitAudioContext: typeof AudioContext;
3 | }
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | 
3 | import AppLayout from "@/components/app-layout";
4 | 
5 | export default function Home() {
6 |   return <AppLayout />;
7 | }
8 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | 
3 | const nextConfig = {
4 |   reactStrictMode: false,
5 | };
6 | 
7 | module.exports = nextConfig;
8 | 


--------------------------------------------------------------------------------
/utils/hooks.ts:
--------------------------------------------------------------------------------
1 | export function useHasHover() {
2 |   try {
3 |     return matchMedia('(hover: hover)').matches
4 |   } catch {
5 |     // Assume that if browser too old to support matchMedia it's likely not a touch device
6 |     return true
7 |   }
8 | }


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { clsx, type ClassValue } from "clsx"
 2 | import { twMerge } from "tailwind-merge"
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs))
 6 | }
 7 | 
 8 | export const splitIntoStatements = (text: string): string[] => {
 9 |   return text.match(/[^.!?]+[.!?]+/g) || [];
10 | };
11 | 


--------------------------------------------------------------------------------
/components/tooltip-trigger-context.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { createContext } from 'react';
 4 | 
 5 | type TooltipTriggerContextType = {
 6 |   open: boolean;
 7 |   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 8 | };
 9 | 
10 | export const TooltipTriggerContext = createContext<TooltipTriggerContextType>({
11 |   open: false,
12 |   setOpen: () => {}, // eslint-disable-line
13 | });


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/components/loading-indicator.tsx:
--------------------------------------------------------------------------------
 1 | export function TalkingIndicator() {
 2 |   return (
 3 |     <div className="flex items-center h-full mt-1 space-x-2 rounded-full py-2 px-4 w-fit animate-fade-in-fade-out">
 4 |       <div className="w-2 h-2 bg-gray-300 dark:bg-gray-300 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
 5 |       <div className="w-2 h-2 bg-gray-300 dark:bg-gray-300 rounded-full animate-bounce" style={{ animationDelay: '200ms' }} />
 6 |       <div className="w-2 h-2 bg-gray-300 dark:bg-gray-300 rounded-full animate-bounce" style={{ animationDelay: '400ms' }} />
 7 |       <span className="sr-only">User is typing</span>
 8 |     </div>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/.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 | 
38 | 
39 | # Contentlayer
40 | .contentlayer
41 | 
42 | # vscode
43 | .vscode
44 | 
45 | # container
46 | .devcontainer
47 | 
48 | # pycharm
49 | .idea


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


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 6 |   ({ className, type, ...props }, ref) => {
 7 |     return (
 8 |       <input
 9 |         type={type}
10 |         className={cn(
11 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Input.displayName = "Input"
21 | 
22 | export { Input }
23 | 


--------------------------------------------------------------------------------
/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useTheme } from "next-themes"
 4 | import { Toaster as Sonner } from "sonner"
 5 | 
 6 | type ToasterProps = React.ComponentProps<typeof Sonner>
 7 | 
 8 | const Toaster = ({ ...props }: ToasterProps) => {
 9 |   const { theme = "system" } = useTheme()
10 | 
11 |   return (
12 |     <Sonner
13 |       theme={theme as ToasterProps["theme"]}
14 |       className="toaster group"
15 |       toastOptions={{
16 |         classNames: {
17 |           toast:
18 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
19 |           description: "group-[.toast]:text-muted-foreground",
20 |           actionButton:
21 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
22 |           cancelButton:
23 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
24 |         },
25 |       }}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | export { Toaster }
32 | 


--------------------------------------------------------------------------------
/utils/schemas.ts:
--------------------------------------------------------------------------------
 1 | import { z } from "zod";
 2 | 
 3 | export const validatedStatementSchema = z.object({
 4 |   reasoning: z
 5 |     .string()
 6 |     .describe(
 7 |       "Explain your reasoning for classifying the statement as true, dubious or obviously-fake. If the statement is not-checkable, return null.",
 8 |     )
 9 |     .nullable(),
10 |   accuracy: z
11 |     .enum(["dubious", "obviously-fake", "true"])
12 |     .nullable()
13 |     .describe("If the statement is not-checkable, return null"),
14 | });
15 | 
16 | export const validatedStatementResultSchema = validatedStatementSchema.extend({
17 |   statement: z.string(),
18 |   type: z
19 |     .enum(["checkable", "non-checkable"])
20 |     .describe(
21 |       "Whether the statement needs fact-checking. If the statement is a greeting, random talking or other non-checkable phrase, set this to 'non-checkable'.",
22 |     ),
23 | });
24 | 
25 | export type ValidatedStatement = z.infer<typeof validatedStatementResultSchema>;
26 | 
27 | export interface Statement {
28 |   text: string;
29 |   timestamp: number;
30 |   index: number;
31 |   processed: boolean;
32 |   result?: ValidatedStatement;
33 | }
34 | 


--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ai-facts",
 3 |   "version": "1.0.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 |     "@ai-sdk/openai": "^1.0.6",
13 |     "@deepgram/sdk": "^3.3.0",
14 |     "@radix-ui/react-dialog": "^1.1.2",
15 |     "@radix-ui/react-label": "^2.1.0",
16 |     "@radix-ui/react-select": "^2.1.2",
17 |     "@radix-ui/react-slot": "^1.1.0",
18 |     "@radix-ui/react-tooltip": "^1.1.4",
19 |     "ai": "^4.0.10",
20 |     "class-variance-authority": "^0.7.1",
21 |     "classnames": "^2.5.1",
22 |     "clsx": "^2.1.1",
23 |     "geist": "^1.3.1",
24 |     "lucide-react": "^0.464.0",
25 |     "motion": "^11.13.1",
26 |     "next": "^14.1.3",
27 |     "next-themes": "^0.4.3",
28 |     "react": "^18",
29 |     "react-device-detect": "^2.2.3",
30 |     "react-dom": "^18",
31 |     "sonner": "^1.7.0",
32 |     "tailwind-merge": "^2.5.5",
33 |     "tailwindcss-animate": "^1.0.7",
34 |     "zod": "^3.23.8",
35 |     "zod-to-json-schema": "^3.23.5"
36 |   },
37 |   "devDependencies": {
38 |     "@types/node": "^20",
39 |     "@types/react": "^18",
40 |     "@types/react-dom": "^18",
41 |     "autoprefixer": "^10.0.1",
42 |     "eslint": "^8",
43 |     "eslint-config-next": "14.0.1",
44 |     "postcss": "^8",
45 |     "pretty-quick": "^4.0.0",
46 |     "tailwindcss": "^3.4.1",
47 |     "typescript": "^5"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import classNames from "classnames";
 2 | import { Toaster } from "@/components/ui/sonner";
 3 | import { GeistMono } from "geist/font/mono";
 4 | import { GeistSans } from "geist/font/sans";
 5 | 
 6 | import { DeepgramContextProvider } from "./context/DeepgramContextProvider";
 7 | import { MicrophoneContextProvider } from "./context/MicrophoneContextProvider";
 8 | 
 9 | import "./globals.css";
10 | 
11 | import type { Metadata, Viewport } from "next";
12 | 
13 | export const viewport: Viewport = {
14 |   themeColor: "#000000",
15 |   initialScale: 1,
16 |   width: "device-width",
17 |   // maximumScale: 1, hitting accessability
18 | };
19 | 
20 | export const metadata: Metadata = {
21 |   metadataBase: new URL("https://ai-facts.vercel.app"),
22 |   title: "AI Facts",
23 |   description: `Realtime fact checking with Deepgram, Perplexity, OpenAI, and the AI SDK`,
24 |   robots: {
25 |     index: false,
26 |     follow: false,
27 |   },
28 | };
29 | 
30 | export default function RootLayout({
31 |   children,
32 | }: {
33 |   children: React.ReactNode;
34 | }) {
35 |   return (
36 |     <html lang="en" className="h-dvh">
37 |       <body
38 |         className={`h-full ${classNames(
39 |           GeistMono.className,
40 |           GeistSans.className,
41 |         )}`}
42 |       >
43 |         <MicrophoneContextProvider>
44 |           <DeepgramContextProvider>{children}</DeepgramContextProvider>
45 |         </MicrophoneContextProvider>
46 |         <Toaster />
47 |       </body>
48 |     </html>
49 |   );
50 | }
51 | 


--------------------------------------------------------------------------------
/components/tooltip-root.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { TooltipTriggerContext } from "./tooltip-trigger-context";
 3 | import * as Tooltip from '@radix-ui/react-tooltip'
 4 | import { useHasHover } from "@/utils/hooks";
 5 | 
 6 | 
 7 | export const TooltipRoot: React.FC<Tooltip.TooltipProps> = ({ children, ...props }) => {
 8 |   const [open, setOpen] = React.useState<boolean>(props.defaultOpen ?? false);
 9 | 
10 |   // we only want to enable the "click to open" functionality on mobile
11 |   const hasHover = useHasHover();
12 | 
13 |   return (
14 |     <Tooltip.Root
15 |       delayDuration={hasHover ? props.delayDuration : 0}
16 |       onOpenChange={(e) => {
17 |         setOpen(e);
18 |       }}
19 |       open={open}
20 |     >
21 |       <TooltipTriggerContext.Provider value={{ open, setOpen }}>
22 |         {children}
23 |       </TooltipTriggerContext.Provider>
24 |     </Tooltip.Root>
25 |   );
26 | };
27 | 
28 | export const TooltipTrigger = React.forwardRef<
29 |   React.ElementRef<typeof Tooltip.Trigger>,
30 |   React.ComponentPropsWithoutRef<typeof Tooltip.Trigger>
31 | >(({ children, ...props }, ref) => {
32 |   const hasHover = useHasHover();
33 |   const { setOpen } = React.useContext(TooltipTriggerContext);
34 | 
35 |   return (
36 |     <Tooltip.Trigger
37 |       ref={ref}
38 |       {...props}
39 |       onClick={(e) => {
40 |         !hasHover && e.preventDefault();
41 |         setOpen(true);
42 |       }}
43 |     >
44 |       {children}
45 |     </Tooltip.Trigger>
46 |   );
47 | });
48 | 
49 | TooltipTrigger.displayName = 'TooltipTrigger';


--------------------------------------------------------------------------------
/app/api/authenticate/route.ts:
--------------------------------------------------------------------------------
 1 | import { DeepgramError, createClient } from "@deepgram/sdk";
 2 | import { NextResponse, type NextRequest } from "next/server";
 3 | 
 4 | export const revalidate = 0;
 5 | 
 6 | export async function GET(request: NextRequest) {
 7 |   // exit early so we don't request keys while in devmode
 8 |   if (process.env.DEEPGRAM_ENV === "development") {
 9 |     return NextResponse.json({
10 |       key: process.env.DEEPGRAM_API_KEY ?? "",
11 |     });
12 |   }
13 | 
14 |   // use the request object to invalidate the cache every request
15 |   const url = request.url;
16 |   const deepgram = createClient(process.env.DEEPGRAM_API_KEY ?? "");
17 | 
18 |   let { result: projectsResult, error: projectsError } =
19 |     await deepgram.manage.getProjects();
20 | 
21 |   if (projectsError) {
22 |     return NextResponse.json(projectsError);
23 |   }
24 | 
25 |   const project = projectsResult?.projects[0];
26 | 
27 |   if (!project) {
28 |     return NextResponse.json(
29 |       new DeepgramError(
30 |         "Cannot find a Deepgram project. Please create a project first."
31 |       )
32 |     );
33 |   }
34 | 
35 |   let { result: newKeyResult, error: newKeyError } =
36 |     await deepgram.manage.createProjectKey(project.project_id, {
37 |       comment: "Temporary API key",
38 |       scopes: ["usage:write"],
39 |       tags: ["next.js"],
40 |       time_to_live_in_seconds: 60,
41 |     });
42 | 
43 |   if (newKeyError) {
44 |     return NextResponse.json(newKeyError);
45 |   }
46 | 
47 |   const response = NextResponse.json({ ...newKeyResult, url });
48 |   response.headers.set("Surrogate-Control", "no-store");
49 |   response.headers.set(
50 |     "Cache-Control",
51 |     "s-maxage=0, no-store, no-cache, must-revalidate, proxy-revalidate"
52 |   );
53 |   response.headers.set("Expires", "0");
54 | 
55 |   return response;
56 | }
57 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | 
 6 | @layer base {
 7 |   :root {
 8 |     --background: 0 0% 100%;
 9 |     --foreground: 240 10% 3.9%;
10 |     --card: 0 0% 100%;
11 |     --card-foreground: 240 10% 3.9%;
12 |     --popover: 0 0% 100%;
13 |     --popover-foreground: 240 10% 3.9%;
14 |     --primary: 240 5.9% 10%;
15 |     --primary-foreground: 0 0% 98%;
16 |     --secondary: 240 4.8% 95.9%;
17 |     --secondary-foreground: 240 5.9% 10%;
18 |     --muted: 240 4.8% 95.9%;
19 |     --muted-foreground: 240 3.8% 46.1%;
20 |     --accent: 240 4.8% 95.9%;
21 |     --accent-foreground: 240 5.9% 10%;
22 |     --destructive: 0 84.2% 60.2%;
23 |     --destructive-foreground: 0 0% 98%;
24 |     --border: 240 5.9% 90%;
25 |     --input: 240 5.9% 90%;
26 |     --ring: 240 10% 3.9%;
27 |     --chart-1: 12 76% 61%;
28 |     --chart-2: 173 58% 39%;
29 |     --chart-3: 197 37% 24%;
30 |     --chart-4: 43 74% 66%;
31 |     --chart-5: 27 87% 67%;
32 |     --radius: 0.5rem;
33 |   }
34 |   .dark {
35 |     --background: 240 10% 3.9%;
36 |     --foreground: 0 0% 98%;
37 |     --card: 240 10% 3.9%;
38 |     --card-foreground: 0 0% 98%;
39 |     --popover: 240 10% 3.9%;
40 |     --popover-foreground: 0 0% 98%;
41 |     --primary: 0 0% 98%;
42 |     --primary-foreground: 240 5.9% 10%;
43 |     --secondary: 240 3.7% 15.9%;
44 |     --secondary-foreground: 0 0% 98%;
45 |     --muted: 240 3.7% 15.9%;
46 |     --muted-foreground: 240 5% 64.9%;
47 |     --accent: 240 3.7% 15.9%;
48 |     --accent-foreground: 0 0% 98%;
49 |     --destructive: 0 62.8% 30.6%;
50 |     --destructive-foreground: 0 0% 98%;
51 |     --border: 240 3.7% 15.9%;
52 |     --input: 240 3.7% 15.9%;
53 |     --ring: 240 4.9% 83.9%;
54 |     --chart-1: 220 70% 50%;
55 |     --chart-2: 160 60% 45%;
56 |     --chart-3: 30 80% 55%;
57 |     --chart-4: 280 65% 60%;
58 |     --chart-5: 340 75% 55%;
59 |   }
60 | }
61 | @layer base {
62 |   * {
63 |     @apply border-border;
64 |   }
65 |   body {
66 |     @apply bg-background text-foreground;
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/components/settings-modal.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   Dialog,
 4 |   DialogContent,
 5 |   DialogHeader,
 6 |   DialogTitle,
 7 | } from "@/components/ui/dialog";
 8 | import {
 9 |   Select,
10 |   SelectContent,
11 |   SelectItem,
12 |   SelectTrigger,
13 |   SelectValue,
14 | } from "@/components/ui/select";
15 | import { Label } from "@/components/ui/label";
16 | import { useMicrophone } from "@/app/context/MicrophoneContextProvider";
17 | import { useEffect } from "react";
18 | 
19 | interface SettingsModalProps {
20 |   isOpen: boolean;
21 |   onClose: () => void;
22 | }
23 | 
24 | export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
25 |   const {
26 |     availableMicrophones,
27 |     selectedMicrophone,
28 |     loadAvailableMicrophones,
29 |     selectMicrophone,
30 |   } = useMicrophone();
31 | 
32 |   useEffect(() => {
33 |     loadAvailableMicrophones();
34 |   // eslint-disable-next-line react-hooks/exhaustive-deps
35 |   }, []);
36 | 
37 |   return (
38 |     <Dialog open={isOpen} onOpenChange={onClose}>
39 |       <DialogContent className="sm:max-w-[425px]">
40 |         <DialogHeader>
41 |           <DialogTitle>Settings</DialogTitle>
42 |         </DialogHeader>
43 |         <form className="grid gap-4 py-4">
44 |           <div className="space-y-2">
45 |             <Label htmlFor="input-source">Input Source</Label>
46 |             <Select
47 |               value={selectedMicrophone?.deviceId || ''}
48 |               onValueChange={selectMicrophone}
49 |             >
50 |               <SelectTrigger>
51 |                 <SelectValue placeholder="Select microphone" />
52 |               </SelectTrigger>
53 |               <SelectContent>
54 |                 {availableMicrophones.map((mic) => (
55 |                   <SelectItem key={mic.deviceId} value={mic.deviceId}>
56 |                     {mic.label}
57 |                   </SelectItem>
58 |                 ))}
59 |               </SelectContent>
60 |             </Select>
61 |           </div>
62 |         </form>
63 |       </DialogContent>
64 |     </Dialog>
65 |   );
66 | }
67 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLDivElement,
34 |   React.HTMLAttributes<HTMLDivElement>
35 | >(({ className, ...props }, ref) => (
36 |   <div
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLDivElement,
46 |   React.HTMLAttributes<HTMLDivElement>
47 | >(({ className, ...props }, ref) => (
48 |   <div
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse, type NextRequest } from "next/server";
 2 | 
 3 | const corsOptions: {
 4 |   allowedMethods: string[];
 5 |   allowedOrigins: string[];
 6 |   allowedHeaders: string[];
 7 |   exposedHeaders: string[];
 8 |   maxAge?: number;
 9 |   credentials: boolean;
10 | } = {
11 |   allowedMethods: (process.env?.ALLOWED_METHODS || "").split(","),
12 |   allowedOrigins: (process.env?.ALLOWED_ORIGIN || "").split(","),
13 |   allowedHeaders: (process.env?.ALLOWED_HEADERS || "").split(","),
14 |   exposedHeaders: (process.env?.EXPOSED_HEADERS || "").split(","),
15 |   maxAge:
16 |     (process.env?.PREFLIGHT_MAX_AGE &&
17 |       parseInt(process.env?.PREFLIGHT_MAX_AGE)) ||
18 |     undefined, // 60 * 60 * 24 * 30, // 30 days
19 |   credentials: process.env?.CREDENTIALS == "true",
20 | };
21 | 
22 | /**
23 |  * Middleware function that handles CORS configuration for API routes.
24 |  *
25 |  * This middleware function is responsible for setting the appropriate CORS headers
26 |  * on the response, based on the configured CORS options. It checks the origin of
27 |  * the request and sets the `Access-Control-Allow-Origin` header accordingly. It
28 |  * also sets the other CORS-related headers, such as `Access-Control-Allow-Credentials`,
29 |  * `Access-Control-Allow-Methods`, `Access-Control-Allow-Headers`, and
30 |  * `Access-Control-Expose-Headers`.
31 |  *
32 |  * The middleware function is configured to be applied to all API routes, as defined
33 |  * by the `config` object at the end of the file.
34 |  */
35 | export function middleware(request: NextRequest) {
36 |   // Response
37 |   const response = NextResponse.next();
38 | 
39 |   // Allowed origins check
40 |   const origin = request.headers.get("origin") ?? "";
41 |   if (
42 |     corsOptions.allowedOrigins.includes("*") ||
43 |     corsOptions.allowedOrigins.includes(origin)
44 |   ) {
45 |     response.headers.set("Access-Control-Allow-Origin", origin);
46 |   }
47 | 
48 |   // Set default CORS headers
49 |   response.headers.set(
50 |     "Access-Control-Allow-Credentials",
51 |     corsOptions.credentials.toString()
52 |   );
53 |   response.headers.set(
54 |     "Access-Control-Allow-Methods",
55 |     corsOptions.allowedMethods.join(",")
56 |   );
57 |   response.headers.set(
58 |     "Access-Control-Allow-Headers",
59 |     corsOptions.allowedHeaders.join(",")
60 |   );
61 |   response.headers.set(
62 |     "Access-Control-Expose-Headers",
63 |     corsOptions.exposedHeaders.join(",")
64 |   );
65 |   response.headers.set(
66 |     "Access-Control-Max-Age",
67 |     corsOptions.maxAge?.toString() ?? ""
68 |   );
69 | 
70 |   // Return
71 |   return response;
72 | }
73 | 
74 | // See "Matching Paths" below to learn more
75 | export const config = {
76 |   matcher: "/api/authenticate",
77 | };
78 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AI Facts
 2 | 
 3 | **Note:** LLMs can sometimes provide incorrect or outdated information. Always verify critical information through trusted sources.
 4 | 
 5 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-facts&env=OPENAI_API_KEY,DEEPGRAM_API_KEY,PERPLEXITY_API_KEY&envDescription=Learn%20more%20about%20how%20to%20get%20the%20API%20Keys%20for%20the%20application&envLink=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-facts%2Fblob%2Fmain%2F.env.example&demo-title=AI%20Facts&demo-description=Real-time%20fact%20checking%20using%20audio%20transcription%20and%20AI&demo-url=https%3A%2F%2Fai-facts.vercel.app)
 6 | 
 7 | This project is a Next.js application that performs real-time fact checking on spoken statements. It uses Deepgram for audio transcription and leverages both OpenAI and Perplexity to verify the accuracy of claims.
 8 | 
 9 | ## Features
10 | 
11 | - Real-time Audio Transcription: Captures and transcribes spoken audio using Deepgram's API
12 | - AI Fact Checking: Uses both OpenAI and Perplexity to cross-reference and verify statements
13 | - Live Results: Shows fact-checking results in real-time as statements are processed
14 | - Explanation of Validity: Provides detailed explanations for why statements are considered true or false
15 | 
16 | ## Technology Stack
17 | 
18 | - [Next.js](https://nextjs.org/) for the frontend and API routes
19 | - [AI SDK](https://sdk.vercel.ai/) for interacting with LLMs
20 | - [Deepgram](https://deepgram.com/) for audio transcription
21 | - [OpenAI](https://openai.com/) and [Perplexity](https://perplexity.ai/) for validating claims
22 | - [ShadcnUI](https://ui.shadcn.com/) for UI components
23 | - [Tailwind CSS](https://tailwindcss.com/) for styling
24 | 
25 | ## How It Works
26 | 
27 | 1. Speak into microphone
28 | 2. Deepgram processes the audio stream in real-time and returns transcribed text
29 | 3. The transcribed text is analyzed for distinct statements ('?!.')
30 | 4. Each statement is sent to OpenAI and Perplexity for fact checking
31 | 5. The verification status and explanation are displayed to the user
32 | 
33 | ## Getting Started
34 | 
35 | To get the project up and running, follow these steps:
36 | 
37 | 1. Install dependencies:
38 | 
39 |    ```bash
40 |    npm install
41 |    ```
42 | 
43 | 2. Copy the example environment file:
44 | 
45 |    ```bash
46 |    cp .env.example .env
47 |    ```
48 | 
49 | 3. Add your API keys to the `.env` file:
50 | 
51 |    ```
52 |    OPENAI_API_KEY=your_api_key_here
53 |    DEEPGRAM_API_KEY=your_api_key_here
54 |    PERPLEXITY_API_KEY=your_api_key_here
55 |    ```
56 | 
57 | 4. Start the development server:
58 |    ```bash
59 |    npm run dev
60 |    ```
61 | 
62 | Your project should now be running on [http://localhost:3000](http://localhost:3000).
63 | 
64 | ## Deployment
65 | 
66 | The project is set up for one-click deployment on Vercel. Use the "Deploy with Vercel" button above to create your own instance of the application.
67 | 
68 | ## Learn More
69 | 
70 | To learn more about the technologies used in this project, check out the following resources:
71 | 
72 | - [Next.js Documentation](https://nextjs.org/docs)
73 | - [AI SDK](https://sdk.vercel.ai/docs)
74 | - [OpenAI](https://openai.com/)
75 | - [Deepgram](https://deepgram.com/)
76 | - [Perplexity AI](https://perplexity.ai/)
77 | - [ShadcnUI](https://ui.shadcn.com/)
78 | - [Tailwind CSS](https://tailwindcss.com/docs)


--------------------------------------------------------------------------------
/app/context/DeepgramContextProvider.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import {
  4 |   createClient,
  5 |   LiveClient,
  6 |   LiveConnectionState,
  7 |   LiveTranscriptionEvents,
  8 |   type LiveSchema,
  9 |   type LiveTranscriptionEvent,
 10 | } from "@deepgram/sdk";
 11 | 
 12 | import {
 13 |   createContext,
 14 |   useContext,
 15 |   useState,
 16 |   ReactNode,
 17 |   FunctionComponent,
 18 | } from "react";
 19 | 
 20 | interface DeepgramContextType {
 21 |   connection: LiveClient | null;
 22 |   connectToDeepgram: (options: LiveSchema, endpoint?: string) => Promise<void>;
 23 |   disconnectFromDeepgram: () => void;
 24 |   connectionState: LiveConnectionState;
 25 |   error?: any;
 26 | }
 27 | 
 28 | const DeepgramContext = createContext<DeepgramContextType | undefined>(
 29 |   undefined,
 30 | );
 31 | 
 32 | interface DeepgramContextProviderProps {
 33 |   children: ReactNode;
 34 | }
 35 | 
 36 | const getApiKey = async (): Promise<string> => {
 37 |   const response = await fetch("/api/authenticate", { cache: "no-store" });
 38 |   const result = await response.json();
 39 |   return result.key;
 40 | };
 41 | 
 42 | const DeepgramContextProvider: FunctionComponent<
 43 |   DeepgramContextProviderProps
 44 | > = ({ children }) => {
 45 |   const [connection, setConnection] = useState<LiveClient | null>(null);
 46 |   const [connectionState, setConnectionState] = useState<LiveConnectionState>(
 47 |     LiveConnectionState.CLOSED,
 48 |   );
 49 |   const [error, setError] = useState();
 50 | 
 51 |   /**
 52 |    * Connects to the Deepgram speech recognition service and sets up a live transcription session.
 53 |    *
 54 |    * @param options - The configuration options for the live transcription session.
 55 |    * @param endpoint - The optional endpoint URL for the Deepgram service.
 56 |    * @returns A Promise that resolves when the connection is established.
 57 |    */
 58 |   const connectToDeepgram = async (options: LiveSchema, endpoint?: string) => {
 59 |     const key = await getApiKey();
 60 |     const deepgram = createClient(key);
 61 | 
 62 |     const conn = deepgram.listen.live(options, endpoint);
 63 | 
 64 |     conn.addListener(LiveTranscriptionEvents.Open, () => {
 65 |       setConnectionState(LiveConnectionState.OPEN);
 66 |     });
 67 | 
 68 |     conn.addListener(LiveTranscriptionEvents.Close, () => {
 69 |       setConnectionState(LiveConnectionState.CLOSED);
 70 |     });
 71 | 
 72 |     conn.addListener(LiveTranscriptionEvents.Error, (e) => {
 73 |       setError(e);
 74 |     });
 75 | 
 76 |     setConnection(conn);
 77 |   };
 78 | 
 79 |   const disconnectFromDeepgram = async () => {
 80 |     if (connection) {
 81 |       connection.finish();
 82 |       setConnection(null);
 83 |     }
 84 |   };
 85 | 
 86 |   return (
 87 |     <DeepgramContext.Provider
 88 |       value={{
 89 |         connection,
 90 |         connectToDeepgram,
 91 |         disconnectFromDeepgram,
 92 |         connectionState,
 93 |         error,
 94 |       }}
 95 |     >
 96 |       {children}
 97 |     </DeepgramContext.Provider>
 98 |   );
 99 | };
100 | 
101 | function useDeepgram(): DeepgramContextType {
102 |   const context = useContext(DeepgramContext);
103 |   if (context === undefined) {
104 |     throw new Error(
105 |       "useDeepgram must be used within a DeepgramContextProvider",
106 |     );
107 |   }
108 |   return context;
109 | }
110 | 
111 | export {
112 |   DeepgramContextProvider,
113 |   useDeepgram,
114 |   LiveConnectionState,
115 |   LiveTranscriptionEvents,
116 |   type LiveTranscriptionEvent,
117 | };
118 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
  1 | import type { Config } from "tailwindcss";
  2 | 
  3 | const config: Config = {
  4 |   darkMode: ["class"],
  5 |   content: [
  6 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
  7 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
  8 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
  9 |   ],
 10 |   theme: {
 11 |     extend: {
 12 |       animation: {
 13 |         "ping-short": "ping 1s ease-in-out 5",
 14 |         "fade-in": "fadeIn 0.2s ease-in",
 15 |         "fade-in-fade-out": "fadeIn fadeOut 0.5s ease-in",
 16 |       },
 17 |       keyframes: {
 18 |         fadeIn: {
 19 |           "0%": { opacity: "0" },
 20 |           "100%": { opacity: "1" },
 21 |         },
 22 |         fadeOut: {
 23 |           "100%": { opacity: "1" },
 24 |           "0%": { opacity: "0" },
 25 |         },
 26 |       },
 27 |       screens: {
 28 |         betterhover: {
 29 |           raw: "(hover: hover)",
 30 |         },
 31 |       },
 32 |       transitionProperty: {
 33 |         height: "height",
 34 |         width: "width",
 35 |       },
 36 |       dropShadow: {
 37 |         glowBlue: [
 38 |           "0px 0px 2px #000",
 39 |           "0px 0px 4px #000",
 40 |           "0px 0px 30px #0141ff",
 41 |           "0px 0px 100px #0141ff80",
 42 |         ],
 43 |         glowRed: [
 44 |           "0px 0px 2px #f00",
 45 |           "0px 0px 4px #000",
 46 |           "0px 0px 15px #ff000040",
 47 |           "0px 0px 30px #f00",
 48 |           "0px 0px 100px #ff000080",
 49 |         ],
 50 |       },
 51 |       backgroundImage: {
 52 |         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
 53 |         "gradient-conic":
 54 |           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
 55 |       },
 56 |       fontFamily: {
 57 |         geist: ["var(--font-geist)"],
 58 |       },
 59 |       borderRadius: {
 60 |         lg: "var(--radius)",
 61 |         md: "calc(var(--radius) - 2px)",
 62 |         sm: "calc(var(--radius) - 4px)",
 63 |       },
 64 |       colors: {
 65 |         background: "hsl(var(--background))",
 66 |         foreground: "hsl(var(--foreground))",
 67 |         card: {
 68 |           DEFAULT: "hsl(var(--card))",
 69 |           foreground: "hsl(var(--card-foreground))",
 70 |         },
 71 |         popover: {
 72 |           DEFAULT: "hsl(var(--popover))",
 73 |           foreground: "hsl(var(--popover-foreground))",
 74 |         },
 75 |         primary: {
 76 |           DEFAULT: "hsl(var(--primary))",
 77 |           foreground: "hsl(var(--primary-foreground))",
 78 |         },
 79 |         secondary: {
 80 |           DEFAULT: "hsl(var(--secondary))",
 81 |           foreground: "hsl(var(--secondary-foreground))",
 82 |         },
 83 |         muted: {
 84 |           DEFAULT: "hsl(var(--muted))",
 85 |           foreground: "hsl(var(--muted-foreground))",
 86 |         },
 87 |         accent: {
 88 |           DEFAULT: "hsl(var(--accent))",
 89 |           foreground: "hsl(var(--accent-foreground))",
 90 |         },
 91 |         destructive: {
 92 |           DEFAULT: "hsl(var(--destructive))",
 93 |           foreground: "hsl(var(--destructive-foreground))",
 94 |         },
 95 |         border: "hsl(var(--border))",
 96 |         input: "hsl(var(--input))",
 97 |         ring: "hsl(var(--ring))",
 98 |         chart: {
 99 |           "1": "hsl(var(--chart-1))",
100 |           "2": "hsl(var(--chart-2))",
101 |           "3": "hsl(var(--chart-3))",
102 |           "4": "hsl(var(--chart-4))",
103 |           "5": "hsl(var(--chart-5))",
104 |         },
105 |       },
106 |     },
107 |   },
108 |   plugins: [require("tailwindcss-animate")],
109 | };
110 | export default config;
111 | 


--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogTrigger,
116 |   DialogClose,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/app/api/validate-statement/route.ts:
--------------------------------------------------------------------------------
  1 | import { validatedStatementSchema,  } from "@/utils/schemas";
  2 | import { createOpenAI, openai } from "@ai-sdk/openai";
  3 | import { generateObject, generateText } from "ai";
  4 | import { NextResponse } from "next/server";
  5 | import { z } from "zod";
  6 | 
  7 | const perplexity = createOpenAI({
  8 |   name: "perplexity",
  9 |   apiKey: process.env.PERPLEXITY_API_KEY ?? "",
 10 |   baseURL: "https://api.perplexity.ai/",
 11 | });
 12 | 
 13 | const generateCheckablePrompt = (statement: string, transcript?: string) => {
 14 |   return `
 15 |   Categorize this statement as one of:
 16 |   immediately-checkable - Can be verified using general knowledge (e.g. "Water freezes at 0°C", "Earth orbits the Sun")
 17 |   needs-more-info - Requires additional context or current data (e.g. "It's raining now", "Sarah works at Google", "The stock market is up today")
 18 |   not-checkable - Conversational/greetings (e.g. "How are you?", "I love pizza")
 19 | 
 20 |   Statement: "${statement}"${transcript ? `\n\nConversation context in case subject of statement is ambigious. Infer from here:\n${transcript.concat(" " + statement)}` : ""}
 21 | `;
 22 | };
 23 | 
 24 | const generatePrompt = (
 25 |   statement: string,
 26 |   transcript?: string,
 27 |   additionalInfo?: string,
 28 | ) => {
 29 |   return `Analyze the content for signs of false or misleading information. Use 'dubious' as the classification if the statement seems questionable but you're not certain, or 'obviously-fake' if it contains verifiably false claims. Provide one short sentence explaining your reasoning, using only information that would have been available at the time of the conversation. Slight spelling mistakes are ok and not considered a fake statement. If a statement is highly unlikely, classify it as obviously fake.
 30 |   Example:
 31 |   - Statement: "The moon is made of cheese."
 32 |   - Classification: "obviously-fake"
 33 | 
 34 |   Statement to analyze: "${statement}"${additionalInfo ? `\n\nUse the following additional information to guide your response:\n${additionalInfo}` : ""}${transcript ? `\n\nConversation context in case subject of statement is ambigious (infer subject from this trascript):\n${transcript.concat(" " + statement)}` : ""}
 35 |   `;
 36 | };
 37 | 
 38 | const generatePerplexityPrompt = (statement: string, transcript?: string) => {
 39 |   return `Analyze this statement and determine if it is true, dubious (questionable but not certain), or obviously fake. Provide a single sentence response in the format: "The statement is [true/dubious/obviously-fake] because [brief reason]." Do not provide sources. Slight spelling mistakes are ok and not considered a fake statement.
 40 | 
 41 | Statement: "${statement}"${transcript ? `\n\nConversation context in case subject of statement is ambigious (infer subject from this trascript):\n${transcript.concat(" " + statement)}` : ""}
 42 | 
 43 | Note: Today's day is ${new Date().toISOString()} if relevant.
 44 | `;
 45 | };
 46 | 
 47 | export const POST = async (request: Request) => {
 48 |   const { statement, transcript: transcriptRaw } = await request.json();
 49 | 
 50 |   const hasAmbiguiousSubject = (text: string): boolean => {
 51 |     const ambiguousWords = [
 52 |       "they",
 53 |       "he",
 54 |       "she",
 55 |       "it",
 56 |       "they're",
 57 |       "he's",
 58 |       "she's",
 59 |       "it's",
 60 |       "their",
 61 |       "his",
 62 |       "hers",
 63 |       "its",
 64 |       "I",
 65 |     ];
 66 |     const lowercaseText = text.toLowerCase();
 67 |     return ambiguousWords.some((word) => lowercaseText.includes(word));
 68 |   };
 69 |   const transcript = hasAmbiguiousSubject(statement)
 70 |     ? transcriptRaw
 71 |     : undefined;
 72 | 
 73 |   if (!statement) {
 74 |     return NextResponse.json(
 75 |       { error: "No statement provided" },
 76 |       { status: 400 },
 77 |     );
 78 |   }
 79 | 
 80 |   const { object } = await generateObject({
 81 |     model: openai("gpt-4o-mini"),
 82 |     prompt: generateCheckablePrompt(statement, transcript),
 83 |     schema: z.object({
 84 |       checkableType: z
 85 |         .enum(["not-checkable", "immediately-checkable", "needs-more-info"])
 86 |         .describe(
 87 |           "If the statement is not checkable (eg. random talking), easily-checkable (eg. the earth is flat), requires-additional-information (eg. x person works at y company).",
 88 |         ),
 89 |     }),
 90 |   });
 91 | 
 92 |   if (object.checkableType === "not-checkable") {
 93 |     return NextResponse.json({
 94 |       statement,
 95 |       type: "not-checkable",
 96 |       reasoning: "This statement is not a checkable claim",
 97 |     });
 98 |   }
 99 | 
100 |   let additionalInfo: string | undefined = undefined;
101 |   if (object.checkableType === "needs-more-info") {
102 |     const { text: perplexityCheck } = await generateText({
103 |       model: perplexity("llama-3.1-sonar-small-128k-online"),
104 |       maxTokens: 100,
105 |       prompt: generatePerplexityPrompt(statement, transcript),
106 |     });
107 |     additionalInfo = perplexityCheck;
108 |   }
109 | 
110 |   const { object: generation } = await generateObject({
111 |     model: openai("gpt-4o-mini"),
112 |     schema: validatedStatementSchema,
113 |     prompt: generatePrompt(statement, transcript, additionalInfo),
114 |   });
115 | 
116 |   return NextResponse.json({ statement, type: "checkable", ...generation });
117 | };
118 | 


--------------------------------------------------------------------------------
/app/context/MicrophoneContextProvider.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import {
  4 |   createContext,
  5 |   useCallback,
  6 |   useContext,
  7 |   useState,
  8 |   ReactNode,
  9 | } from "react";
 10 | 
 11 | interface MicrophoneDevice {
 12 |   deviceId: string;
 13 |   label: string;
 14 | }
 15 | 
 16 | interface MicrophoneContextType {
 17 |   microphone: MediaRecorder | null;
 18 |   startMicrophone: () => void;
 19 |   stopMicrophone: () => void;
 20 |   setupMicrophone: (deviceId?: string) => void;
 21 |   microphoneState: MicrophoneState | null;
 22 |   availableMicrophones: MicrophoneDevice[];
 23 |   selectedMicrophone: MicrophoneDevice | null;
 24 |   loadAvailableMicrophones: () => Promise<void>;
 25 |   selectMicrophone: (deviceId: string) => Promise<void>;
 26 | }
 27 | 
 28 | export enum MicrophoneEvents {
 29 |   DataAvailable = "dataavailable",
 30 |   Error = "error",
 31 |   Pause = "pause",
 32 |   Resume = "resume",
 33 |   Start = "start",
 34 |   Stop = "stop",
 35 | }
 36 | 
 37 | export enum MicrophoneState {
 38 |   NotSetup = -1,
 39 |   SettingUp = 0,
 40 |   Ready = 1,
 41 |   Opening = 2,
 42 |   Open = 3,
 43 |   Error = 4,
 44 |   Pausing = 5,
 45 |   Paused = 6,
 46 | }
 47 | 
 48 | const MicrophoneContext = createContext<MicrophoneContextType | undefined>(
 49 |   undefined
 50 | );
 51 | 
 52 | interface MicrophoneContextProviderProps {
 53 |   children: ReactNode;
 54 | }
 55 | 
 56 | const MicrophoneContextProvider: React.FC<MicrophoneContextProviderProps> = ({
 57 |   children,
 58 | }) => {
 59 |   const [microphoneState, setMicrophoneState] = useState<MicrophoneState>(
 60 |     MicrophoneState.NotSetup
 61 |   );
 62 |   const [microphone, setMicrophone] = useState<MediaRecorder | null>(null);
 63 |   const [availableMicrophones, setAvailableMicrophones] = useState<MicrophoneDevice[]>([]);
 64 |   const [selectedMicrophone, setSelectedMicrophone] = useState<MicrophoneDevice | null>(null);
 65 | 
 66 |   const loadAvailableMicrophones = async () => {
 67 |     try {
 68 |       // Request permission to access audio devices
 69 |       await navigator.mediaDevices.getUserMedia({ audio: true });
 70 | 
 71 |       // Get list of audio input devices
 72 |       const devices = await navigator.mediaDevices.enumerateDevices();
 73 |       const audioInputDevices = devices
 74 |         .filter(device => device.kind === 'audioinput')
 75 |         .map(device => ({
 76 |           deviceId: device.deviceId,
 77 |           label: device.label || `Microphone ${device.deviceId.slice(0, 5)}...`
 78 |         }));
 79 | 
 80 |       setAvailableMicrophones(audioInputDevices);
 81 | 
 82 |       // Select default microphone if none is selected
 83 |       if (!selectedMicrophone && audioInputDevices.length > 0) {
 84 |         setSelectedMicrophone(audioInputDevices[0]);
 85 |       }
 86 |     } catch (err) {
 87 |       console.error('Error loading microphones:', err);
 88 |       throw err;
 89 |     }
 90 |   };
 91 | 
 92 |   const selectMicrophone = async (deviceId: string) => {
 93 |     const selected = availableMicrophones.find(mic => mic.deviceId === deviceId);
 94 |     if (selected) {
 95 |       setSelectedMicrophone(selected);
 96 |       // If there's an active microphone, stop it and setup the new one
 97 |       if (microphone) {
 98 |         microphone.stream.getTracks().forEach(track => track.stop());
 99 |         setMicrophone(null);
100 |         await setupMicrophone(deviceId);
101 |       }
102 |     }
103 |   };
104 | 
105 |   const setupMicrophone = async (deviceId?: string) => {
106 |     setMicrophoneState(MicrophoneState.SettingUp);
107 | 
108 |     try {
109 |       const userMedia = await navigator.mediaDevices.getUserMedia({
110 |         audio: {
111 |           deviceId: deviceId ? { exact: deviceId } : undefined,
112 |           noiseSuppression: true,
113 |           echoCancellation: true,
114 |         },
115 |       });
116 | 
117 |       const microphone = new MediaRecorder(userMedia);
118 | 
119 |       setMicrophoneState(MicrophoneState.Ready);
120 |       setMicrophone(microphone);
121 |     } catch (err: any) {
122 |       console.error(err);
123 |       setMicrophoneState(MicrophoneState.Error);
124 |       throw err;
125 |     }
126 |   };
127 |   const stopMicrophone = useCallback(() => {
128 |     setMicrophoneState(MicrophoneState.Pausing);
129 | 
130 |     if (microphone?.state === "recording") {
131 |       microphone.pause();
132 |       setMicrophoneState(MicrophoneState.Paused);
133 |     }
134 |   }, [microphone]);
135 | 
136 |   const startMicrophone = useCallback(() => {
137 |     setMicrophoneState(MicrophoneState.Opening);
138 | 
139 |     if (microphone?.state === "paused") {
140 |       microphone.resume();
141 |     } else {
142 |       microphone?.start(250);
143 |     }
144 | 
145 |     setMicrophoneState(MicrophoneState.Open);
146 |   }, [microphone]);
147 | 
148 |   return (
149 |     <MicrophoneContext.Provider
150 |       value={{
151 |         microphone,
152 |         startMicrophone,
153 |         stopMicrophone,
154 |         setupMicrophone,
155 |         microphoneState,
156 |         availableMicrophones,
157 |         selectedMicrophone,
158 |         loadAvailableMicrophones,
159 |         selectMicrophone,
160 |       }}
161 |     >
162 |       {children}
163 |     </MicrophoneContext.Provider>
164 |   );
165 | };
166 | 
167 | function useMicrophone(): MicrophoneContextType {
168 |   const context = useContext(MicrophoneContext);
169 | 
170 |   if (context === undefined) {
171 |     throw new Error(
172 |       "useMicrophone must be used within a MicrophoneContextProvider",
173 |     );
174 |   }
175 | 
176 |   return context;
177 | }
178 | 
179 | export { MicrophoneContextProvider, useMicrophone };
180 | 


--------------------------------------------------------------------------------
/components/flowing-transcript.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef } from "react";
  2 | import * as Tooltip from "@radix-ui/react-tooltip";
  3 | import { TooltipRoot, TooltipTrigger } from "./tooltip-root";
  4 | import Link from "next/link";
  5 | import { VercelIcon, MasonryIcon } from "./icons";
  6 | import { SpeechIcon } from "lucide-react";
  7 | import { Statement, ValidatedStatement } from "@/utils/schemas";
  8 | import { TalkingIndicator } from "./loading-indicator";
  9 | 
 10 | interface FlowingTranscriptProps {
 11 |   unprocessed: string | undefined;
 12 |   statements: Statement[];
 13 |   isTalking: boolean;
 14 | }
 15 | 
 16 | export default function FlowingTranscript({
 17 |   statements,
 18 |   isTalking,
 19 |   unprocessed,
 20 | }: FlowingTranscriptProps) {
 21 |   const transcriptRef = useRef<HTMLDivElement>(null);
 22 | 
 23 |   useEffect(() => {
 24 |     if (transcriptRef.current) {
 25 |       transcriptRef.current.scrollTop = transcriptRef.current.scrollHeight;
 26 |     }
 27 |   }, [statements]);
 28 | 
 29 |   const getBackgroundColor = (item: ValidatedStatement) => {
 30 |     if (item.type === "non-checkable") return "bg-zinc-50 dark:bg-black";
 31 |     switch (item.accuracy) {
 32 |       case "true":
 33 |         return "bg-green-50 dark:bg-green-900";
 34 |       case "dubious":
 35 |         return "bg-yellow-50 dark:bg-yellow-900";
 36 |       case "obviously-fake":
 37 |         return "bg-red-50 dark:bg-red-900";
 38 |       default:
 39 |         return "bg-zinc-50 dark:bg-zinc-800";
 40 |     }
 41 |   };
 42 | 
 43 |   return (
 44 |     <Tooltip.Provider>
 45 |       <div className="w-full p-4 md:p-6 bg-background rounded-lg shadow-lg">
 46 |         <div ref={transcriptRef} className="h-[79vh] overflow-y-auto ">
 47 |           {statements.length === 0 && !isTalking ? (
 48 |             <div className="h-full flex flex-col items-center justify-center space-y-4 px-4">
 49 |               <div className="">
 50 |                 <div className="">
 51 |                   <p className="flex flex-row justify-center gap-4 items-center text-zinc-900 dark:text-zinc-50">
 52 |                     <VercelIcon size={24} />
 53 |                     <span>+</span>
 54 |                     <SpeechIcon className="h-8 w-8" />
 55 |                   </p>
 56 |                 </div>
 57 |               </div>
 58 | 
 59 |               <div className="space-y-4 text-center max-w-[400px]">
 60 |                 <h3 className="font-semibold text-xl">Start Speaking</h3>
 61 |                 <p className="text-muted-foreground">
 62 |                   Your words will be transcribed and fact-checked in real-time
 63 |                   using AI
 64 |                 </p>
 65 |               </div>
 66 |               <div className="text-center text-sm text-muted-foreground">
 67 |                 Learn more about{" "}
 68 |                 <Link
 69 |                   className="text-primary underline-offset-4 hover:underline"
 70 |                   href="https://sdk.vercel.ai/"
 71 |                   target="_blank"
 72 |                 >
 73 |                   the AI SDK
 74 |                 </Link>
 75 |               </div>
 76 |             </div>
 77 |           ) : (
 78 |             <h2 className="text-muted-foreground uppercase font-medium text-xs mb-4 text-center">
 79 |               Transcript
 80 |             </h2>
 81 |           )}
 82 |           <div className="flex flex-wrap font-mono text-sm leading-relaxed">
 83 |             {statements.map((item, index) => (
 84 |               <div key={index} className="animate-fade-in">
 85 |                 <TooltipRoot>
 86 |                   <TooltipTrigger asChild>
 87 |                     <span
 88 |                       className={`inline-block mb-2 mx-1 px-1 py-1 rounded cursor-help ${item.result ? getBackgroundColor(item.result) : "opacity-40"} transition-all ease-in-out duration-300`}
 89 |                     >
 90 |                       {item.text}
 91 |                     </span>
 92 |                   </TooltipTrigger>
 93 |                   <Tooltip.Portal>
 94 |                     <Tooltip.Content
 95 |                       className="bg-background p-2 rounded shadow-lg border border-border max-w-xs"
 96 |                       sideOffset={5}
 97 |                     >
 98 |                       {item.result && item.result.type === "checkable" ? (
 99 |                         item.result.reasoning ? (
100 |                           <>
101 |                             <p className="text-sm mb-1">
102 |                               {item.result.reasoning}
103 |                             </p>
104 |                             <p
105 |                               className={`text-xs font-semibold ${
106 |                                 item.result.accuracy === "true"
107 |                                   ? "text-green-600"
108 |                                   : item.result.accuracy === "dubious"
109 |                                     ? "text-yellow-600"
110 |                                     : "text-red-600"
111 |                               }`}
112 |                             >
113 |                               {item.result.accuracy?.toUpperCase()}
114 |                             </p>
115 |                           </>
116 |                         ) : (
117 |                           <p className="text-sm">Processing...</p>
118 |                         )
119 |                       ) : (
120 |                         <p className="text-sm">Non-checkable statement</p>
121 |                       )}
122 |                       <Tooltip.Arrow className="fill-background" />
123 |                     </Tooltip.Content>
124 |                   </Tooltip.Portal>
125 |                 </TooltipRoot>
126 |               </div>
127 |             ))}
128 |             {isTalking && unprocessed && <TalkingIndicator />}
129 |           </div>
130 |         </div>
131 |       </div>
132 |     </Tooltip.Provider>
133 |   );
134 | }
135 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Select = SelectPrimitive.Root
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group
 12 | 
 13 | const SelectValue = SelectPrimitive.Value
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ))
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn(
 42 |       "flex cursor-default items-center justify-center py-1",
 43 |       className
 44 |     )}
 45 |     {...props}
 46 |   >
 47 |     <ChevronUp className="h-4 w-4" />
 48 |   </SelectPrimitive.ScrollUpButton>
 49 | ))
 50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 51 | 
 52 | const SelectScrollDownButton = React.forwardRef<
 53 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 54 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 55 | >(({ className, ...props }, ref) => (
 56 |   <SelectPrimitive.ScrollDownButton
 57 |     ref={ref}
 58 |     className={cn(
 59 |       "flex cursor-default items-center justify-center py-1",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     <ChevronDown className="h-4 w-4" />
 65 |   </SelectPrimitive.ScrollDownButton>
 66 | ))
 67 | SelectScrollDownButton.displayName =
 68 |   SelectPrimitive.ScrollDownButton.displayName
 69 | 
 70 | const SelectContent = React.forwardRef<
 71 |   React.ElementRef<typeof SelectPrimitive.Content>,
 72 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 73 | >(({ className, children, position = "popper", ...props }, ref) => (
 74 |   <SelectPrimitive.Portal>
 75 |     <SelectPrimitive.Content
 76 |       ref={ref}
 77 |       className={cn(
 78 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
 79 |         position === "popper" &&
 80 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 81 |         className
 82 |       )}
 83 |       position={position}
 84 |       {...props}
 85 |     >
 86 |       <SelectScrollUpButton />
 87 |       <SelectPrimitive.Viewport
 88 |         className={cn(
 89 |           "p-1",
 90 |           position === "popper" &&
 91 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 92 |         )}
 93 |       >
 94 |         {children}
 95 |       </SelectPrimitive.Viewport>
 96 |       <SelectScrollDownButton />
 97 |     </SelectPrimitive.Content>
 98 |   </SelectPrimitive.Portal>
 99 | ))
100 | SelectContent.displayName = SelectPrimitive.Content.displayName
101 | 
102 | const SelectLabel = React.forwardRef<
103 |   React.ElementRef<typeof SelectPrimitive.Label>,
104 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105 | >(({ className, ...props }, ref) => (
106 |   <SelectPrimitive.Label
107 |     ref={ref}
108 |     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
109 |     {...props}
110 |   />
111 | ))
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName
113 | 
114 | const SelectItem = React.forwardRef<
115 |   React.ElementRef<typeof SelectPrimitive.Item>,
116 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117 | >(({ className, children, ...props }, ref) => (
118 |   <SelectPrimitive.Item
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <SelectPrimitive.ItemIndicator>
128 |         <Check className="h-4 w-4" />
129 |       </SelectPrimitive.ItemIndicator>
130 |     </span>
131 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
132 |   </SelectPrimitive.Item>
133 | ))
134 | SelectItem.displayName = SelectPrimitive.Item.displayName
135 | 
136 | const SelectSeparator = React.forwardRef<
137 |   React.ElementRef<typeof SelectPrimitive.Separator>,
138 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
139 | >(({ className, ...props }, ref) => (
140 |   <SelectPrimitive.Separator
141 |     ref={ref}
142 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
143 |     {...props}
144 |   />
145 | ))
146 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
147 | 
148 | export {
149 |   Select,
150 |   SelectGroup,
151 |   SelectValue,
152 |   SelectTrigger,
153 |   SelectContent,
154 |   SelectLabel,
155 |   SelectItem,
156 |   SelectSeparator,
157 |   SelectScrollUpButton,
158 |   SelectScrollDownButton,
159 | }
160 | 


--------------------------------------------------------------------------------
/components/icons.tsx:
--------------------------------------------------------------------------------
  1 | export const BotIcon = () => {
  2 |   return (
  3 |     <svg
  4 |       height="16"
  5 |       strokeLinejoin="round"
  6 |       viewBox="0 0 16 16"
  7 |       width="16"
  8 |       style={{ color: "currentcolor" }}
  9 |     >
 10 |       <path
 11 |         fillRule="evenodd"
 12 |         clipRule="evenodd"
 13 |         d="M8.75 2.79933C9.19835 2.53997 9.5 2.05521 9.5 1.5C9.5 0.671573 8.82843 0 8 0C7.17157 0 6.5 0.671573 6.5 1.5C6.5 2.05521 6.80165 2.53997 7.25 2.79933V5H7C4.027 5 1.55904 7.16229 1.08296 10H0V13H1V14.5V16H2.5H13.5H15V14.5V13H16V10H14.917C14.441 7.16229 11.973 5 9 5H8.75V2.79933ZM7 6.5C4.51472 6.5 2.5 8.51472 2.5 11V14.5H13.5V11C13.5 8.51472 11.4853 6.5 9 6.5H7ZM7.25 11.25C7.25 12.2165 6.4665 13 5.5 13C4.5335 13 3.75 12.2165 3.75 11.25C3.75 10.2835 4.5335 9.5 5.5 9.5C6.4665 9.5 7.25 10.2835 7.25 11.25ZM10.5 13C11.4665 13 12.25 12.2165 12.25 11.25C12.25 10.2835 11.4665 9.5 10.5 9.5C9.5335 9.5 8.75 10.2835 8.75 11.25C8.75 12.2165 9.5335 13 10.5 13Z"
 14 |         fill="currentColor"
 15 |       ></path>
 16 |     </svg>
 17 |   );
 18 | };
 19 | 
 20 | export const UserIcon = () => {
 21 |   return (
 22 |     <svg
 23 |       data-testid="geist-icon"
 24 |       height="16"
 25 |       strokeLinejoin="round"
 26 |       viewBox="0 0 16 16"
 27 |       width="16"
 28 |       style={{ color: "currentcolor" }}
 29 |     >
 30 |       <path
 31 |         fillRule="evenodd"
 32 |         clipRule="evenodd"
 33 |         d="M7.75 0C5.95507 0 4.5 1.45507 4.5 3.25V3.75C4.5 5.54493 5.95507 7 7.75 7H8.25C10.0449 7 11.5 5.54493 11.5 3.75V3.25C11.5 1.45507 10.0449 0 8.25 0H7.75ZM6 3.25C6 2.2835 6.7835 1.5 7.75 1.5H8.25C9.2165 1.5 10 2.2835 10 3.25V3.75C10 4.7165 9.2165 5.5 8.25 5.5H7.75C6.7835 5.5 6 4.7165 6 3.75V3.25ZM2.5 14.5V13.1709C3.31958 11.5377 4.99308 10.5 6.82945 10.5H9.17055C11.0069 10.5 12.6804 11.5377 13.5 13.1709V14.5H2.5ZM6.82945 9C4.35483 9 2.10604 10.4388 1.06903 12.6857L1 12.8353V13V15.25V16H1.75H14.25H15V15.25V13V12.8353L14.931 12.6857C13.894 10.4388 11.6452 9 9.17055 9H6.82945Z"
 34 |         fill="currentColor"
 35 |       ></path>
 36 |     </svg>
 37 |   );
 38 | };
 39 | 
 40 | export const AttachmentIcon = () => {
 41 |   return (
 42 |     <svg
 43 |       height="16"
 44 |       strokeLinejoin="round"
 45 |       viewBox="0 0 16 16"
 46 |       width="16"
 47 |       style={{ color: "currentcolor" }}
 48 |     >
 49 |       <path
 50 |         fillRule="evenodd"
 51 |         clipRule="evenodd"
 52 |         d="M14.5 6.5V13.5C14.5 14.8807 13.3807 16 12 16H4C2.61929 16 1.5 14.8807 1.5 13.5V1.5V0H3H8H9.08579C9.351 0 9.60536 0.105357 9.79289 0.292893L14.2071 4.70711C14.3946 4.89464 14.5 5.149 14.5 5.41421V6.5ZM13 6.5V13.5C13 14.0523 12.5523 14.5 12 14.5H4C3.44772 14.5 3 14.0523 3 13.5V1.5H8V5V6.5H9.5H13ZM9.5 2.12132V5H12.3787L9.5 2.12132Z"
 53 |         fill="currentColor"
 54 |       ></path>
 55 |     </svg>
 56 |   );
 57 | };
 58 | 
 59 | export const VercelIcon = ({ size = 17 }) => {
 60 |   return (
 61 |     <svg
 62 |       height={size}
 63 |       strokeLinejoin="round"
 64 |       viewBox="0 0 16 16"
 65 |       width={size}
 66 |       style={{ color: "currentcolor" }}
 67 |     >
 68 |       <path
 69 |         fillRule="evenodd"
 70 |         clipRule="evenodd"
 71 |         d="M8 1L16 15H0L8 1Z"
 72 |         fill="currentColor"
 73 |       ></path>
 74 |     </svg>
 75 |   );
 76 | };
 77 | 
 78 | export const MasonryIcon = () => {
 79 |   return (
 80 |     <svg
 81 |       height="16"
 82 |       strokeLinejoin="round"
 83 |       viewBox="0 0 16 16"
 84 |       width="16"
 85 |       style={{ color: "currentcolor" }}
 86 |     >
 87 |       <path
 88 |         fillRule="evenodd"
 89 |         clipRule="evenodd"
 90 |         d="M2.5 6.5V2.5H5.5V6.5H2.5ZM1 2C1 1.44772 1.44772 1 2 1H6C6.55228 1 7 1.44772 7 2V7C7 7.55228 6.55228 8 6 8H2C1.44772 8 1 7.55228 1 7V2ZM2.5 13.5V11.5H5.5V13.5H2.5ZM1 11C1 10.4477 1.44772 10 2 10H6C6.55228 10 7 10.4477 7 11V14C7 14.5523 6.55228 15 6 15H2C1.44772 15 1 14.5523 1 14V11ZM10.5 2.5V4.5H13.5V2.5H10.5ZM10 1C9.44772 1 9 1.44772 9 2V5C9 5.55228 9.44772 6 10 6H14C14.5523 6 15 5.55228 15 5V2C15 1.44772 14.5523 1 14 1H10ZM13.5 13.5H10.5V9.5H13.5V13.5ZM9 9C9 8.44772 9.44772 8 10 8H14C14.5523 8 15 8.44772 15 9V14C15 14.5523 14.5523 15 14 15H10C9.44772 15 9 14.5523 9 14V9Z"
 91 |         fill="currentColor"
 92 |       ></path>
 93 |     </svg>
 94 |   );
 95 | };
 96 | 
 97 | export const GitIcon = () => {
 98 |   return (
 99 |     <svg
100 |       height="16"
101 |       strokeLinejoin="round"
102 |       viewBox="0 0 16 16"
103 |       width="16"
104 |       style={{ color: "currentcolor" }}
105 |     >
106 |       <g clipPath="url(#clip0_872_3147)">
107 |         <path
108 |           fillRule="evenodd"
109 |           clipRule="evenodd"
110 |           d="M8 0C3.58 0 0 3.57879 0 7.99729C0 11.5361 2.29 14.5251 5.47 15.5847C5.87 15.6547 6.02 15.4148 6.02 15.2049C6.02 15.0149 6.01 14.3851 6.01 13.7154C4 14.0852 3.48 13.2255 3.32 12.7757C3.23 12.5458 2.84 11.836 2.5 11.6461C2.22 11.4961 1.82 11.1262 2.49 11.1162C3.12 11.1062 3.57 11.696 3.72 11.936C4.44 13.1455 5.59 12.8057 6.05 12.5957C6.12 12.0759 6.33 11.726 6.56 11.5261C4.78 11.3262 2.92 10.6364 2.92 7.57743C2.92 6.70773 3.23 5.98797 3.74 5.42816C3.66 5.22823 3.38 4.40851 3.82 3.30888C3.82 3.30888 4.49 3.09895 6.02 4.1286C6.66 3.94866 7.34 3.85869 8.02 3.85869C8.7 3.85869 9.38 3.94866 10.02 4.1286C11.55 3.08895 12.22 3.30888 12.22 3.30888C12.66 4.40851 12.38 5.22823 12.3 5.42816C12.81 5.98797 13.12 6.69773 13.12 7.57743C13.12 10.6464 11.25 11.3262 9.47 11.5261C9.76 11.776 10.01 12.2558 10.01 13.0056C10.01 14.0752 10 14.9349 10 15.2049C10 15.4148 10.15 15.6647 10.55 15.5847C12.1381 15.0488 13.5182 14.0284 14.4958 12.6673C15.4735 11.3062 15.9996 9.67293 16 7.99729C16 3.57879 12.42 0 8 0Z"
111 |           fill="currentColor"
112 |         ></path>
113 |       </g>
114 |       <defs>
115 |         <clipPath id="clip0_872_3147">
116 |           <rect width="16" height="16" fill="white"></rect>
117 |         </clipPath>
118 |       </defs>
119 |     </svg>
120 |   );
121 | };
122 | 
123 | export const BoxIcon = ({ size = 16 }: { size: number }) => {
124 |   return (
125 |     <svg
126 |       height={size}
127 |       strokeLinejoin="round"
128 |       viewBox="0 0 16 16"
129 |       width={size}
130 |       style={{ color: "currentcolor" }}
131 |     >
132 |       <path
133 |         fillRule="evenodd"
134 |         clipRule="evenodd"
135 |         d="M8 0.154663L8.34601 0.334591L14.596 3.58459L15 3.79466V4.25V11.75V12.2053L14.596 12.4154L8.34601 15.6654L8 15.8453L7.65399 15.6654L1.40399 12.4154L1 12.2053V11.75V4.25V3.79466L1.40399 3.58459L7.65399 0.334591L8 0.154663ZM2.5 11.2947V5.44058L7.25 7.81559V13.7647L2.5 11.2947ZM8.75 13.7647L13.5 11.2947V5.44056L8.75 7.81556V13.7647ZM8 1.84534L12.5766 4.22519L7.99998 6.51352L3.42335 4.2252L8 1.84534Z"
136 |         fill="currentColor"
137 |       ></path>
138 |     </svg>
139 |   );
140 | };
141 | 
142 | export const HomeIcon = ({ size = 16 }: { size: number }) => {
143 |   return (
144 |     <svg
145 |       height={size}
146 |       strokeLinejoin="round"
147 |       viewBox="0 0 16 16"
148 |       width={size}
149 |       style={{ color: "currentcolor" }}
150 |     >
151 |       <path
152 |         fillRule="evenodd"
153 |         clipRule="evenodd"
154 |         d="M12.5 6.56062L8.00001 2.06062L3.50001 6.56062V13.5L6.00001 13.5V11C6.00001 9.89539 6.89544 8.99996 8.00001 8.99996C9.10458 8.99996 10 9.89539 10 11V13.5L12.5 13.5V6.56062ZM13.78 5.71933L8.70711 0.646409C8.31659 0.255886 7.68342 0.255883 7.2929 0.646409L2.21987 5.71944C2.21974 5.71957 2.21961 5.7197 2.21949 5.71982L0.469676 7.46963L-0.0606537 7.99996L1.00001 9.06062L1.53034 8.53029L2.00001 8.06062V14.25V15H2.75001L6.00001 15H7.50001H8.50001H10L13.25 15H14V14.25V8.06062L14.4697 8.53029L15 9.06062L16.0607 7.99996L15.5303 7.46963L13.7806 5.71993C13.7804 5.71973 13.7802 5.71953 13.78 5.71933ZM8.50001 11V13.5H7.50001V11C7.50001 10.7238 7.72386 10.5 8.00001 10.5C8.27615 10.5 8.50001 10.7238 8.50001 11Z"
155 |         fill="currentColor"
156 |       ></path>
157 |     </svg>
158 |   );
159 | };
160 | 
161 | export const GPSIcon = ({ size = 16 }: { size: number }) => {
162 |   return (
163 |     <svg
164 |       height={size}
165 |       strokeLinejoin="round"
166 |       viewBox="0 0 16 16"
167 |       width={size}
168 |       style={{ color: "currentcolor" }}
169 |     >
170 |       <path
171 |         d="M1 6L15 1L10 15L7.65955 8.91482C7.55797 8.65073 7.34927 8.44203 7.08518 8.34045L1 6Z"
172 |         stroke="currentColor"
173 |         strokeWidth="1.5"
174 |         strokeLinecap="round"
175 |         strokeLinejoin="bevel"
176 |         fill="transparent"
177 |       ></path>
178 |     </svg>
179 |   );
180 | };
181 | 
182 | export const InvoiceIcon = ({ size = 16 }: { size: number }) => {
183 |   return (
184 |     <svg
185 |       height={size}
186 |       strokeLinejoin="round"
187 |       viewBox="0 0 16 16"
188 |       width={size}
189 |       style={{ color: "currentcolor" }}
190 |     >
191 |       <path
192 |         fillRule="evenodd"
193 |         clipRule="evenodd"
194 |         d="M13 15.1L12 14.5L10.1524 15.8857C10.0621 15.9534 9.93791 15.9534 9.8476 15.8857L8 14.5L6.14377 15.8922C6.05761 15.9568 5.94008 15.9601 5.85047 15.9003L3.75 14.5L3 15L2.83257 15.1116L1.83633 15.7758L1.68656 15.8756C1.60682 15.9288 1.5 15.8716 1.5 15.7758V15.5958V14.3985V14.1972V1.5V0H3H8H9.08579C9.351 0 9.60536 0.105357 9.79289 0.292893L14.2071 4.70711C14.3946 4.89464 14.5 5.149 14.5 5.41421V6.5V14.2507V14.411V15.5881V15.7881C14.5 15.8813 14.3982 15.9389 14.3183 15.891L14.1468 15.7881L13.1375 15.1825L13 15.1ZM12.3787 5L9.5 2.12132V5H12.3787ZM8 1.5V5V6.5H9.5H13V13.3507L12.7717 13.2138L11.9069 12.6948L11.1 13.3L10 14.125L8.9 13.3L8 12.625L7.1 13.3L5.94902 14.1632L4.58205 13.2519L3.75 12.6972L3 13.1972V1.5H8Z"
195 |         fill="currentColor"
196 |       ></path>
197 |     </svg>
198 |   );
199 | };


--------------------------------------------------------------------------------
/components/app-layout.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useState, useEffect, useRef } from "react";
  4 | import * as Tooltip from "@radix-ui/react-tooltip";
  5 | import { Mic } from "lucide-react";
  6 | import FlowingTranscript from "./flowing-transcript";
  7 | import { Button } from "@/components/ui/button";
  8 | import { motion } from "motion/react";
  9 | 
 10 | import {
 11 |   LiveConnectionState,
 12 |   LiveTranscriptionEvent,
 13 |   LiveTranscriptionEvents,
 14 |   useDeepgram,
 15 | } from "@/app/context/DeepgramContextProvider";
 16 | import {
 17 |   MicrophoneEvents,
 18 |   MicrophoneState,
 19 |   useMicrophone,
 20 | } from "@/app/context/MicrophoneContextProvider";
 21 | import { toast } from "sonner";
 22 | import { Statement, ValidatedStatement } from "@/utils/schemas";
 23 | import { splitIntoStatements } from "@/lib/utils";
 24 | import { GitIcon, VercelIcon } from "./icons";
 25 | import Link from "next/link";
 26 | 
 27 | export default function AppLayout() {
 28 |   // Core state
 29 |   const [isListening, setIsListening] = useState(true);
 30 |   const [currentPhrase, setCurrentPhrase] = useState<string>("");
 31 |   const [statements, setStatements] = useState<Statement[]>([]);
 32 |   const [talking, setIsTalking] = useState(false);
 33 |   const statementsRef = useRef<Statement[]>([]);
 34 |   useEffect(() => {
 35 |     statementsRef.current = statements;
 36 |   }, [statements]);
 37 | 
 38 |   // Keep track of statement index
 39 |   const statementIndex = useRef<number>(0);
 40 | 
 41 |   // Deepgram and microphone hooks
 42 |   const { connection, connectToDeepgram, connectionState, error } =
 43 |     useDeepgram();
 44 |   const {
 45 |     setupMicrophone,
 46 |     microphone,
 47 |     startMicrophone,
 48 |     microphoneState,
 49 |     stopMicrophone,
 50 |   } = useMicrophone();
 51 | 
 52 |   const captionTimeout = useRef<NodeJS.Timeout>();
 53 |   const keepAliveInterval = useRef<NodeJS.Timeout>();
 54 |   const unfinishedTextRef = useRef<string>("");
 55 |   const lastTranscriptTime = useRef<number>(Date.now());
 56 |   const pauseTimeout = useRef<NodeJS.Timeout>();
 57 | 
 58 |   const createNewStatement = (text: string) => {
 59 |     return {
 60 |       text: text.trim(),
 61 |       timestamp: Date.now(),
 62 |       processed: false,
 63 |       index: statementIndex.current++,
 64 |     };
 65 |   };
 66 | 
 67 |   const processStatement = async (statement: Statement) => {
 68 |     try {
 69 |       const result = await checkFakeNews(statement.text);
 70 |       statement.processed = true;
 71 |       statement.result = result;
 72 |       return statement;
 73 |     } catch (error) {
 74 |       console.error("Error processing statement:", error);
 75 |       return statement;
 76 |     }
 77 |   };
 78 | 
 79 |   const createStatementFromUnfinished = () => {
 80 |     if (unfinishedTextRef.current) {
 81 |       const completeStatement = unfinishedTextRef.current + ".";
 82 |       const newStatement = createNewStatement(completeStatement);
 83 |       setStatements((prev) => [...prev, newStatement]);
 84 |       processStatement(newStatement).then((processedStatement) => {
 85 |         setStatements((prev) =>
 86 |           prev.map((s) =>
 87 |             s.index === processedStatement.index ? processedStatement : s,
 88 |           ),
 89 |         );
 90 |       });
 91 |       unfinishedTextRef.current = "";
 92 |     }
 93 |   };
 94 | 
 95 |   const checkFakeNews = async (
 96 |     statement: string,
 97 |   ): Promise<ValidatedStatement> => {
 98 |     try {
 99 |       const response = await fetch(`/api/validate-statement`, {
100 |         body: JSON.stringify({
101 |           statement,
102 |           transcript: statementsRef.current.map((s) => s.text).join(" "),
103 |         }),
104 |         method: "POST",
105 |         headers: {
106 |           "Content-Type": "application/json",
107 |         },
108 |       });
109 |       return response.json();
110 |     } catch (error) {
111 |       toast.error("Error validating statement", {
112 |         position: "top-center",
113 |         richColors: true,
114 |       });
115 |       throw error;
116 |     }
117 |   };
118 | 
119 |   useEffect(() => {
120 |     setupMicrophone();
121 |     // eslint-disable-next-line react-hooks/exhaustive-deps
122 |   }, []);
123 | 
124 |   useEffect(() => {
125 |     let timer: NodeJS.Timeout;
126 |     if (isListening) {
127 |       timer = setTimeout(() => {
128 |         setIsListening(false);
129 |         toast.warning("Listening ended", {
130 |           description: "The 3-minute recording limit was reached",
131 |           richColors: true,
132 |         });
133 |       }, 180 * 1000);
134 |     } else {
135 |       // When stopping listening, process any remaining unfinished text
136 |       createStatementFromUnfinished();
137 |     }
138 |     return () => clearTimeout(timer);
139 |     // eslint-disable-next-line react-hooks/exhaustive-deps
140 |   }, [isListening]);
141 | 
142 |   useEffect(() => {
143 |     if (microphoneState === MicrophoneState.Ready) {
144 |       connectToDeepgram({
145 |         model: "nova-2",
146 |         interim_results: true,
147 |         smart_format: true,
148 |         endpointing: 2500,
149 |         filler_words: true,
150 |         keywords: [
151 |           "Next.js",
152 |           "React",
153 |           "Vercel",
154 |           "Guillermo",
155 |           "Guillermo Rauch",
156 |           "Socket.io",
157 |         ],
158 |       });
159 |       toast.info("Setting up environment", {
160 |         position: "top-center",
161 |         richColors: true,
162 |         description: "Please wait while your microphone is set up.",
163 |       });
164 |     }
165 |     // eslint-disable-next-line react-hooks/exhaustive-deps
166 |   }, [microphoneState]);
167 | 
168 |   useEffect(() => {
169 |     if (!microphone || !connection) return;
170 | 
171 |     const onData = (e: BlobEvent) => {
172 |       if (e.data.size > 0) {
173 |         connection?.send(e.data);
174 |       }
175 |     };
176 | 
177 |     const onTranscript = (data: LiveTranscriptionEvent) => {
178 |       const { is_final: isFinal } = data;
179 |       const thisCaption = data.channel.alternatives[0].transcript;
180 | 
181 |       if (thisCaption) {
182 |         setIsTalking(true);
183 |         setCurrentPhrase(thisCaption);
184 |         lastTranscriptTime.current = Date.now();
185 | 
186 |         clearTimeout(pauseTimeout.current);
187 |         pauseTimeout.current = setTimeout(() => {
188 |           if (Date.now() - lastTranscriptTime.current >= 3000) {
189 |             createStatementFromUnfinished();
190 |           }
191 |         }, 3000);
192 | 
193 |         if (isFinal) {
194 |           setIsTalking(false);
195 |           // Update both state and ref for unfinished text
196 |           const updatedText = (
197 |             unfinishedTextRef.current +
198 |             " " +
199 |             thisCaption
200 |           ).trim();
201 |           unfinishedTextRef.current = updatedText;
202 | 
203 |           // Find complete statements
204 |           const completeStatements = splitIntoStatements(updatedText);
205 | 
206 |           if (completeStatements.length > 0) {
207 |             const newStatements = completeStatements.map(createNewStatement);
208 |             setStatements((prev) => [...prev, ...newStatements]);
209 | 
210 |             // Process each new complete statement
211 |             newStatements.forEach(async (statement) => {
212 |               const processedStatement = await processStatement(statement);
213 |               setStatements((prev) =>
214 |                 prev.map((s) =>
215 |                   s.index === processedStatement.index ? processedStatement : s,
216 |                 ),
217 |               );
218 |             });
219 | 
220 |             // Keep any remaining text that doesn't end with punctuation
221 |             const remainingText = updatedText.match(/[^.!?]+$/)?.[0]?.trim();
222 |             unfinishedTextRef.current = remainingText || "";
223 |           } else {
224 |             // If no complete statements, add to unfinished text
225 |             unfinishedTextRef.current = updatedText;
226 |           }
227 | 
228 |           clearTimeout(captionTimeout.current);
229 |           captionTimeout.current = setTimeout(() => {
230 |             setCurrentPhrase("");
231 |           }, 3000);
232 |         }
233 |       }
234 |     };
235 | 
236 |     if (connectionState === LiveConnectionState.OPEN && isListening) {
237 |       connection.addListener(LiveTranscriptionEvents.Transcript, onTranscript);
238 |       microphone.addEventListener(MicrophoneEvents.DataAvailable, onData);
239 |       startMicrophone();
240 |     }
241 | 
242 |     if (connectionState === LiveConnectionState.OPEN && !isListening) {
243 |       stopMicrophone();
244 |     }
245 | 
246 |     return () => {
247 |       connection.removeListener(
248 |         LiveTranscriptionEvents.Transcript,
249 |         onTranscript,
250 |       );
251 |       microphone.removeEventListener(MicrophoneEvents.DataAvailable, onData);
252 |       clearTimeout(captionTimeout.current);
253 |       clearTimeout(pauseTimeout.current);
254 |     };
255 |     // eslint-disable-next-line react-hooks/exhaustive-deps
256 |   }, [connectionState, isListening]);
257 | 
258 |   useEffect(() => {
259 |     if (!connection) return;
260 | 
261 |     if (
262 |       microphoneState !== MicrophoneState.Open &&
263 |       connectionState === LiveConnectionState.OPEN
264 |     ) {
265 |       connection.keepAlive();
266 |       keepAliveInterval.current = setInterval(() => {
267 |         connection.keepAlive();
268 |       }, 10000);
269 |     } else {
270 |       clearInterval(keepAliveInterval.current);
271 |     }
272 | 
273 |     return () => clearInterval(keepAliveInterval.current);
274 |     // eslint-disable-next-line react-hooks/exhaustive-deps
275 |   }, [microphoneState, connectionState]);
276 | 
277 |   const toggleListening = () => setIsListening(!isListening);
278 | 
279 |   useEffect(() => {
280 |     if (
281 |       microphoneState === MicrophoneState.Open &&
282 |       connectionState === LiveConnectionState.OPEN
283 |     ) {
284 |       setIsListening(true);
285 |       toast.success("AI Facts is now listening.", {
286 |         position: "top-center",
287 |         richColors: true,
288 |       });
289 |     }
290 |     if (
291 |       microphoneState === MicrophoneState.Paused &&
292 |       connectionState === LiveConnectionState.OPEN
293 |     ) {
294 |       setIsListening(false);
295 |       toast.warning("AI Facts is no longer listening.", {
296 |         position: "top-center",
297 |         richColors: true,
298 |       });
299 |     }
300 |   }, [microphoneState, connectionState]);
301 | 
302 |   useEffect(() => {
303 |     if (error) {
304 |       toast.error("Connection Error", {
305 |         description: "Please try again later.",
306 |         position: "top-center",
307 |         richColors: true,
308 |       });
309 |     }
310 |   }, [error]);
311 | 
312 |   return (
313 |     <div className="min-h-screen bg-muted p-4 relative">
314 |       <div className="max-w-2xl w-full mx-auto flex flex-col items-center">
315 |         <div className="flex justify-end w-full h-full space-x-2 mb-4">
316 |           <Tooltip.Provider>
317 |             <Tooltip.Root>
318 |               <Tooltip.Trigger asChild>
319 |                 <Button
320 |                   disabled={
321 |                     connectionState !== LiveConnectionState.OPEN ||
322 |                     microphoneState === MicrophoneState.NotSetup
323 |                   }
324 |                   variant="outline"
325 |                   size="icon"
326 |                   onClick={toggleListening}
327 |                   aria-label={
328 |                     isListening ? "Stop listening" : "Start listening"
329 |                   }
330 |                 >
331 |                   {isListening &&
332 |                   microphoneState === MicrophoneState.Open &&
333 |                   connectionState === LiveConnectionState.OPEN ? (
334 |                     <Mic size={20} className="text-red-500 animate-pulse" />
335 |                   ) : (
336 |                     <Mic size={20} />
337 |                   )}
338 |                 </Button>
339 |               </Tooltip.Trigger>
340 |               <Tooltip.Portal>
341 |                 <Tooltip.Content className="bg-background p-2 rounded shadow-lg border border-border">
342 |                   <p>{isListening ? "Stop listening" : "Start listening"}</p>
343 |                   <Tooltip.Arrow className="fill-background" />
344 |                 </Tooltip.Content>
345 |               </Tooltip.Portal>
346 |             </Tooltip.Root>
347 |           </Tooltip.Provider>
348 |         </div>
349 |         <FlowingTranscript
350 |           statements={statements}
351 |           unprocessed={[unfinishedTextRef.current, currentPhrase].join(" ")}
352 |           isTalking={talking}
353 |         />
354 |         <motion.div
355 |           className="flex flex-row gap-4 items-center justify-between fixed bottom-6 text-xs"
356 |           initial={{ y: 20, opacity: 0 }}
357 |           animate={{ y: 0, opacity: 1 }}
358 |         >
359 |           <Link
360 |             target="_blank"
361 |             href="https://github.com/vercel-labs/ai-facts"
362 |             className="flex flex-row gap-2 items-center border px-2 py-1.5 rounded-md bg-white hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800"
363 |           >
364 |             <GitIcon />
365 |             View Source Code
366 |           </Link>
367 | 
368 |           <Link
369 |             target="_blank"
370 |             href="https://vercel.com/templates/next.js/ai-facts"
371 |             className="flex flex-row gap-2 items-center bg-zinc-900 px-2 py-1.5 rounded-md text-zinc-50 hover:bg-zinc-950 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-50"
372 |           >
373 |             <VercelIcon size={14} />
374 |             Deploy with Vercel
375 |           </Link>
376 |         </motion.div>
377 |       </div>
378 |     </div>
379 |   );
380 | }
381 | 


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