├── src
    ├── app
    │   ├── favicon.ico
    │   ├── fonts
    │   │   ├── GeistVF.woff
    │   │   └── GeistMonoVF.woff
    │   ├── layout.tsx
    │   ├── api
    │   │   └── chat
    │   │   │   └── route.ts
    │   ├── globals.css
    │   └── page.tsx
    ├── pages
    │   └── api
    │   │   └── auth
    │   │       └── [...nextauth].ts
    ├── lib
    │   ├── utils.ts
    │   ├── prisma.ts
    │   └── auth.ts
    ├── components
    │   ├── AuthProvider.tsx
    │   ├── Footer.tsx
    │   ├── ui
    │   │   ├── label.tsx
    │   │   ├── textarea.tsx
    │   │   ├── input.tsx
    │   │   ├── tooltip.tsx
    │   │   ├── avatar.tsx
    │   │   ├── scroll-area.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── select.tsx
    │   │   └── dropdown-menu.tsx
    │   ├── SignInButton.tsx
    │   └── Navbar.tsx
    ├── utils
    │   └── supabase.ts
    └── types
    │   └── next-auth.d.ts
├── .env.example
├── postcss.config.mjs
├── next.config.mjs
├── components.json
├── .gitignore
├── .eslintrc.json
├── tsconfig.json
├── README.md
├── prisma
    └── schema.prisma
├── package.json
└── tailwind.config.ts


/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sugarforever/openai-audio-buddy/main/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sugarforever/openai-audio-buddy/main/src/app/fonts/GeistVF.woff


--------------------------------------------------------------------------------
/src/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sugarforever/openai-audio-buddy/main/src/app/fonts/GeistMonoVF.woff


--------------------------------------------------------------------------------
/src/pages/api/auth/[...nextauth].ts:
--------------------------------------------------------------------------------
1 | import NextAuth from "next-auth";
2 | import { authOptions } from "@/lib/auth";
3 | 
4 | export default NextAuth(authOptions);


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | GOOGLE_CLIENT_ID=
2 | GOOGLE_CLIENT_SECRET=
3 | NEXTAUTH_URL=http://localhost:3000
4 | NEXTAUTH_SECRET=
5 | DATABASE_URL=postgresql://localhost:5432/example
6 | OPENAI_API_KEY=


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


--------------------------------------------------------------------------------
/src/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 | 


--------------------------------------------------------------------------------
/src/components/AuthProvider.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | 
3 | import { SessionProvider } from "next-auth/react"
4 | 
5 | export default function AuthProvider({ children }: { children: React.ReactNode }) {
6 |   return <SessionProvider>{children}</SessionProvider>
7 | }


--------------------------------------------------------------------------------
/src/utils/supabase.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from '@supabase/supabase-js'
2 | 
3 | const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
4 | const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
5 | 
6 | export const supabase = createClient(supabaseUrl, supabaseAnonKey)


--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | const Footer = () => {
 2 |   return (
 3 |     <footer className="bg-white text-black py-4">
 4 |       <div className="container mx-auto flex justify-center items-center">
 5 |         <p className="text-sm">&copy; {new Date().getFullYear()}</p>
 6 |       </div>
 7 |     </footer>
 8 |   );
 9 | };
10 | 
11 | export default Footer;


--------------------------------------------------------------------------------
/src/types/next-auth.d.ts:
--------------------------------------------------------------------------------
 1 | import { DefaultSession } from "next-auth";
 2 | 
 3 | declare module "next-auth" {
 4 |   interface Session {
 5 |     user?: {
 6 |       id: string;
 7 |       name?: string | null;
 8 |       email?: string | null;
 9 |       image?: string | null;
10 |       balance: number;
11 |       // add other properties you need
12 |     } & DefaultSession["user"];
13 |   }
14 | }


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   env: {
 4 |     GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
 5 |     GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
 6 |     NEXTAUTH_URL: process.env.NEXTAUTH_URL,
 7 |     NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
 8 |     DATABASE_URL: process.env.DATABASE_URL,
 9 |     OPENAI_API_KEY: process.env.OPENAI_API_KEY,
10 |   }
11 | };
12 | 
13 | export default nextConfig;
14 | 


--------------------------------------------------------------------------------
/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": "src/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 | }


--------------------------------------------------------------------------------
/src/lib/prisma.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from '@prisma/client'
 2 | 
 3 | const prismaClientSingleton = () => {
 4 |   return new PrismaClient()
 5 | }
 6 | 
 7 | type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>
 8 | 
 9 | const globalForPrisma = globalThis as unknown as {
10 |   prisma: PrismaClientSingleton | undefined
11 | }
12 | 
13 | const prisma = globalForPrisma.prisma ?? prismaClientSingleton()
14 | 
15 | export default prisma
16 | 
17 | if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma


--------------------------------------------------------------------------------
/.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 | .env
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 
39 | # env files
40 | .env*.local
41 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "next/core-web-vitals",
 4 |     "next/typescript",
 5 |     "plugin:@typescript-eslint/recommended",
 6 |     "prettier"
 7 |   ],
 8 |   "plugins": ["@typescript-eslint"],
 9 |   "parser": "@typescript-eslint/parser",
10 |   "rules": {
11 |     "@typescript-eslint/no-empty-object-type": "off",
12 |     "react/react-in-jsx-scope": "off",
13 |     "react/prop-types": "off",
14 |     "@typescript-eslint/explicit-module-boundary-types": "off",
15 |     "@typescript-eslint/no-explicit-any": "warn",
16 |     "no-unused-vars": "off",
17 |     "@typescript-eslint/no-unused-vars": ["error"]
18 |   }
19 | }


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


--------------------------------------------------------------------------------
/src/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 | 


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


--------------------------------------------------------------------------------
/src/lib/auth.ts:
--------------------------------------------------------------------------------
 1 | import { NextAuthOptions } from "next-auth";
 2 | import GoogleProvider from "next-auth/providers/google";
 3 | import { PrismaAdapter } from "@next-auth/prisma-adapter";
 4 | import prisma from './prisma';
 5 | 
 6 | export const authOptions: NextAuthOptions = {
 7 |   adapter: PrismaAdapter(prisma),
 8 |   providers: [
 9 |     GoogleProvider({
10 |       clientId: process.env.GOOGLE_CLIENT_ID!,
11 |       clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
12 |     }),
13 |   ],
14 |   callbacks: {
15 |     async session({ session, user }) {
16 |       if (session.user) {
17 |         session.user.id = user.id;
18 |         const dbUser = await prisma.user.findUnique({
19 |           where: { id: user.id },
20 |           select: { balance: true },
21 |         });
22 | 
23 |         session.user.balance = dbUser?.balance ?? 0;
24 |       }
25 |       return session;
26 |     },
27 |   },
28 |   secret: process.env.NEXTAUTH_SECRET,
29 | };


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm 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",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/src/components/SignInButton.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { signIn, signOut, useSession } from "next-auth/react";
 4 | import Image from "next/image";
 5 | 
 6 | export default function SignInButton() {
 7 |   const { data: session } = useSession();
 8 | 
 9 |   if (session && session.user) {
10 |     return (
11 |       <div className="flex gap-4 ml-auto items-center">
12 |         {session.user.image && (
13 |           <Image
14 |             src={session.user.image}
15 |             alt={session.user.name || "用户"}
16 |             width={32}
17 |             height={32}
18 |             className="rounded-full"
19 |           />
20 |         )}
21 |         <p className="text-sky-600">{session.user.name}</p>
22 |         <p className="text-green-600">余额: {session.user.balance}</p>
23 |         <button onClick={() => signOut()} className="text-red-600">
24 |           登出
25 |         </button>
26 |       </div>
27 |     );
28 |   }
29 |   return (
30 |     <button onClick={() => signIn("google")} className="text-green-600 ml-auto">
31 |       登录
32 |     </button>
33 |   );
34 | }


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import localFont from "next/font/local";
 2 | import "./globals.css";
 3 | import AuthProvider from "../components/AuthProvider";
 4 | import Navbar from "@/components/Navbar";
 5 | import Footer from "@/components/Footer";
 6 | import { Analytics } from "@vercel/analytics/react"
 7 | import React from 'react';
 8 | 
 9 | const geistSans = localFont({
10 |   src: "./fonts/GeistVF.woff",
11 |   variable: "--font-geist-sans",
12 |   weight: "100 900",
13 | });
14 | const geistMono = localFont({
15 |   src: "./fonts/GeistMonoVF.woff",
16 |   variable: "--font-geist-mono",
17 |   weight: "100 900",
18 | });
19 | 
20 | export default function RootLayout({
21 |   children,
22 | }: Readonly<{
23 |   children: React.ReactNode;
24 | }>) {
25 |   return (
26 |     <html lang="en">
27 |       <AuthProvider>
28 |         <body
29 |           className={`${geistSans.variable} ${geistMono.variable} antialiased`}
30 |         >
31 |           <Navbar />
32 |           <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
33 |             {children}
34 |           </main>
35 |           <Footer />
36 |           <Analytics />
37 |         </body>
38 |       </AuthProvider>
39 |     </html>
40 |   );
41 | }
42 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org) boilerplate with Google OAuth service provider integrated.
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 | 


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | generator client {
 2 |   provider = "prisma-client-js"
 3 | }
 4 | 
 5 | datasource db {
 6 |   provider = "postgresql"
 7 |   url      = env("DATABASE_URL")
 8 | }
 9 | 
10 | model Account {
11 |    id                 String  @id @default(cuid())
12 |    userId             String
13 |    type               String
14 |    provider           String
15 |    providerAccountId  String
16 |    refresh_token      String?  @db.Text
17 |    access_token       String?  @db.Text
18 |    expires_at         Int?
19 |    token_type         String?
20 |    scope              String?
21 |    id_token           String?  @db.Text
22 |    session_state      String?
23 |  
24 |    user User @relation(fields: [userId], references: [id], onDelete: Cascade)
25 |  
26 |    @@unique([provider, providerAccountId])
27 |  }
28 |  
29 |  model Session {
30 |    id           String   @id @default(cuid())
31 |    sessionToken String   @unique
32 |    userId       String
33 |    expires      DateTime
34 |    user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
35 |  }
36 |  
37 |  model User {
38 |    id            String    @id @default(cuid())
39 |    name          String?
40 |    email         String?   @unique
41 |    emailVerified DateTime?
42 |    image         String?
43 |    balance       Int       @default(5)
44 |    accounts      Account[]
45 |    sessions      Session[]
46 |  }
47 | 
48 | model VerificationToken {
49 |    identifier String
50 |    token      String   @unique
51 |    expires    DateTime
52 |     @@unique([identifier, token])
53 |  }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-boilerplate",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@next-auth/prisma-adapter": "^1.0.7",
13 |     "@prisma/client": "^5.19.1",
14 |     "@radix-ui/react-avatar": "^1.1.0",
15 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
16 |     "@radix-ui/react-icons": "^1.3.0",
17 |     "@radix-ui/react-label": "^2.1.0",
18 |     "@radix-ui/react-scroll-area": "^1.2.0",
19 |     "@radix-ui/react-select": "^2.1.1",
20 |     "@radix-ui/react-slot": "^1.1.0",
21 |     "@radix-ui/react-tooltip": "^1.1.2",
22 |     "@supabase/supabase-js": "^2.45.4",
23 |     "@vercel/analytics": "^1.3.1",
24 |     "class-variance-authority": "^0.7.0",
25 |     "clsx": "^2.1.1",
26 |     "framer-motion": "^11.8.0",
27 |     "lucide-react": "^0.441.0",
28 |     "next": "14.2.12",
29 |     "next-auth": "^4.24.7",
30 |     "openai": "^4.68.1",
31 |     "react": "^18",
32 |     "react-dom": "^18",
33 |     "tailwind-merge": "^2.5.2",
34 |     "tailwindcss-animate": "^1.0.7"
35 |   },
36 |   "devDependencies": {
37 |     "@types/node": "^20",
38 |     "@types/react": "^18",
39 |     "@types/react-dom": "^18",
40 |     "@typescript-eslint/eslint-plugin": "^8.8.1",
41 |     "@typescript-eslint/parser": "^8.8.1",
42 |     "eslint": "^8",
43 |     "eslint-config-next": "14.2.12",
44 |     "eslint-config-prettier": "^9.1.0",
45 |     "postcss": "^8",
46 |     "prisma": "^5.19.1",
47 |     "tailwindcss": "^3.4.1",
48 |     "typescript": "^5"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const ScrollArea = React.forwardRef<
 9 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
11 | >(({ className, children, ...props }, ref) => (
12 |   <ScrollAreaPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative overflow-hidden", className)}
15 |     {...props}
16 |   >
17 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
18 |       {children}
19 |     </ScrollAreaPrimitive.Viewport>
20 |     <ScrollBar />
21 |     <ScrollAreaPrimitive.Corner />
22 |   </ScrollAreaPrimitive.Root>
23 | ))
24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
25 | 
26 | const ScrollBar = React.forwardRef<
27 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
28 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
29 | >(({ className, orientation = "vertical", ...props }, ref) => (
30 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
31 |     ref={ref}
32 |     orientation={orientation}
33 |     className={cn(
34 |       "flex touch-none select-none transition-colors",
35 |       orientation === "vertical" &&
36 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
37 |       orientation === "horizontal" &&
38 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
39 |       className
40 |     )}
41 |     {...props}
42 |   >
43 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
44 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
45 | ))
46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47 | 
48 | export { ScrollArea, ScrollBar }
49 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |     darkMode: ["class"],
 5 |     content: [
 6 |     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
 9 |   ],
10 |   theme: {
11 |   	extend: {
12 |   		colors: {
13 |   			background: 'hsl(var(--background))',
14 |   			foreground: 'hsl(var(--foreground))',
15 |   			card: {
16 |   				DEFAULT: 'hsl(var(--card))',
17 |   				foreground: 'hsl(var(--card-foreground))'
18 |   			},
19 |   			popover: {
20 |   				DEFAULT: 'hsl(var(--popover))',
21 |   				foreground: 'hsl(var(--popover-foreground))'
22 |   			},
23 |   			primary: {
24 |   				DEFAULT: 'hsl(var(--primary))',
25 |   				foreground: 'hsl(var(--primary-foreground))'
26 |   			},
27 |   			secondary: {
28 |   				DEFAULT: 'hsl(var(--secondary))',
29 |   				foreground: 'hsl(var(--secondary-foreground))'
30 |   			},
31 |   			muted: {
32 |   				DEFAULT: 'hsl(var(--muted))',
33 |   				foreground: 'hsl(var(--muted-foreground))'
34 |   			},
35 |   			accent: {
36 |   				DEFAULT: 'hsl(var(--accent))',
37 |   				foreground: 'hsl(var(--accent-foreground))'
38 |   			},
39 |   			destructive: {
40 |   				DEFAULT: 'hsl(var(--destructive))',
41 |   				foreground: 'hsl(var(--destructive-foreground))'
42 |   			},
43 |   			border: 'hsl(var(--border))',
44 |   			input: 'hsl(var(--input))',
45 |   			ring: 'hsl(var(--ring))',
46 |   			chart: {
47 |   				'1': 'hsl(var(--chart-1))',
48 |   				'2': 'hsl(var(--chart-2))',
49 |   				'3': 'hsl(var(--chart-3))',
50 |   				'4': 'hsl(var(--chart-4))',
51 |   				'5': 'hsl(var(--chart-5))'
52 |   			}
53 |   		},
54 |   		borderRadius: {
55 |   			lg: 'var(--radius)',
56 |   			md: 'calc(var(--radius) - 2px)',
57 |   			sm: 'calc(var(--radius) - 4px)'
58 |   		}
59 |   	}
60 |   },
61 |   plugins: [require("tailwindcss-animate")],
62 | };
63 | export default config;
64 | 


--------------------------------------------------------------------------------
/src/app/api/chat/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from 'next/server';
 2 | import OpenAI from 'openai';
 3 | import { join } from 'path';
 4 | import { mkdir, writeFile } from 'fs/promises';
 5 | 
 6 | const openai = new OpenAI({
 7 |   apiKey: process.env.OPENAI_API_KEY,
 8 | });
 9 | 
10 | export async function POST(req: NextRequest) {
11 |   try {
12 |     const body = await req.json();
13 |     const message = body.message as string;
14 |     const base64Audio = body.audio as string;
15 | 
16 |     const response = await openai.chat.completions.create({
17 |       model: "gpt-4o-audio-preview",
18 |       modalities: ["text", "audio"],
19 |       audio: { voice: "alloy", format: "wav" },
20 |       messages: [
21 |         {
22 |           role: "user",
23 |           content: [
24 |             { type: "text", text: message },
25 |             { type: "input_audio", input_audio: { data: base64Audio, format: "wav" }}
26 |           ]
27 |         }
28 |       ]
29 |     });
30 | 
31 |     console.log('usage: ', response.usage);
32 |     const assistantMessage = response.choices[0].message;
33 |     const audioData = assistantMessage.audio?.data;
34 |     const transcript = assistantMessage.audio?.transcript;
35 | 
36 |     if (audioData) {
37 |       const audioBuffer = Buffer.from(audioData, 'base64');
38 |       const audioFilename = `output_${Date.now()}.wav`;
39 |       const audioFilepath = join(process.cwd(), 'public', 'uploads', audioFilename);
40 |       await writeFile(audioFilepath, audioBuffer);
41 | 
42 |       return NextResponse.json({
43 |         transcript: transcript,
44 |         audioUrl: `/uploads/${audioFilename}`,
45 |       });
46 |     } else {
47 |       return NextResponse.json({
48 |         transcript: assistantMessage.content,
49 |         audioUrl: null,
50 |       });
51 |     }
52 |   } catch (error) {
53 |     console.error('Error processing request:', error);
54 |     return NextResponse.json({ error: 'Internal Server Error', details: error.message }, { status: 500 });
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/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 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",
 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 | 


--------------------------------------------------------------------------------
/src/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 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
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 |   HTMLParagraphElement,
46 |   React.HTMLAttributes<HTMLParagraphElement>
47 | >(({ className, ...props }, ref) => (
48 |   <p
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 | 


--------------------------------------------------------------------------------
/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { signIn, signOut, useSession } from "next-auth/react";
 4 | import Link from "next/link";
 5 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 6 | import { Button } from "@/components/ui/button";
 7 | import {
 8 |   DropdownMenu,
 9 |   DropdownMenuContent,
10 |   DropdownMenuItem,
11 |   DropdownMenuTrigger
12 | } from "@/components/ui/dropdown-menu";
13 | 
14 | export default function Navbar() {
15 |   const { data: session } = useSession();
16 | 
17 |   return (
18 |     <nav className="bg-background border-b">
19 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
20 |         <div className="flex justify-between h-16">
21 |           <div className="flex items-center">
22 |             <div className="ml-10 flex items-baseline space-x-4">
23 |               <Link href="/" className="text-gray-600 hover:text-gray-900">
24 |                 首页
25 |               </Link>
26 |             </div>
27 |           </div>
28 |           <div className="flex items-center">
29 |             {session ? (
30 |               <div className="flex items-center space-x-4">
31 |                 <span className="text-sm font-medium">{session.user?.name}</span>
32 |                 <DropdownMenu>
33 |                   <DropdownMenuTrigger className="focus:outline-none">
34 |                     <Avatar>
35 |                       <AvatarImage src={session.user?.image || undefined} alt={session.user?.name || "User"} />
36 |                       <AvatarFallback>{session.user?.name?.[0] || "U"}</AvatarFallback>
37 |                     </Avatar>
38 |                   </DropdownMenuTrigger>
39 |                   <DropdownMenuContent align="end" className="w-56">
40 |                     <DropdownMenuItem className="justify-end" onClick={() => signOut()}>
41 |                       退出登录
42 |                     </DropdownMenuItem>
43 |                   </DropdownMenuContent>
44 |                 </DropdownMenu>
45 |               </div>
46 |             ) : (
47 |               <Button
48 |                 variant="ghost"
49 |                 onClick={() => signIn("google")}
50 |               >
51 |                 登录
52 |               </Button>
53 |             )}
54 |           </div>
55 |         </div>
56 |       </div>
57 |     </nav>
58 |   );
59 | }


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --background: #ffffff;
 7 |   --foreground: #171717;
 8 |   --font-geist-sans: 'Geist Sans', sans-serif;
 9 |   --font-geist-mono: 'Geist Mono', monospace;
10 | }
11 | 
12 | @media (prefers-color-scheme: dark) {
13 |   :root {
14 |     --background: #0a0a0a;
15 |     --foreground: #ededed;
16 |   }
17 | }
18 | 
19 | body {
20 |   color: var(--foreground);
21 |   background: var(--background);
22 |   font-family: var(--font-geist-sans);
23 | }
24 | 
25 | @layer utilities {
26 |   .text-balance {
27 |     text-wrap: balance;
28 |   }
29 | }
30 | 
31 | @layer base {
32 |   :root {
33 |     --background: 0 0% 100%;
34 |     --foreground: 240 10% 3.9%;
35 |     --card: 0 0% 100%;
36 |     --card-foreground: 240 10% 3.9%;
37 |     --popover: 0 0% 100%;
38 |     --popover-foreground: 240 10% 3.9%;
39 |     --primary: 240 5.9% 10%;
40 |     --primary-foreground: 0 0% 98%;
41 |     --secondary: 240 4.8% 95.9%;
42 |     --secondary-foreground: 240 5.9% 10%;
43 |     --muted: 240 4.8% 95.9%;
44 |     --muted-foreground: 240 3.8% 46.1%;
45 |     --accent: 240 4.8% 95.9%;
46 |     --accent-foreground: 240 5.9% 10%;
47 |     --destructive: 0 84.2% 60.2%;
48 |     --destructive-foreground: 0 0% 98%;
49 |     --border: 240 5.9% 90%;
50 |     --input: 240 5.9% 90%;
51 |     --ring: 240 10% 3.9%;
52 |     --chart-1: 12 76% 61%;
53 |     --chart-2: 173 58% 39%;
54 |     --chart-3: 197 37% 24%;
55 |     --chart-4: 43 74% 66%;
56 |     --chart-5: 27 87% 67%;
57 |     --radius: 0.5rem;
58 |   }
59 |   .dark {
60 |     --background: 240 10% 3.9%;
61 |     --foreground: 0 0% 98%;
62 |     --card: 240 10% 3.9%;
63 |     --card-foreground: 0 0% 98%;
64 |     --popover: 240 10% 3.9%;
65 |     --popover-foreground: 0 0% 98%;
66 |     --primary: 0 0% 98%;
67 |     --primary-foreground: 240 5.9% 10%;
68 |     --secondary: 240 3.7% 15.9%;
69 |     --secondary-foreground: 0 0% 98%;
70 |     --muted: 240 3.7% 15.9%;
71 |     --muted-foreground: 240 5% 64.9%;
72 |     --accent: 240 3.7% 15.9%;
73 |     --accent-foreground: 0 0% 98%;
74 |     --destructive: 0 62.8% 30.6%;
75 |     --destructive-foreground: 0 0% 98%;
76 |     --border: 240 3.7% 15.9%;
77 |     --input: 240 3.7% 15.9%;
78 |     --ring: 240 4.9% 83.9%;
79 |     --chart-1: 220 70% 50%;
80 |     --chart-2: 160 60% 45%;
81 |     --chart-3: 30 80% 55%;
82 |     --chart-4: 280 65% 60%;
83 |     --chart-5: 340 75% 55%;
84 |   }
85 | }
86 | 
87 | @layer base {
88 |   * {
89 |     @apply border-border;
90 |   }
91 |   body {
92 |     @apply bg-background text-foreground;
93 |   }
94 | }
95 | 


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


--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import {
  6 |   CheckIcon,
  7 |   ChevronRightIcon,
  8 |   DotFilledIcon,
  9 | } from "@radix-ui/react-icons"
 10 | 
 11 | import { cn } from "@/lib/utils"
 12 | 
 13 | const DropdownMenu = DropdownMenuPrimitive.Root
 14 | 
 15 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 16 | 
 17 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 18 | 
 19 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 20 | 
 21 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 22 | 
 23 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 24 | 
 25 | const DropdownMenuSubTrigger = React.forwardRef<
 26 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 27 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 28 |     inset?: boolean
 29 |   }
 30 | >(({ className, inset, children, ...props }, ref) => (
 31 |   <DropdownMenuPrimitive.SubTrigger
 32 |     ref={ref}
 33 |     className={cn(
 34 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 35 |       inset && "pl-8",
 36 |       className
 37 |     )}
 38 |     {...props}
 39 |   >
 40 |     {children}
 41 |     <ChevronRightIcon className="ml-auto h-4 w-4" />
 42 |   </DropdownMenuPrimitive.SubTrigger>
 43 | ))
 44 | DropdownMenuSubTrigger.displayName =
 45 |   DropdownMenuPrimitive.SubTrigger.displayName
 46 | 
 47 | const DropdownMenuSubContent = React.forwardRef<
 48 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 49 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 50 | >(({ className, ...props }, ref) => (
 51 |   <DropdownMenuPrimitive.SubContent
 52 |     ref={ref}
 53 |     className={cn(
 54 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | ))
 60 | DropdownMenuSubContent.displayName =
 61 |   DropdownMenuPrimitive.SubContent.displayName
 62 | 
 63 | const DropdownMenuContent = React.forwardRef<
 64 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 65 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 66 | >(({ className, sideOffset = 4, ...props }, ref) => (
 67 |   <DropdownMenuPrimitive.Portal>
 68 |     <DropdownMenuPrimitive.Content
 69 |       ref={ref}
 70 |       sideOffset={sideOffset}
 71 |       className={cn(
 72 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
 73 |         "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",
 74 |         className
 75 |       )}
 76 |       {...props}
 77 |     />
 78 |   </DropdownMenuPrimitive.Portal>
 79 | ))
 80 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 81 | 
 82 | const DropdownMenuItem = React.forwardRef<
 83 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 84 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 85 |     inset?: boolean
 86 |   }
 87 | >(({ className, inset, ...props }, ref) => (
 88 |   <DropdownMenuPrimitive.Item
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 92 |       inset && "pl-8",
 93 |       className
 94 |     )}
 95 |     {...props}
 96 |   />
 97 | ))
 98 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 99 | 
100 | const DropdownMenuCheckboxItem = React.forwardRef<
101 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
102 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
103 | >(({ className, children, checked, ...props }, ref) => (
104 |   <DropdownMenuPrimitive.CheckboxItem
105 |     ref={ref}
106 |     className={cn(
107 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
108 |       className
109 |     )}
110 |     checked={checked}
111 |     {...props}
112 |   >
113 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
114 |       <DropdownMenuPrimitive.ItemIndicator>
115 |         <CheckIcon className="h-4 w-4" />
116 |       </DropdownMenuPrimitive.ItemIndicator>
117 |     </span>
118 |     {children}
119 |   </DropdownMenuPrimitive.CheckboxItem>
120 | ))
121 | DropdownMenuCheckboxItem.displayName =
122 |   DropdownMenuPrimitive.CheckboxItem.displayName
123 | 
124 | const DropdownMenuRadioItem = React.forwardRef<
125 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
126 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
127 | >(({ className, children, ...props }, ref) => (
128 |   <DropdownMenuPrimitive.RadioItem
129 |     ref={ref}
130 |     className={cn(
131 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
132 |       className
133 |     )}
134 |     {...props}
135 |   >
136 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
137 |       <DropdownMenuPrimitive.ItemIndicator>
138 |         <DotFilledIcon className="h-4 w-4 fill-current" />
139 |       </DropdownMenuPrimitive.ItemIndicator>
140 |     </span>
141 |     {children}
142 |   </DropdownMenuPrimitive.RadioItem>
143 | ))
144 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
145 | 
146 | const DropdownMenuLabel = React.forwardRef<
147 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
148 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
149 |     inset?: boolean
150 |   }
151 | >(({ className, inset, ...props }, ref) => (
152 |   <DropdownMenuPrimitive.Label
153 |     ref={ref}
154 |     className={cn(
155 |       "px-2 py-1.5 text-sm font-semibold",
156 |       inset && "pl-8",
157 |       className
158 |     )}
159 |     {...props}
160 |   />
161 | ))
162 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
163 | 
164 | const DropdownMenuSeparator = React.forwardRef<
165 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
166 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
167 | >(({ className, ...props }, ref) => (
168 |   <DropdownMenuPrimitive.Separator
169 |     ref={ref}
170 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
171 |     {...props}
172 |   />
173 | ))
174 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
175 | 
176 | const DropdownMenuShortcut = ({
177 |   className,
178 |   ...props
179 | }: React.HTMLAttributes<HTMLSpanElement>) => {
180 |   return (
181 |     <span
182 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
183 |       {...props}
184 |     />
185 |   )
186 | }
187 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
188 | 
189 | export {
190 |   DropdownMenu,
191 |   DropdownMenuTrigger,
192 |   DropdownMenuContent,
193 |   DropdownMenuItem,
194 |   DropdownMenuCheckboxItem,
195 |   DropdownMenuRadioItem,
196 |   DropdownMenuLabel,
197 |   DropdownMenuSeparator,
198 |   DropdownMenuShortcut,
199 |   DropdownMenuGroup,
200 |   DropdownMenuPortal,
201 |   DropdownMenuSub,
202 |   DropdownMenuSubContent,
203 |   DropdownMenuSubTrigger,
204 |   DropdownMenuRadioGroup,
205 | }
206 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState, useRef, useEffect } from 'react'
  4 | import { Button } from "@/components/ui/button"
  5 | import { Input } from "@/components/ui/input"
  6 | import { ScrollArea } from "@/components/ui/scroll-area"
  7 | import { Mic, Square } from 'lucide-react'
  8 | 
  9 | interface Message {
 10 |   role: 'user' | 'assistant';
 11 |   content: string;
 12 |   audio?: string;
 13 | }
 14 | 
 15 | export default function ChatPage() {
 16 |   const [messages, setMessages] = useState<Message[]>([])
 17 |   const [inputValue, setInputValue] = useState('')
 18 |   const [isRecording, setIsRecording] = useState(false)
 19 |   const [audioURL, setAudioURL] = useState<string | null>(null)
 20 |   const scrollAreaRef = useRef<HTMLDivElement>(null)
 21 |   
 22 |   const audioContextRef = useRef<AudioContext | null>(null)
 23 |   const processorRef = useRef<ScriptProcessorNode | null>(null)
 24 |   const audioChunksRef = useRef<Float32Array[]>([])
 25 |   const startTimeRef = useRef<number>(0)
 26 |   const timerIntervalRef = useRef<NodeJS.Timeout | null>(null)
 27 | 
 28 |   useEffect(() => {
 29 |     return () => {
 30 |       if (audioURL) {
 31 |         URL.revokeObjectURL(audioURL)
 32 |       }
 33 |       if (timerIntervalRef.current) {
 34 |         clearInterval(timerIntervalRef.current)
 35 |       }
 36 |     }
 37 |   }, [audioURL])
 38 | 
 39 |   const handleStartRecording = async () => {
 40 |     try {
 41 |       const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
 42 |       audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)()
 43 |       const source = audioContextRef.current.createMediaStreamSource(stream)
 44 |       const processor = audioContextRef.current.createScriptProcessor(1024, 1, 1)
 45 |       processorRef.current = processor
 46 | 
 47 |       source.connect(processor)
 48 |       processor.connect(audioContextRef.current.destination)
 49 | 
 50 |       audioChunksRef.current = []
 51 | 
 52 |       processor.onaudioprocess = (e) => {
 53 |         const inputData = e.inputBuffer.getChannelData(0)
 54 |         audioChunksRef.current.push(new Float32Array(inputData))
 55 |       }
 56 | 
 57 |       setIsRecording(true)
 58 |       startTimeRef.current = Date.now()
 59 |       timerIntervalRef.current = setInterval(updateTimer, 1000)
 60 |     } catch (error) {
 61 |       console.error('Error starting recording:', error)
 62 |     }
 63 |   }
 64 | 
 65 |   const handleStopRecording = () => {
 66 |     if (audioContextRef.current) {
 67 |       audioContextRef.current.close()
 68 |       audioContextRef.current = null
 69 |     }
 70 |     if (timerIntervalRef.current) {
 71 |       clearInterval(timerIntervalRef.current)
 72 |     }
 73 |     setIsRecording(false)
 74 | 
 75 |     // Convert to WAV and create blob
 76 |     const wavBlob = createWavBlob(audioChunksRef.current)
 77 |     const audioUrl = URL.createObjectURL(wavBlob)
 78 |     setAudioURL(audioUrl)
 79 | 
 80 |     // Convert to base64 and log
 81 |     blobToBase64(wavBlob).then((base64Audio) => {
 82 |       console.log('Base64 encoded audio:', base64Audio)
 83 |     })
 84 |   }
 85 | 
 86 |   const updateTimer = () => {
 87 |     const elapsed = Math.floor((Date.now() - startTimeRef.current) / 1000)
 88 |     const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0')
 89 |     const seconds = (elapsed % 60).toString().padStart(2, '0')
 90 |     console.log(`${minutes}:${seconds}`)
 91 |   }
 92 | 
 93 |   const handleSendMessage = async () => {
 94 |     if (inputValue.trim() || audioURL) {
 95 |       const newMessage: Message = {
 96 |         role: 'user',
 97 |         content: inputValue,
 98 |         audio: audioURL
 99 |       }
100 |       setMessages(prevMessages => [...prevMessages, newMessage])
101 |       setInputValue('')
102 | 
103 |       let base64Audio = null
104 |       if (audioURL) {
105 |         const response = await fetch(audioURL)
106 |         const blob = await response.blob()
107 |         base64Audio = await blobToBase64(blob)
108 |       }
109 | 
110 |       const body = {
111 |         message: inputValue,
112 |         audio: base64Audio
113 |       }
114 | 
115 |       try {
116 |         const response = await fetch('/api/chat', {
117 |           method: 'POST',
118 |           headers: {
119 |             'Content-Type': 'application/json'
120 |           },
121 |           body: JSON.stringify(body),
122 |         });
123 | 
124 |         if (!response.ok) throw new Error('Failed to send message');
125 | 
126 |         const data = await response.json();
127 |         setMessages(prevMessages => [...prevMessages, {
128 |           role: 'assistant',
129 |           content: data.transcript || 'Audio response received',
130 |           audio: data.audioUrl
131 |         }]);
132 |       } catch (error) {
133 |         console.error('Error sending message:', error);
134 |       }
135 | 
136 |       setAudioURL(null)
137 |       scrollToBottom()
138 |     }
139 |   }
140 | 
141 |   const scrollToBottom = () => {
142 |     if (scrollAreaRef.current) {
143 |       scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight
144 |     }
145 |   }
146 | 
147 |   return (
148 |     <div className="flex flex-col h-screen max-w-2xl mx-auto p-4">
149 |       <ScrollArea className="flex-grow mb-4 border rounded-md p-2" ref={scrollAreaRef}>
150 |         {messages.map((message, index) => (
151 |           <div key={index} className={`mb-2 ${message.role === 'user' ? 'text-right' : 'text-left'}`}>
152 |             <span className={`inline-block bg-${message.role === 'user' ? 'blue' : 'gray'}-100 rounded-md p-2`}>
153 |               {message.content}
154 |             </span>
155 |             {message.audio && (
156 |               <audio controls src={message.audio} className="mt-2 max-w-full">
157 |                 Your browser does not support the audio element.
158 |               </audio>
159 |             )}
160 |           </div>
161 |         ))}
162 |       </ScrollArea>
163 |       <div className="flex space-x-2 mb-4">
164 |         <Input
165 |           value={inputValue}
166 |           onChange={(e) => setInputValue(e.target.value)}
167 |           onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
168 |           placeholder="Type a message..."
169 |           className="flex-grow"
170 |         />
171 |         <Button onClick={handleSendMessage}>Send</Button>
172 |       </div>
173 |       <div className="flex items-center space-x-2">
174 |         <Button 
175 |           onClick={isRecording ? handleStopRecording : handleStartRecording}
176 |           variant={isRecording ? "destructive" : "default"}
177 |           className="w-12 h-12 rounded-full p-0 flex items-center justify-center"
178 |         >
179 |           {isRecording ? <Square size={24} /> : <Mic size={24} />}
180 |         </Button>
181 |         {audioURL && (
182 |           <audio controls src={audioURL} className="flex-grow">
183 |             Your browser does not support the audio element.
184 |           </audio>
185 |         )}
186 |       </div>
187 |     </div>
188 |   )
189 | }
190 | 
191 | function createWavBlob(audioChunks: Float32Array[]): Blob {
192 |   const sampleRate = 44100
193 |   const numChannels = 1
194 |   const bitsPerSample = 16
195 |   const bytesPerSample = bitsPerSample / 8
196 |   const blockAlign = numChannels * bytesPerSample
197 | 
198 |   const buffer = mergeAudioBuffers(audioChunks)
199 |   const dataLength = buffer.length * bytesPerSample
200 |   const wavDataLength = 36 + dataLength
201 | 
202 |   const headerBuffer = new ArrayBuffer(44)
203 |   const view = new DataView(headerBuffer)
204 | 
205 |   writeString(view, 0, 'RIFF')
206 |   view.setUint32(4, wavDataLength, true)
207 |   writeString(view, 8, 'WAVE')
208 |   writeString(view, 12, 'fmt ')
209 |   view.setUint32(16, 16, true)
210 |   view.setUint16(20, 1, true)
211 |   view.setUint16(22, numChannels, true)
212 |   view.setUint32(24, sampleRate, true)
213 |   view.setUint32(28, sampleRate * blockAlign, true)
214 |   view.setUint16(32, blockAlign, true)
215 |   view.setUint16(34, bitsPerSample, true)
216 |   writeString(view, 36, 'data')
217 |   view.setUint32(40, dataLength, true)
218 | 
219 |   const wavBuffer = new Int16Array(headerBuffer.byteLength + dataLength)
220 |   wavBuffer.set(new Int16Array(headerBuffer))
221 |   wavBuffer.set(convertToInt16(buffer), headerBuffer.byteLength / 2)
222 | 
223 |   return new Blob([wavBuffer], { type: 'audio/wav' })
224 | }
225 | 
226 | function writeString(view: DataView, offset: number, string: string) {
227 |   for (let i = 0; i < string.length; i++) {
228 |     view.setUint8(offset + i, string.charCodeAt(i))
229 |   }
230 | }
231 | 
232 | function mergeAudioBuffers(buffers: Float32Array[]): Float32Array {
233 |   let totalLength = 0
234 |   for (let buffer of buffers) {
235 |     totalLength += buffer.length
236 |   }
237 |   const result = new Float32Array(totalLength)
238 |   let offset = 0
239 |   for (let buffer of buffers) {
240 |     result.set(buffer, offset)
241 |     offset += buffer.length
242 |   }
243 |   return result
244 | }
245 | 
246 | function convertToInt16(float32Array: Float32Array): Int16Array {
247 |   const int16Array = new Int16Array(float32Array.length)
248 |   for (let i = 0; i < float32Array.length; i++) {
249 |     const s = Math.max(-1, Math.min(1, float32Array[i]))
250 |     int16Array[i] = s < 0 ? s * 0x8000 : s * 0x7FFF
251 |   }
252 |   return int16Array
253 | }
254 | 
255 | function blobToBase64(blob: Blob): Promise<string> {
256 |   return new Promise((resolve, reject) => {
257 |     const reader = new FileReader()
258 |     reader.onloadend = () => resolve((reader.result as string).split(',')[1])
259 |     reader.onerror = reject
260 |     reader.readAsDataURL(blob)
261 |   })
262 | }
263 | 


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