frontend/components/Story.tsx

import React, { useState } from "react";
import {
  useDaily,
  useParticipantIds,
  useAppMessage,
  DailyAudio,
} from "@daily-co/daily-react";
import { IconLogout, IconLoader2 } from "@tabler/icons-react";

import VideoTile from "@/components/VideoTile";
import { Button } from "@/components/ui/button";
import UserInputIndicator from "@/components/UserInputIndicator";
import WaveText from "@/components/WaveText";

interface StoryProps {
  handleLeave: () => void;
}

const Story: React.FC<StoryProps> = ({ handleLeave }) => {
  const daily = useDaily();
  const participantIds = useParticipantIds({ filter: "remote" });
  const [storyState, setStoryState] = useState<"user" | "assistant">(
    "assistant"
  );

  useAppMessage({
    onAppMessage: (e) => {
      if (!daily || !e.data?.cue) return;

      // Determine the UI state from the cue sent by the bot
      if (e.data?.cue === "user_turn") {
        // Delay enabling local mic input to avoid feedback from LLM
        setTimeout(() => daily.setLocalAudio(true), 500);
        setStoryState("user");
      } else {
        daily.setLocalAudio(false);
        setStoryState("assistant");
      }
    },
  });

  return (
    <div className="w-full flex flex-col flex-1 self-stretch">
      {/* Absolute elements */}
      <div className="absolute top-20 w-full text-center z-50">
        <WaveText active={storyState === "user"} />
      </div>
      <header className="flex absolute top-0 w-full z-50 p-6 justify-end">
        <Button variant="secondary" onClick={() => handleLeave()}>
          <IconLogout size={21} className="mr-2" />
          Exit
        </Button>
      </header>
      <div className="absolute inset-0 bg-gray-800 bg-opacity-90 z-10 fade-in"></div>

      {/* Static elements */}
      <div className="relative z-20 flex-1 flex items-center justify-center">
        {participantIds.length >= 1 ? (
          <VideoTile
            sessionId={participantIds[0]}
            inactive={storyState === "user"}
          />
        ) : (
          <span className="p-3 rounded-full bg-gray-900/60 animate-pulse">
            <IconLoader2
              size={42}
              stroke={2}
              className="animate-spin text-white z-20 self-center"
            />
          </span>
        )}
        <DailyAudio />
      </div>
      <UserInputIndicator active={storyState === "user"} />
    </div>
  );
};

export default Story;