demo: Restructure storytelling-chatbot directory, update README steps, link to vercel demo

2025-04-18 08:47:32 -04:00
parent e0cf5ec016
commit 814e7509e1
53 changed files with 69 additions and 41 deletions
--- a/examples/storytelling-chatbot/client/app/favicon.ico
+++ b/examples/storytelling-chatbot/client/app/favicon.ico
--- a/examples/storytelling-chatbot/client/app/globals.css
+++ b/examples/storytelling-chatbot/client/app/globals.css
@@ -0,0 +1,109 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
+
+    --primary: 220.9 39.3% 11%;
+    --primary-foreground: 210 20% 98%;
+
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 20% 98%;
+
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 224 71.4% 4.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+
+    --primary: 210 20% 98%;
+    --primary-foreground: 220.9 39.3% 11%;
+
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 216 12.2% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+body{
+  background: url("/bg.jpg") no-repeat center center; 
+  background-size: cover;
+}
+
+.cardShadow{
+  box-shadow: 0px 124px 35px 0px rgba(0, 0, 0, 0.00), 0px 79px 32px 0px rgba(0, 0, 0, 0.01), 0px 45px 27px 0px rgba(0, 0, 0, 0.05), 0px 20px 20px 0px rgba(0, 0, 0, 0.09), 0px 5px 11px 0px rgba(0, 0, 0, 0.10);
+}
+
+@keyframes fadeInSlideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 1s ease-out;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
--- a/examples/storytelling-chatbot/client/app/layout.tsx
+++ b/examples/storytelling-chatbot/client/app/layout.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+
+import "./globals.css";
+import type { Metadata } from "next";
+import { Space_Grotesk, Space_Mono } from "next/font/google";
+
+import { cn } from "@/app/utils";
+
+// Font
+const sans = Space_Grotesk({
+  subsets: ["latin"],
+  weight: ["400", "500", "600"],
+  variable: "--font-sans",
+});
+
+const mono = Space_Mono({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  variable: "--font-mono",
+});
+
+export const metadata: Metadata = {
+  title: "Storytelling Chatbot - Daily AI",
+  description: "Built with git.new/ai",
+  metadataBase: new URL(process.env.SITE_URL || "http://localhost:3000"),
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={cn(
+          "min-h-screen bg-background font-sans antialiased flex flex-col",
+          sans.variable,
+          mono.variable
+        )}
+      >
+        <main className="flex flex-1">{children}</main>
+      </body>
+    </html>
+  );
+}
--- a/examples/storytelling-chatbot/client/app/opengraph-image.png
+++ b/examples/storytelling-chatbot/client/app/opengraph-image.png
--- a/examples/storytelling-chatbot/client/app/page.tsx
+++ b/examples/storytelling-chatbot/client/app/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+import { DailyProvider, useCallObject } from "@daily-co/daily-react";
+
+import App from "../components/App";
+
+export default function Home() {
+  const callObject = useCallObject({});
+
+  return (
+    <DailyProvider callObject={callObject}>
+      <App />
+    </DailyProvider>
+  );
+}
--- a/examples/storytelling-chatbot/client/app/twitter-image.png
+++ b/examples/storytelling-chatbot/client/app/twitter-image.png
--- a/examples/storytelling-chatbot/client/app/utils.ts
+++ b/examples/storytelling-chatbot/client/app/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}