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

examples/storytelling-chatbot/client/components/StoryTranscript/StoryTranscript.module.css

@@ -0,0 +1,42 @@
+.container{
+    position: absolute;
+    color:white;
+    z-index: 50;    
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    @apply gap-4 inset-6;
+    align-items: center;
+    justify-content: end;
+    text-align: center;
+}
+
+.transcript{
+    @apply font-semibold;
+}
+
+.transcript span{
+    box-decoration-break: clone;
+    @apply bg-gray-900/80 rounded-md px-4 py-2;
+}
+
+.sentence{
+    opacity: 1;
+    animation: fadeOut 2.5s linear forwards;
+    animation-delay: 1s;
+}
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    20% {
+        transform: scale(1);
+        filter: blur(0);
+    }
+    100% {
+        transform: scale(0.8) translateY(-50%);
+        filter: blur(25px);
+        opacity: 0;
+    }
+}

examples/storytelling-chatbot/client/components/StoryTranscript/index.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { useAppMessage } from "@daily-co/daily-react";
+import { DailyEventObjectAppMessage } from "@daily-co/daily-js";
+
+import styles from "./StoryTranscript.module.css";
+
+export default function StoryTranscript() {
+  const [partialText, setPartialText] = useState<string>("");
+  const [sentences, setSentences] = useState<string[]>([]);
+  const intervalRef = useRef<any | null>(null);
+
+  useEffect(() => {
+    clearInterval(intervalRef.current);
+
+    intervalRef.current = setInterval(() => {
+      if (sentences.length > 2) {
+        setSentences((s) => s.slice(1));
+      }
+    }, 2500);
+
+    return () => clearInterval(intervalRef.current);
+  }, [sentences]);
+
+  useAppMessage({
+    onAppMessage: (e: DailyEventObjectAppMessage<any>) => {
+      if (e.fromId && e.fromId === "transcription") {
+        // Check for LLM transcripts only
+        if (e.data.user_id !== "") {
+          setPartialText(e.data.text);
+          if (e.data.is_final) {
+            setPartialText("");
+            setSentences((s) => [...s, e.data.text]);
+          }
+        }
+      }
+    },
+  });
+
+  return (
+    <div className={styles.container}>
+      {sentences.map((sentence, index) => (
+        <p key={index} className={`${styles.transcript} ${styles.sentence}`}>
+          <span>{sentence}</span>
+        </p>
+      ))}
+      {partialText && (
+        <p className={`${styles.transcript}`}>
+          <span>{partialText}</span>
+        </p>
+      )}
+    </div>
+  );
+}