Skip to content

Commit 5be085e

Browse files
goosewingoosewin
committed
feat: new UI, add favicons
1 parent 8aefeb1 commit 5be085e

8 files changed

Lines changed: 125 additions & 43 deletions

File tree

‎app/apple-icon.png‎

7.83 KB
Loading

‎app/icon.png‎

24.6 KB
Loading

‎app/icon0.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎app/icon1.png‎

3.58 KB
Loading

‎app/layout.tsx‎

Lines changed: 93 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,86 @@
1-
import type { Metadata } from "next";
2-
import { Geist, Geist_Mono } from "next/font/google";
1+
import type { Metadata, Viewport } from "next";
2+
import { Inter, JetBrains_Mono } from "next/font/google";
33
import "./globals.css";
44

5-
const geistSans = Geist({
6-
variable: "--font-geist-sans",
5+
const inter = Inter({
6+
variable: "--font-inter",
77
subsets: ["latin"],
8+
display: "swap",
89
});
910

10-
const geistMono = Geist_Mono({
11-
variable: "--font-geist-mono",
11+
const jetbrainsMono = JetBrains_Mono({
12+
variable: "--font-jetbrains-mono",
1213
subsets: ["latin"],
14+
display: "swap",
1315
});
1416

17+
export const viewport: Viewport = {
18+
width: "device-width",
19+
initialScale: 1,
20+
maximumScale: 1,
21+
userScalable: false,
22+
};
23+
1524
export const metadata: Metadata = {
16-
title: "Create Next App",
17-
description: "Generated by create next app",
25+
title: {
26+
default: "Vapi Chat Demo | Professional Voice AI Assistant Interface",
27+
template: "%s | Vapi AI",
28+
},
29+
description:
30+
"Experience the future of conversational AI with Vapi's professional chat demo. Built with Next.js and the latest AI SDK for seamless voice assistant interactions.",
31+
keywords: [
32+
"Vapi",
33+
"Voice AI assistant",
34+
"conversational AI",
35+
"voice chat",
36+
"AI chatbot",
37+
"voice interface",
38+
"AI SDK",
39+
"Next.js",
40+
"real-time chat",
41+
"voice technology",
42+
],
43+
authors: [{ name: "Vapi AI", url: "https://vapi.ai" }],
44+
creator: "Vapi AI",
45+
publisher: "Vapi AI",
46+
category: "Technology",
47+
metadataBase: new URL("https://chat.vapi.ai"),
48+
alternates: {
49+
canonical: "/",
50+
},
51+
openGraph: {
52+
type: "website",
53+
locale: "en_US",
54+
url: "https://chat.vapi.ai",
55+
siteName: "Vapi Chat Demo",
56+
title: "Vapi Chat Demo | Professional Voice AI Assistant Interface",
57+
description:
58+
"Experience the future of conversational AI with Vapi's professional chat demo. Built with Next.js and the latest AI SDK for seamless voice assistant interactions.",
59+
},
60+
twitter: {
61+
card: "summary_large_image",
62+
site: "@vapi_ai",
63+
creator: "@vapi_ai",
64+
title: "Vapi Chat Demo | Professional Voice AI Assistant Interface",
65+
description:
66+
"Experience the future of conversational AI with Vapi's professional chat demo.",
67+
},
68+
robots: {
69+
index: true,
70+
follow: true,
71+
googleBot: {
72+
index: true,
73+
follow: true,
74+
"max-video-preview": -1,
75+
"max-image-preview": "large",
76+
"max-snippet": -1,
77+
},
78+
},
79+
manifest: "/site.webmanifest",
80+
other: {
81+
"msapplication-TileColor": "#000000",
82+
"theme-color": "#ffffff",
83+
},
1884
};
1985

2086
export default function RootLayout({
@@ -23,11 +89,27 @@ export default function RootLayout({
2389
children: React.ReactNode;
2490
}>) {
2591
return (
26-
<html lang="en">
92+
<html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`}>
93+
<head>
94+
<link rel="preconnect" href="https://fonts.googleapis.com" />
95+
<link
96+
rel="preconnect"
97+
href="https://fonts.gstatic.com"
98+
crossOrigin="anonymous"
99+
/>
100+
<link rel="dns-prefetch" href="https://api.vapi.ai" />
101+
<meta name="format-detection" content="telephone=no" />
102+
<meta name="apple-mobile-web-app-capable" content="yes" />
103+
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
104+
<meta name="apple-mobile-web-app-title" content="Vapi Chat" />
105+
</head>
27106
<body
28-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
107+
className={`font-sans antialiased bg-background text-foreground selection:bg-primary/20`}
108+
suppressHydrationWarning
29109
>
30-
{children}
110+
<div className="relative flex min-h-screen flex-col">
111+
<main className="flex-1">{children}</main>
112+
</div>
31113
</body>
32114
</html>
33115
);

‎app/page.tsx‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
Bot,
1818
Loader2,
1919
} from "lucide-react";
20+
import Image from "next/image";
2021

2122
interface Message {
2223
role: "user" | "assistant";
@@ -142,17 +143,14 @@ export default function Chat() {
142143
<div className="border-b bg-card shadow-sm px-6 py-6">
143144
<div className="max-w-4xl mx-auto space-y-6">
144145
<div className="flex items-center justify-between">
145-
<div className="flex items-center space-x-3">
146-
<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
147-
<MessageCircle className="w-5 h-5 text-primary" />
146+
<div className="flex items-center space-x-4">
147+
<div className="w-10 h-10">
148+
<Image src="/icon.png" alt="Vapi" width={100} height={100} />
148149
</div>
149150
<div>
150-
<h1 className="text-2xl font-bold text-foreground">
151-
Vapi Chat
151+
<h1 className="text-3xl font-bold text-foreground tracking-tight">
152+
Vapi Chat Demo
152153
</h1>
153-
<p className="text-sm text-muted-foreground">
154-
AI Assistant Chat Interface
155-
</p>
156154
</div>
157155
</div>
158156
</div>
@@ -170,6 +168,17 @@ export default function Chat() {
170168
placeholder="Enter your VAPI API Key"
171169
className="h-11"
172170
/>
171+
<p className="text-xs text-muted-foreground">
172+
Use your <strong>private</strong> API key from{" "}
173+
<a
174+
href="https://dashboard.vapi.ai"
175+
target="_blank"
176+
rel="noopener noreferrer"
177+
className="text-primary hover:underline font-medium"
178+
>
179+
dashboard.vapi.ai
180+
</a>
181+
</p>
173182
</div>
174183
<div className="space-y-2">
175184
<Label htmlFor="assistant-id" className="text-sm font-semibold">
@@ -183,6 +192,17 @@ export default function Chat() {
183192
placeholder="Enter your Assistant ID"
184193
className="h-11"
185194
/>
195+
<p className="text-xs text-muted-foreground">
196+
Create assistants in your{" "}
197+
<a
198+
href="https://dashboard.vapi.ai"
199+
target="_blank"
200+
rel="noopener noreferrer"
201+
className="text-primary hover:underline font-medium"
202+
>
203+
Vapi dashboard
204+
</a>
205+
</p>
186206
</div>
187207
</div>
188208

@@ -259,7 +279,7 @@ export default function Chat() {
259279
</Avatar>
260280

261281
<Card
262-
className={`${
282+
className={`p-0 ${
263283
message.role === "user"
264284
? "bg-primary text-primary-foreground border-primary/20"
265285
: "bg-card"
@@ -275,29 +295,6 @@ export default function Chat() {
275295
</div>
276296
))
277297
)}
278-
279-
{isLoading && (
280-
<div className="flex justify-start">
281-
<div className="flex items-start space-x-3 max-w-3xl">
282-
<Avatar className="w-8 h-8 flex-shrink-0">
283-
<AvatarFallback>
284-
<Bot className="w-4 h-4" />
285-
</AvatarFallback>
286-
</Avatar>
287-
288-
<Card>
289-
<CardContent className="p-4">
290-
<div className="flex items-center space-x-2">
291-
<Loader2 className="w-4 h-4 animate-spin" />
292-
<span className="text-sm text-muted-foreground">
293-
Assistant is typing...
294-
</span>
295-
</div>
296-
</CardContent>
297-
</Card>
298-
</div>
299-
</div>
300-
)}
301298
</div>
302299
</div>
303300

‎public/web-app-manifest-192x192.png‎

7.65 KB
Loading

‎public/web-app-manifest-512x512.png‎

26.4 KB
Loading

0 commit comments

Comments
 (0)