+ {summedFrequencies.map((frequency, index) => {
+ const style = {
+ height:
+ minBarHeight + frequency * (maxBarHeight - minBarHeight) + "px",
+ borderRadius: borderRadius + "px",
+ width: barWidth + "px",
+ transition:
+ "background-color 0.35s ease-out, transform 0.25s ease-out",
+ // transform: transform,
+ backgroundColor: type === "agent" ? "#0888FF" : "#EAECF0",
+ boxShadow: type === "agent" ? "0 0 10px #EAECF0" : "none",
+ };
+
+ return ;
+ })}
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Agent/AvatarTrulience.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Agent/AvatarTrulience.tsx
new file mode 100644
index 0000000000..e720f3cc37
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Agent/AvatarTrulience.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { TrulienceAvatar } from "@trulience/react-sdk";
+import type { IMicrophoneAudioTrack, IRemoteAudioTrack } from "agora-rtc-sdk-ng";
+import { Maximize, Minimize } from "lucide-react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { useAppSelector } from "@/common";
+import { cn } from "@/lib/utils";
+import { Progress, ProgressIndicator } from "../ui/progress";
+
+interface AvatarProps {
+ audioTrack?: IMicrophoneAudioTrack | IRemoteAudioTrack;
+ localAudioTrack?: IMicrophoneAudioTrack;
+}
+
+export default function Avatar({ audioTrack }: AvatarProps) {
+ const agentConnected = useAppSelector((state) => state.global.agentConnected);
+ const trulienceSettings = useAppSelector(
+ (state) => state.global.trulienceSettings
+ );
+ const trulienceAvatarRef = useRef
+
+
+ {/* Render the TrulienceAvatar */}
+ {trulienceAvatarInstance}
+
+ {/* Show a loader overlay while progress < 1 */}
+ {errorMessage ? (
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Agent/Camera.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Agent/Camera.tsx
new file mode 100644
index 0000000000..2bb619046d
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Agent/Camera.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import AgoraRTC, {
+ type ICameraVideoTrack,
+ type ILocalVideoTrack,
+} from "agora-rtc-sdk-ng";
+import { MonitorIcon, MonitorXIcon } from "lucide-react";
+import * as React from "react";
+import { VIDEO_SOURCE_OPTIONS, VideoSourceType } from "@/common";
+// import { LocalStreamPlayer } from "../streamPlayer"
+// import { useSmallScreen } from "@/common"
+import { DeviceSelect } from "@/components/Agent/Microphone";
+import { LocalStreamPlayer } from "@/components/Agent/StreamPlayer";
+// import CamSelect from "./camSelect"
+import { CamIconByStatus } from "@/components/Icon";
+import { Button } from "@/components/ui/button";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../ui/select";
+
+export const ScreenIconByStatus = (
+ props: React.SVGProps
+
+ ) : (
+ loadProgress < 1 && (
+ {errorMessage}
+
+ {/* Simple Tailwind spinner */}
+
+
+ )
+ )}
+
+
+ );
+}
+
+export default function VideoBlock(props: {
+ videoSourceType: VideoSourceType;
+ onVideoSourceChange: (value: VideoSourceType) => void;
+ cameraTrack?: ICameraVideoTrack;
+ screenTrack?: ILocalVideoTrack;
+}) {
+ const { videoSourceType, cameraTrack, screenTrack, onVideoSourceChange } =
+ props;
+ const [videoMute, setVideoMute] = React.useState(false);
+
+ React.useEffect(() => {
+ cameraTrack?.setMuted(videoMute);
+ screenTrack?.setMuted(videoMute);
+ }, [cameraTrack, screenTrack, videoMute]);
+
+ const onClickMute = () => {
+ setVideoMute(!videoMute);
+ };
+
+ return (
+
+
+ {children}
+
+
+ {props.title}
+
+
+
+
+
+ {select}
+
+
+
+
+ );
+}
+
+interface SelectItem {
+ label: string;
+ value: string;
+ deviceId: string;
+}
+
+const DEFAULT_ITEM: SelectItem = {
+ label: "Default",
+ value: "default",
+ deviceId: "",
+};
+
+const CamSelect = (props: { videoTrack?: ICameraVideoTrack }) => {
+ const { videoTrack } = props;
+ const [items, setItems] = React.useState
+
+
+ );
+}
+
+export function CommonDeviceWrapper(props: {
+ children: React.ReactNode;
+ title: string;
+ Icon: (
+ props: React.SVGProps
+
+ );
+}
+
+export type TDeviceSelectItem = {
+ label: string;
+ value: string;
+ deviceId: string;
+};
+
+export const DEFAULT_DEVICE_ITEM: TDeviceSelectItem = {
+ label: "Default",
+ value: "default",
+ deviceId: "",
+};
+
+export const DeviceSelect = (props: {
+ items: TDeviceSelectItem[];
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+}) => {
+ const { items, value, onChange, placeholder } = props;
+
+ return (
+
+ );
+};
+
+export const MicrophoneSelect = (props: {
+ audioTrack?: IMicrophoneAudioTrack;
+}) => {
+ const { audioTrack } = props;
+ const [items, setItems] = React.useState
+
+ {children}
+ {title}
+
+
+ {select}
+
+
+
+ ) : (
+
+
+ )
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Agent/VoicePresetSelect.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Agent/VoicePresetSelect.tsx
new file mode 100644
index 0000000000..c0fbfeefb3
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Agent/VoicePresetSelect.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useAppDispatch, useAppSelector, VOICE_OPTIONS } from "@/common";
+import { VoiceIcon } from "@/components/Icon";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { setVoiceType } from "@/store/reducers/global";
+import type { VoiceType } from "@/types";
+
+export default function AgentVoicePresetSelect() {
+ const dispatch = useAppDispatch();
+ const options = useAppSelector((state) => state.global.options);
+ const voiceType = useAppSelector((state) => state.global.voiceType);
+
+ const onVoiceChange = (value: string) => {
+ dispatch(setVoiceType(value as VoiceType));
+ };
+
+ return (
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Button/LoadingButton.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Button/LoadingButton.tsx
new file mode 100644
index 0000000000..23e6457212
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Button/LoadingButton.tsx
@@ -0,0 +1,17 @@
+import { AnimatedSpinnerIcon } from "@/components/Icon";
+import { Button, type ButtonProps } from "@/components/ui/button";
+
+export interface LoadingButtonProps extends OmitAgent
+
+
+
+
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Chat/ChatCfgGraphSelect.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Chat/ChatCfgGraphSelect.tsx
new file mode 100644
index 0000000000..ca6d37572e
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Chat/ChatCfgGraphSelect.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+import { useIsCompactLayout } from "@/common";
+import { useAppDispatch, useAppSelector } from "@/common/hooks";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { setSelectedGraphId } from "@/store/reducers/global";
+
+export function RemoteGraphSelect() {
+ const dispatch = useAppDispatch();
+ const graphName = useAppSelector((state) => state.global.selectedGraphId);
+ const graphs = useAppSelector((state) => state.global.graphList);
+ const agentConnected = useAppSelector((state) => state.global.agentConnected);
+
+ const onGraphNameChange = (val: string) => {
+ dispatch(setSelectedGraphId(val));
+ };
+
+ const graphOptions = graphs.map((item) => ({
+ label: item.name,
+ value: item.graph_id,
+ }));
+
+ // Get the selected graph's label for display
+ const selectedGraph = graphs.find((g) => g.graph_id === graphName);
+ const displayLabel = selectedGraph?.name || "Select Graph";
+
+ // Truncate label for display when closed (max 20 chars on mobile, 25 on desktop)
+ const truncatedLabel = displayLabel.length > 20
+ ? displayLabel.substring(0, 17) + "..."
+ : displayLabel;
+
+ return (
+ <>
+
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Chat/ChatCfgModuleSelect.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Chat/ChatCfgModuleSelect.tsx
new file mode 100644
index 0000000000..eeb00f236f
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Chat/ChatCfgModuleSelect.tsx
@@ -0,0 +1,540 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+ BoxesIcon,
+ ChevronRightIcon,
+ LoaderCircleIcon,
+ Trash2Icon,
+ WrenchIcon,
+} from "lucide-react";
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import {
+ apiAddConnection,
+ apiAddNode,
+ apiGetDefaultProperty,
+ apiRemoveNode,
+ apiReplaceNodeModule,
+ isLLM,
+} from "@/common";
+import {
+ AddonDef,
+ Destination,
+ type Graph,
+ ProtocolLabel as GraphConnProtocol,
+ GraphEditor,
+ ProtocolLabel,
+} from "@/common/graph";
+import { useAppSelector, useGraphs } from "@/common/hooks";
+import {
+ compatibleTools,
+ ModuleRegistry,
+ ModuleTypeLabels,
+ moduleRegistry,
+ toolModuleRegistry,
+} from "@/common/moduleConfig";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+import { fetchGraphDetails } from "@/store/reducers/global";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuPortal,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger,
+} from "../ui/dropdown";
+
+export function RemoteModuleCfgSheet() {
+ const addonModules = useAppSelector((state) => state.global.addonModules);
+ const {
+ getGraphNodeAddonByName,
+ selectedGraph,
+ updateGraph,
+ installedAndRegisteredModulesMap,
+ installedAndRegisteredToolModules,
+ } = useGraphs();
+
+ const metadata = React.useMemo(() => {
+ const dynamicMetadata: Record<
+ string,
+ { type: string; options: { value: string; label: string }[] }
+ > = {};
+
+ if (selectedGraph) {
+ Object.keys(installedAndRegisteredModulesMap).forEach((key) => {
+ const moduleTypeKey = key as ModuleRegistry.NonToolModuleType;
+
+ // Check if the current graph has a node whose name contains the ModuleType
+ const hasMatchingNode = selectedGraph.nodes.some((node) =>
+ node.name.includes(moduleTypeKey)
+ );
+
+ if (hasMatchingNode) {
+ dynamicMetadata[moduleTypeKey] = {
+ type: "string",
+ options: installedAndRegisteredModulesMap[moduleTypeKey].map(
+ (module) => ({
+ value: module.name,
+ label: module.label,
+ })
+ ),
+ };
+ }
+ });
+ }
+
+ return dynamicMetadata;
+ }, [installedAndRegisteredModulesMap, selectedGraph]);
+
+ const initialData = React.useMemo(() => {
+ const dynamicInitialData: Record
+ {/* Scrollable messages container */}
+
+
+
+ {/* Input area */}
+
+
+
+
+ {
+ try {
+ // Clone the selectedGraph to avoid mutating the original graph
+ const selectedGraphCopy: Graph = JSON.parse(
+ JSON.stringify(selectedGraph)
+ );
+ const nodes = selectedGraphCopy.nodes;
+ let needUpdate = false;
+ let enableRTCVideoSubscribe = false;
+
+ // Retrieve the agora_rtc node
+ const agoraRtcNode = GraphEditor.findNode(
+ selectedGraphCopy,
+ "agora_rtc"
+ );
+ if (!agoraRtcNode) {
+ toast.error("agora_rtc node not found in the graph");
+ return;
+ }
+
+ // Update graph nodes with selected modules
+ Object.entries(data).forEach(([key, value]) => {
+ const node = nodes.find((n) => n.name === key);
+ if (node && value && node.addon !== value) {
+ node.addon = value;
+ node.property = addonModules.find(
+ (module) => module.name === value
+ )?.defaultProperty;
+ needUpdate = true;
+ }
+ });
+
+ const reasoningNodesWithVisualSupport =
+ GraphEditor.findNodeByPredicate(selectedGraphCopy, (node) => {
+ const module = moduleRegistry[node.addon];
+ if (!module) {
+ return false;
+ }
+
+ if (module.type === ModuleRegistry.ModuleType.LLM) {
+ const llmModule = module as ModuleRegistry.LLMModule;
+ return (
+ isLLM(node.name) &&
+ llmModule.options.inputModalities.includes(
+ ModuleRegistry.Modalities.Video
+ )
+ );
+ }
+
+ if (module.type === ModuleRegistry.ModuleType.V2V) {
+ const v2vModule = module as ModuleRegistry.V2VModule;
+ return (
+ isLLM(node.name) &&
+ v2vModule.options.inputModalities.includes(
+ ModuleRegistry.Modalities.Video
+ )
+ );
+ }
+
+ return false;
+ });
+
+ if (reasoningNodesWithVisualSupport) {
+ GraphEditor.addOrUpdateConnection(
+ selectedGraphCopy,
+ `${agoraRtcNode.name}`,
+ `${reasoningNodesWithVisualSupport.name}`,
+ ProtocolLabel.VIDEO_FRAME,
+ "video_frame"
+ );
+ enableRTCVideoSubscribe = true;
+ }
+
+ // Identify removed tools and process them
+ const currentToolsInGraph = nodes
+ .filter((node) =>
+ installedAndRegisteredToolModules
+ .map((module) => module.name)
+ .includes(node.addon)
+ )
+ .map((node) => node.addon);
+
+ const removedTools = currentToolsInGraph.filter(
+ (tool) => !tools.includes(tool)
+ );
+ removedTools.forEach((tool) => {
+ GraphEditor.removeNodeAndConnections(selectedGraphCopy, tool);
+ needUpdate = true;
+ });
+
+ // Process tool modules
+ if (tools.length > 0) {
+ if (!enableRTCVideoSubscribe) {
+ enableRTCVideoSubscribe = tools.some((tool) =>
+ tool.includes("vision")
+ );
+ }
+ tools.forEach((tool) => {
+ if (!currentToolsInGraph.includes(tool)) {
+ const toolModule = addonModules.find(
+ (module) => module.name === tool
+ );
+
+ if (!toolModule) {
+ toast.error(`Module ${tool} not found`);
+ return;
+ }
+
+ const toolNode = GraphEditor.addNode(
+ selectedGraphCopy,
+ tool,
+ tool,
+ "default",
+ toolModule.defaultProperty
+ );
+
+ // Create or update connections
+ const llmNode = GraphEditor.findNodeByPredicate(
+ selectedGraphCopy,
+ (node) => isLLM(node.name)
+ );
+ if (llmNode) {
+ GraphEditor.linkTool(
+ selectedGraphCopy,
+ llmNode,
+ toolNode,
+ toolModuleRegistry[tool]
+ );
+ }
+ }
+ });
+ needUpdate = true;
+ }
+
+ GraphEditor.enableRTCVideoSubscribe(
+ selectedGraphCopy,
+ enableRTCVideoSubscribe
+ );
+
+ // Perform the update if changes are detected
+ if (needUpdate) {
+ await updateGraph(selectedGraph, selectedGraphCopy);
+ toast.success("Modules updated", {
+ description: `Graph: ${selectedGraphCopy.graph_id}`,
+ });
+ }
+ } catch (e: any) {
+ toast.error(`Failed to update modules: ${e}`);
+ }
+ }}
+ />
+
+
+
+
+
+
+ {hasProperty ? (
+ selectedExtensionNode?.["property"] && (
+
+
+
+
+ {
+ if (data.enable_trulience_avatar === true) {
+ if (!data.trulience_avatar_id) {
+ toast.error("Trulience Settings", {
+ description: `Please provide Trulience Avatar ID`,
+ });
+ return;
+ }
+ }
+ dispatch(
+ setTrulienceSettings({
+ enabled: data.enable_trulience_avatar as boolean,
+ avatarId: data.trulience_avatar_id as string,
+ avatarToken: data.trulience_avatar_token as string,
+ avatarDesktopLargeWindow:
+ data.trulience_large_window as boolean,
+ trulienceSDK: data.trulience_sdk_url as string,
+ animationURL: data.trulience_animation_url as string,
+ })
+ );
+ toast.success("Trulience Settings", {
+ description: `Settings updated successfully`,
+ });
+ }}
+ />
+
+
+ {chatItems.map((item, index) => {
+ return
+ );
+}
+
+export function MessageItem(props: { data: IChatItem }) {
+ const { data } = props;
+
+ return (
+ <>
+
+ {data.type === EMessageType.AGENT ? (
+ data.data_type === EMessageDataType.REASON ? (
+
+
+
+
+ ) : (
+
+
+
+
+ )
+ ) : null}
+
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Chat/PdfSelect.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Chat/PdfSelect.tsx
new file mode 100644
index 0000000000..67855b09dd
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Chat/PdfSelect.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import { FileTextIcon } from "lucide-react";
+import * as React from "react";
+import { toast } from "sonner";
+import {
+ apiGetDocumentList,
+ apiUpdateDocument,
+ genUUID,
+ useAppSelector,
+} from "@/common";
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import type { IPdfData, OptionType } from "@/types";
+
+export default function PdfSelect() {
+ const options = useAppSelector((state) => state.global.options);
+ const { channel, userId } = options;
+ const [pdfOptions, setPdfOptions] = React.useState
+ {data.data_type === EMessageDataType.IMAGE ? (
+ 
+ ) : (
+
+ + {data.text} +
+ )} +
+
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Doodle/DoodlePanel.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Doodle/DoodlePanel.tsx
new file mode 100644
index 0000000000..5b6efea302
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Doodle/DoodlePanel.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import * as React from "react";
+import { useAppSelector } from "@/common";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { rtmManager } from "@/manager/rtm";
+import { EMessageDataType, type IChatItem } from "@/types";
+
+const STYLES = ["cartoon", "watercolor", "crayon", "pixel art"];
+
+export default function DoodlePanel(props: { className?: string }) {
+ const { className } = props;
+ const chatItems = useAppSelector((state) => state.global.chatItems);
+ const options = useAppSelector((state) => state.global.options);
+ const agentConnected = useAppSelector((state) => state.global.agentConnected);
+ const rtmConnected = useAppSelector((state) => state.global.rtmConnected);
+
+ const images = React.useMemo(
+ () => chatItems.filter((i) => i.data_type === EMessageDataType.IMAGE),
+ [chatItems]
+ );
+ const [selectedIndex, setSelectedIndex] = React.useState(
+ images.length ? images.length - 1 : -1
+ );
+ React.useEffect(() => {
+ if (images.length) {
+ setSelectedIndex(images.length - 1);
+ }
+ }, [images.length]);
+
+ const disableControls =
+ !options.channel ||
+ !options.userId ||
+ !options.appId ||
+ !options.token ||
+ !rtmConnected ||
+ !agentConnected;
+
+ const current: IChatItem | undefined =
+ selectedIndex >= 0 ? images[selectedIndex] : undefined;
+
+ const [refine, setRefine] = React.useState("");
+
+ const handleRefineSubmit = (e: React.FormEvent
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/AppShell.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/AppShell.tsx
new file mode 100644
index 0000000000..7753de22f6
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/AppShell.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { useAppDispatch, useAppSelector } from "@/common";
+import { addChatItem, setOptions, setRoomConnected } from "@/store/reducers/global";
+import DoodleCanvas from "./Canvas";
+import ControlsBar from "./ControlsBar";
+import LoadingAnimator from "./LoadingAnimator";
+import { EMessageDataType, EMessageType, type IChatItem } from "@/types";
+
+export default function AppShell() {
+ const dispatch = useAppDispatch();
+ const options = useAppSelector((s) => s.global.options);
+ const [channel, setChannel] = React.useState(options.channel || "voice_image_kids");
+ const [userId, setUserId] = React.useState
+
+
+ Doodle Panel
+
+ {STYLES.map((s) => (
+
+ ))}
+
+
+ {current ? (
+ 
+ ) : (
+
+
+ + No doodles yet. Describe your idea to start! +
+ )} +
+ {images.map((img, idx) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/BoardStage.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/BoardStage.tsx
new file mode 100644
index 0000000000..8738632a92
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/BoardStage.tsx
@@ -0,0 +1,285 @@
+"use client";
+
+import * as React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import type { DoodlePhase } from "./MagicCanvasBackground";
+
+export type CrayonSwatch = {
+ id: string;
+ label: string;
+ stickerClass: string;
+ ringClass: string;
+ penBody: string;
+ penTop: string;
+};
+
+export const DEFAULT_CRAYON_SWATCHES: CrayonSwatch[] = [
+ {
+ id: "lavender",
+ label: "Lavender",
+ stickerClass: "bg-[#BFA2FF]",
+ ringClass: "ring-[#5C3DDE]",
+ penBody: "#5C3DDE",
+ penTop: "#BFA2FF",
+ },
+ {
+ id: "mint",
+ label: "Mint",
+ stickerClass: "bg-[#9EE7B2]",
+ ringClass: "ring-[#1C8B43]",
+ penBody: "#1C8B43",
+ penTop: "#9EE7B2",
+ },
+ {
+ id: "sky",
+ label: "Sky",
+ stickerClass: "bg-[#9DD8FF]",
+ ringClass: "ring-[#1D6FE2]",
+ penBody: "#1D6FE2",
+ penTop: "#9DD8FF",
+ },
+ {
+ id: "rose",
+ label: "Rose",
+ stickerClass: "bg-[#FFB3C7]",
+ ringClass: "ring-[#E72D6A]",
+ penBody: "#E72D6A",
+ penTop: "#FFB3C7",
+ },
+];
+
+function SurfaceTexture() {
+ const patternId = React.useId();
+ return (
+
+ );
+}
+
+function Stylus(props: { bodyColor?: string; topColor?: string }) {
+ const { bodyColor = "#F97316", topColor = "#FB923C" } = props;
+ return (
+
+ );
+}
+
+function ToyStylusAnimator(props: {
+ phase?: DoodlePhase;
+ reducedMotion: boolean;
+ bodyColor?: string;
+ topColor?: string;
+}) {
+ const { phase, reducedMotion, bodyColor, topColor } = props;
+
+ if (reducedMotion) return null;
+
+ const active = Boolean(phase && phase !== "idle");
+ const looping = phase === "queued" || phase === "sketch" || phase === "color";
+ const anim = React.useMemo(() => {
+ if (!looping) {
+ return {
+ left: "82%",
+ top: "62%",
+ rotate: 18,
+ };
+ }
+ return {
+ left: ["86%", "44%", "70%", "52%", "78%"],
+ top: ["56%", "38%", "68%", "54%", "34%"],
+ rotate: [18, 6, 24, 10, 22],
+ };
+ }, [looping]);
+
+ return (
+ + Doodler +
+
+ setChannel(e.target.value)}
+ aria-label="Channel"
+ className={cn(
+ "rounded-lg border border-[#2b2e35] bg-[#121316] px-3 py-2 text-sm text-white"
+ )}
+ />
+ setUserId(Number(e.target.value))}
+ aria-label="User ID"
+ className={cn(
+ "rounded-lg border border-[#2b2e35] bg-[#121316] px-3 py-2 text-sm text-white"
+ )}
+ />
+
+
+
+ Kid Mode
+
+
+
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/Canvas.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/Canvas.tsx
new file mode 100644
index 0000000000..edc55051ee
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/Canvas.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+import { useAppSelector } from "@/common";
+import { EMessageDataType, type IChatItem } from "@/types";
+import { cn } from "@/lib/utils";
+
+export default function DoodleCanvas() {
+ const chatItems = useAppSelector((s) => s.global.chatItems);
+ const images = React.useMemo(
+ () => chatItems.filter((i) => i.data_type === EMessageDataType.IMAGE),
+ [chatItems]
+ );
+ const current: IChatItem | undefined = images.length
+ ? images[images.length - 1]
+ : undefined;
+ return (
+
+
+
+
+
+
+ {swatches.map((swatch, idx) => {
+ const isActive = swatch.id === resolvedActiveId;
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ {imageUrl ? (
+
+
+ ) : null}
+
+
+
+
+ 
+
+
+ {overlay}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {current ? (
+
+ ) : (
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/ControlsBar.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/ControlsBar.tsx
new file mode 100644
index 0000000000..8ebe1597ca
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/ControlsBar.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import * as React from "react";
+import { useAppSelector } from "@/common";
+import { cn } from "@/lib/utils";
+
+const STYLES = ["cartoon", "crayon", "watercolor"];
+
+export default function ControlsBar() {
+ const options = useAppSelector((s) => s.global.options);
+ const agentConnected = useAppSelector((s) => s.global.agentConnected);
+ const rtmConnected = useAppSelector((s) => s.global.rtmConnected);
+ const disable = !options.channel || !options.userId || !rtmConnected || !agentConnected;
+ const [val, setVal] = React.useState("");
+ const rtmRef = React.useRefDescribe your idea to start!
+ )} +
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/FloatingDoodles.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/FloatingDoodles.tsx
new file mode 100644
index 0000000000..235bfc4a0e
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/FloatingDoodles.tsx
@@ -0,0 +1,697 @@
+"use client";
+
+import * as React from "react";
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+type DoodleItem = {
+ key: string;
+ left: string;
+ top: string;
+ size: number;
+ rotate: number;
+ opacity: number;
+ color: string;
+ variant:
+ | "star"
+ | "cloud"
+ | "spark"
+ | "swirl"
+ | "heart"
+ | "bolt"
+ | "sun"
+ | "flower"
+ | "arrow"
+ | "gift"
+ | "moon"
+ | "leaf";
+ duration: number;
+ delay: number;
+};
+
+function Star(props: { color: string }) {
+ const { color } = props;
+ return (
+
+ );
+}
+
+function Cloud(props: { color: string }) {
+ const { color } = props;
+ return (
+
+ );
+}
+
+function Spark(props: { color: string }) {
+ const { color } = props;
+ return (
+
+ );
+}
+
+function Swirl(props: { color: string }) {
+ const { color } = props;
+ return (
+
+ );
+}
+
+function Heart(props: { color: string }) {
+ const { color } = props;
+ return (
+
+ );
+}
+
+function Bolt(props: { color: string }) {
+ const { color } = props;
+ return (
+
+ );
+}
+
+function Sun(props: { color: string }) {
+ const { color } = props;
+ return (
+
+ );
+}
+
+function Flower(props: { color: string }) {
+ const { color } = props;
+ return (
+
+ );
+}
+
+function Arrow(props: { color: string }) {
+ const { color } = props;
+ return (
+
+ );
+}
+
+function Gift(props: { color: string }) {
+ const { color } = props;
+ return (
+
+ );
+}
+
+function Moon(props: { color: string }) {
+ const { color } = props;
+ return (
+
+ );
+}
+
+function Leaf(props: { color: string }) {
+ const { color } = props;
+ return (
+
+ );
+}
+
+function DoodleSvg(props: { variant: DoodleItem["variant"]; color: string }) {
+ const { variant, color } = props;
+ switch (variant) {
+ case "star":
+ return
+ {STYLES.map((s) => (
+
+ ))}
+
+
+ Sounds can be toggled in Settings.
+
+ {DEFAULT_DOODLES.map((d) => {
+ const Comp = (
+
+ {Comp}
+
+ );
+ })}
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/ImmersiveShell.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/ImmersiveShell.tsx
new file mode 100644
index 0000000000..3b22350cdd
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/ImmersiveShell.tsx
@@ -0,0 +1,567 @@
+"use client";
+
+import * as React from "react";
+import { motion } from "framer-motion";
+import { toast } from "sonner";
+import { useAppDispatch, useAppSelector, useMultibandTrackVolume } from "@/common";
+import { Button } from "@/components/ui/button";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import {
+ addChatItem,
+ setAgentConnected,
+ setOptions,
+ setRoomConnected,
+ setRtmConnected,
+} from "@/store/reducers/global";
+import { EMessageDataType, EMessageType, type IChatItem } from "@/types";
+import BoardStage, { DEFAULT_CRAYON_SWATCHES } from "./BoardStage";
+import MagicCanvasBackground, {
+ type CreativeMode,
+ type DoodlePhase,
+} from "./MagicCanvasBackground";
+import MagicPenAnimator from "./MagicPenAnimator";
+import MouseTrail from "./MouseTrail";
+import TranscriptPanel from "./TranscriptPanel";
+import type { IMicrophoneAudioTrack } from "agora-rtc-sdk-ng";
+
+function usePrefersReducedMotion() {
+ const [reduced, setReduced] = React.useState(false);
+ React.useEffect(() => {
+ const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+ setReduced(mql.matches);
+ const onChange = () => setReduced(mql.matches);
+ mql.addEventListener("change", onChange);
+ return () => mql.removeEventListener("change", onChange);
+ }, []);
+ return reduced;
+}
+
+function getLatestImage(chatItems: IChatItem[]) {
+ const images = chatItems.filter((i) => i.data_type === EMessageDataType.IMAGE);
+ return images.length ? images[images.length - 1] : undefined;
+}
+
+function getLastTime(chatItems: IChatItem[], predicate: (i: IChatItem) => boolean) {
+ for (let idx = chatItems.length - 1; idx >= 0; idx -= 1) {
+ const item = chatItems[idx];
+ if (predicate(item)) return item.time ?? 0;
+ }
+ return 0;
+}
+
+export default function ImmersiveShell() {
+ const dispatch = useAppDispatch();
+ const reducedMotion = usePrefersReducedMotion();
+
+ const options = useAppSelector((s) => s.global.options);
+ const roomConnected = useAppSelector((s) => s.global.roomConnected);
+ const agentConnected = useAppSelector((s) => s.global.agentConnected);
+ const rtmConnected = useAppSelector((s) => s.global.rtmConnected);
+ const chatItems = useAppSelector((s) => s.global.chatItems);
+
+ const mode: CreativeMode = "classic";
+
+ const [channel, setChannel] = React.useState(options.channel || "voice_image_kids");
+ const [userId, setUserId] = React.useState
+
+ );
+
+ return reducedMotion ? (
+
+ {Comp}
+
+ ) : (
+
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/LoadingAnimator.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/LoadingAnimator.tsx
new file mode 100644
index 0000000000..41a6a07e51
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/LoadingAnimator.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import { useAppSelector } from "@/common";
+import { cn } from "@/lib/utils";
+import { EMessageDataType, EMessageType } from "@/types";
+
+export default function LoadingAnimator() {
+ const items = useAppSelector((s) => s.global.chatItems);
+ const lastImageTime = React.useMemo(() => {
+ const img = [...items].reverse().find((i) => i.data_type === EMessageDataType.IMAGE);
+ return img?.time ?? 0;
+ }, [items]);
+ const lastUserTime = React.useMemo(() => {
+ const usr = [...items]
+ .reverse()
+ .find(
+ (i) => i.type === EMessageType.USER && i.data_type === EMessageDataType.TEXT
+ );
+ return usr?.time ?? 0;
+ }, [items]);
+ const active = lastUserTime > lastImageTime;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/MagicCanvasBackground.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/MagicCanvasBackground.tsx
new file mode 100644
index 0000000000..00620badc6
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/MagicCanvasBackground.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+export type DoodlePhase = "idle" | "queued" | "sketch" | "color" | "complete";
+export type CreativeMode = "classic" | "neon";
+
+export default function MagicCanvasBackground(props: {
+ phase: DoodlePhase;
+ mode: CreativeMode;
+ reducedMotion?: boolean;
+}) {
+ const { phase, mode, reducedMotion = false } = props;
+ const isGenerating = phase === "queued" || phase === "sketch" || phase === "color";
+ const showDream = phase === "complete";
+ const tileStart = "0px 0px";
+ const tileEnd = "160px 140px";
+
+ return (
+
+
+
+
+
+ Doodling...
+
+
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/MagicPenAnimator.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/MagicPenAnimator.tsx
new file mode 100644
index 0000000000..934f470870
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Doodler/MagicPenAnimator.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import * as React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import type { CreativeMode, DoodlePhase } from "./MagicCanvasBackground";
+
+function PenIcon(props: {
+ mode: CreativeMode;
+ bodyColor?: string;
+ topColor?: string;
+}) {
+ const { mode, bodyColor, topColor } = props;
+ const isNeon = mode === "neon";
+ const body = bodyColor ?? (isNeon ? "#FF8A3D" : "#F97316");
+ const bodyTop = topColor ?? (isNeon ? "#FFB457" : "#FB923C");
+ const stripe = isNeon ? "#0B1220" : "#1F1F1F";
+ const outline = isNeon ? "rgba(124,255,250,0.4)" : "rgba(0,0,0,0.18)";
+ return (
+
+ );
+}
+
+function scribbleStroke(mode: CreativeMode, phase: DoodlePhase) {
+ const isNeon = mode === "neon";
+ if (phase === "sketch") {
+ return {
+ color: isNeon ? "hsla(180, 95%, 60%, 0.75)" : "rgba(44, 33, 22, 0.45)",
+ width: isNeon ? 3.5 : 3,
+ dash: isNeon ? "10 10" : "9 10",
+ glow: isNeon,
+ };
+ }
+ if (phase === "color") {
+ return {
+ color: isNeon ? "hsla(280, 95%, 68%, 0.75)" : "rgba(249, 115, 22, 0.35)",
+ width: isNeon ? 4 : 3.4,
+ dash: isNeon ? "0" : "0",
+ glow: isNeon,
+ };
+ }
+ return {
+ color: isNeon ? "hsla(200, 95%, 60%, 0.7)" : "rgba(44, 33, 22, 0.35)",
+ width: isNeon ? 3.2 : 3,
+ dash: "10 10",
+ glow: isNeon,
+ };
+}
+
+export default function MagicPenAnimator(props: {
+ phase: DoodlePhase;
+ mode: CreativeMode;
+ reducedMotion: boolean;
+ showPen?: boolean;
+ penBodyColor?: string;
+ penTopColor?: string;
+}) {
+ const { phase, mode, reducedMotion, showPen = true, penBodyColor, penTopColor } =
+ props;
+ const show = phase !== "idle";
+ const isNeon = mode === "neon";
+
+ const penAnimation = React.useMemo(() => {
+ if (phase === "queued") {
+ return {
+ x: ["-12%", "18%", "18%"],
+ y: ["-10%", "22%", "24%"],
+ rotate: [-10, 6, -3],
+ };
+ }
+ if (phase === "sketch") {
+ return {
+ x: ["18%", "64%", "42%", "76%", "30%", "58%"],
+ y: ["24%", "30%", "64%", "58%", "46%", "34%"],
+ rotate: [8, 22, -18, 12, -10, 18],
+ };
+ }
+ if (phase === "color") {
+ return {
+ x: ["58%", "38%", "70%", "52%"],
+ y: ["34%", "56%", "50%", "36%"],
+ rotate: [10, -6, 14, 6],
+ };
+ }
+ return {
+ x: ["52%", "66%", "110%"],
+ y: ["52%", "20%", "-30%"],
+ rotate: [8, 28, 48],
+ };
+ }, [phase]);
+
+ const penTransition = React.useMemo(() => {
+ if (phase === "queued") {
+ return { duration: 0.9, ease: [0.22, 1, 0.36, 1] };
+ }
+ if (phase === "sketch") {
+ return { duration: 1.8, ease: "easeInOut", repeat: Infinity };
+ }
+ if (phase === "color") {
+ return { duration: 2.4, ease: "easeInOut", repeat: Infinity };
+ }
+ return { duration: 0.9, ease: [0.22, 1, 0.36, 1] };
+ }, [phase]);
+
+ const stroke = scribbleStroke(mode, phase);
+
+ if (reducedMotion) return null;
+
+ return (
+
+
+
+
+
+
+
+ {transcript.length ? `${transcript.length}` : "—"}
+
+ Transcript
+
+ {transcript.length ? (
+
+
+ {onSend ? (
+
+ ) : null}
+
+ {transcript.map((item, idx) => {
+ const isUser = item.type === EMessageType.USER;
+ return (
+
+ ) : (
+
+
+ );
+ })}
+
+
+
+ {isUser ? "You" : "Agent"}
+ {item.isFinal === false ? … : null}
+
+
+ {item.text}
+
+ + Your transcript will show up here. +
+ )} +
+ {/* Top region (Avatar or ChatCard) */}
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Icon/index.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Icon/index.tsx
new file mode 100644
index 0000000000..b08ccee899
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Icon/index.tsx
@@ -0,0 +1,532 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export const GitHubIcon = (props: React.SVGProps
+ {useTrulienceAvatar ? (
+ !avatarInLargeWindow ? (
+
+
+ {/* Bottom region for microphone and video blocks - always visible */}
+
+
+ ) : (
+ !isCompactLayout && (
+
+
+
+ {/* -- Description Part */}
+
+
+ );
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Layout/Header.module.css b/ai_agents/agents/examples/doodler/frontend/src/components/Layout/Header.module.css
new file mode 100644
index 0000000000..170ce2631c
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Layout/Header.module.css
@@ -0,0 +1,18 @@
+.colorPicker :global(.react-colorful) {
+ width: 220px;
+ height: 8px;
+}
+
+.colorPicker :global(.react-colorful__saturation) {
+ display: none;
+}
+
+.colorPicker :global(.react-colorful__hue) {
+ border-radius: 8px !important;
+ height: 8px;
+}
+
+.colorPicker :global(.react-colorful__pointer) {
+ width: 24px;
+ height: 24px;
+}
diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/Layout/Header.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/Layout/Header.tsx
new file mode 100644
index 0000000000..45262cea96
--- /dev/null
+++ b/ai_agents/agents/examples/doodler/frontend/src/components/Layout/Header.tsx
@@ -0,0 +1,26 @@
+import { LogoIcon, SmallLogoIcon } from "@/components/Icon";
+import { cn } from "@/lib/utils";
+import { HeaderActions, HeaderRoomInfo } from "./HeaderComponents";
+
+export default function Header(props: { className?: string }) {
+ const { className } = props;
+ return (
+ <>
+ {/* Header */}
+
+ Description
+
+ A Realtime Conversational AI Agent powered by TEN
+
+
+
+
+ {/* -- Tabs Section */}
+
+
+ {Object.values(EMobileActiveTab).map((tab) => (
+
+ {MOBILE_ACTIVE_TAB_MAP[tab]}
+
+ ))}
+
+
+
+ {/* -- Graph Select Part */}
+
+
+
+
+
+ {loading
+ ? "Connecting"
+ : !agentConnected
+ ? "Connect"
+ : "Disconnect"}
+
+
+
+ {/*
+ TEN Agent
+| INFO | ++ |
| Room: | +{channel} | +
| Participant: | +{userId} | +
|
+ + |
+ |
| + STATUS + | +|
| Room connected: | +{roomConnectedText} | +
| Agent connected: | +{agentConnectedText} | +
+
+
+
+ );
+}
+
+export const ThemePalettePopover = () => {
+ const themeColor = useAppSelector((state) => state.global.themeColor);
+ const dispatch = useAppDispatch();
+
+ const onMainClickSelect = (index: number) => {
+ const target = COLOR_LIST[index];
+ if (target.active !== themeColor) {
+ dispatch(setThemeColor(target.active));
+ }
+ };
+
+ const onColorSliderChange = (color: string) => {
+ console.log(color);
+ dispatch(setThemeColor(color));
+ };
+
+ return (
+ <>
+
+ STYLE
+
+
+ {COLOR_LIST.map((item, index) => {
+ const isSelected = item.active === themeColor;
+ return (
+
+ );
+ })}
+
+
+
+ {icon}
+ {icon}
+ + {body} +
+ ); +}); +FormMessage.displayName = "FormMessage"; + +export { + useFormField, + Form, + FormItem, + FormLabel, + FormControl, + FormDescription, + FormMessage, + FormField, +}; diff --git a/ai_agents/agents/examples/doodler/frontend/src/components/ui/input.tsx b/ai_agents/agents/examples/doodler/frontend/src/components/ui/input.tsx new file mode 100644 index 0000000000..99dedee510 --- /dev/null +++ b/ai_agents/agents/examples/doodler/frontend/src/components/ui/input.tsx @@ -0,0 +1,25 @@ +import * as React from "react"; + +import { cn } from "@/lib/utils"; + +export interface InputProps + extends React.InputHTMLAttributes