@sampleapp.ai/sdk 1.0.23 → 1.0.25

package/dist/components/chat-bar.js

@@ -0,0 +1,546 @@
+"use client";
+/* eslint-disable @next/next/no-img-element */
+import React from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { ArrowUp, Loader2, CircleStop } from "lucide-react";
+import { TypingTextarea } from "./chat-bar/typing-textarea";
+import { Textarea } from "./ui/textarea";
+import { VoiceButton } from "./chat-bar/voice-button";
+import { VoiceOverlay } from "./chat-bar/voice-overlay";
+import { Button } from "./ui/button";
+import { getTheme } from "../themes";
+const getColorScheme = (themeName, playgroundUid) => {
+    // If theme is provided, use it directly
+    if (themeName) {
+        return getTheme(themeName);
+    }
+    // Use default theme
+    return getTheme();
+};
+export const ChatBar = ({ query, placeholder = "Ask anything...", setQuery, onSubmit, isStreaming, height, hasPendingEnv, playgroundUid, hasTypingAnimation = false, isSubmitting, onCancel, typingTexts = [
+    "Build me an AI chatbot application using OpenAI API",
+    "Build me an ecommerce website using Stripe API",
+    "Build me a price tracking tool using AgentQL API",
+    "Build me a movie recommendation system using Qdrant API",
+    "Build me a weather forecasting app using OpenWeather API",
+    "Build me a SMS notification system using Twilio API",
+    "Build me a travel booking platform using Skyscanner API",
+    // "Build me an inventory management system using AWS S3",
+    // "Build me a social media platform using Firebase",
+    // "Build me a project management tool using Trello API",
+], shouldFocusOnMount = true, showModelSelector = true, projectUid, theme, }) => {
+    const [isFocused, setIsFocused] = useState(true);
+    const [isRecording, setIsRecording] = useState(false);
+    const [isTranscribing, setIsTranscribing] = useState(false);
+    const [, setShowVoiceOverlay] = useState(false);
+    const [recordingTimeout, setRecordingTimeout] = useState(null);
+    const [recordingStartTime, setRecordingStartTime] = useState(null);
+    const mediaRecorderRef = useRef(null);
+    const audioChunksRef = useRef([]);
+    const fileInputRef = useRef(null);
+    const textareaRef = useRef(null);
+    const [isMounted, setIsMounted] = useState(false);
+    // Get color scheme for gradient border
+    const colorScheme = useMemo(() => getColorScheme(theme, playgroundUid), [theme, playgroundUid]);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    useEffect(() => {
+        // Focus and select all text in the textarea when component mounts
+        if (shouldFocusOnMount && textareaRef.current && isMounted) {
+            textareaRef.current.focus();
+            textareaRef.current.select();
+        }
+    }, [isMounted, shouldFocusOnMount]);
+    const handleFocus = () => {
+        setIsFocused(true);
+    };
+    const handleBlur = () => {
+        setIsFocused(true);
+    };
+    // Function to adjust textarea height
+    const adjustTextareaHeight = () => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            // Reset height to auto to get the correct scrollHeight
+            textarea.style.height = "auto";
+            // Set new height based on scrollHeight, with a maximum of 200px
+            const newHeight = Math.min(textarea.scrollHeight, 200);
+            textarea.style.height = `${newHeight}px`;
+        }
+    };
+    // Update height whenever query changes
+    useEffect(() => {
+        adjustTextareaHeight();
+    }, [query]);
+    // Keyboard shortcuts for voice mode
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            // Check for Cmd+/ (Mac) or Ctrl+/ (Windows/Linux) - toggles recording
+            const isVoiceShortcut = (event.metaKey || event.ctrlKey) && event.key === "/";
+            // Check for Enter or Escape - stops recording if currently recording
+            const isStopRecordingKey = (event.key === "Enter" || event.key === "Escape") &&
+                (isRecording || isTranscribing);
+            if (isVoiceShortcut) {
+                event.preventDefault();
+                handleVoiceRecording();
+            }
+            else if (isStopRecordingKey) {
+                // Stop recording with Enter or Escape
+                event.preventDefault();
+                if (isRecording && !isTranscribing) {
+                    // Only stop if recording (not if transcribing)
+                    handleVoiceRecording();
+                }
+            }
+        };
+        // Add event listener
+        document.addEventListener("keydown", handleKeyDown);
+        // Cleanup function
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [isRecording, isTranscribing]); // Dependencies for handleVoiceRecording
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (recordingTimeout) {
+                clearTimeout(recordingTimeout);
+            }
+            if (mediaRecorderRef.current && isRecording) {
+                mediaRecorderRef.current.stop();
+            }
+            setShowVoiceOverlay(false);
+        };
+    }, [recordingTimeout, isRecording]);
+    const handleVoiceOverlayDismiss = () => {
+        // Only allow dismissing during recording, not transcribing
+        if (isTranscribing)
+            return;
+        if (isRecording) {
+            // Stop recording if currently recording
+            stopRecording();
+        }
+        setShowVoiceOverlay(false);
+    };
+    const stopRecording = async () => {
+        if (mediaRecorderRef.current && isRecording) {
+            // Check minimum recording duration (1 second)
+            // const now = Date.now();
+            // const recordingDuration = recordingStartTime
+            //   ? now - recordingStartTime
+            //   : 0;
+            // if (recordingDuration < 1000) {
+            //   toast({
+            //     title: "Recording Too Short",
+            //     description: "Please record for at least 1 second before stopping.",
+            //     variant: "destructive",
+            //   });
+            //   return;
+            // }
+            // Immediately update UI state to prevent double-clicks
+            setIsRecording(false);
+            setIsTranscribing(true);
+            // Clear timeout
+            if (recordingTimeout) {
+                clearTimeout(recordingTimeout);
+                setRecordingTimeout(null);
+            }
+            // Wait for the audio data to be processed
+            return new Promise((resolve) => {
+                if (mediaRecorderRef.current) {
+                    let hasData = false;
+                    let stopTimeout; // eslint-disable-line prefer-const
+                    // Set up data collection with timeout
+                    mediaRecorderRef.current.ondataavailable = (event) => {
+                        if (event.data.size > 0) {
+                            hasData = true;
+                            audioChunksRef.current.push(event.data);
+                        }
+                    };
+                    mediaRecorderRef.current.onstop = async () => {
+                        // Clear any pending timeout
+                        if (stopTimeout) {
+                            clearTimeout(stopTimeout);
+                        }
+                        try {
+                            // Check if we have any audio data
+                            if (!hasData || audioChunksRef.current.length === 0) {
+                                throw new Error("No audio data recorded");
+                            }
+                            const audioBlob = new Blob(audioChunksRef.current, {
+                                type: "audio/wav",
+                            });
+                            // Check if the blob has meaningful size (at least 1KB)
+                            if (audioBlob.size < 1024) {
+                                throw new Error("Audio recording too short");
+                            }
+                            // Send to backend for transcription
+                            const formData = new FormData();
+                            formData.append("audio", audioBlob, "recording.wav");
+                            const response = await fetch("/api/voice/transcribe", {
+                                method: "POST",
+                                body: formData,
+                            });
+                            if (response.ok) {
+                                const { transcription } = await response.json();
+                                if (transcription && transcription.trim()) {
+                                    // Add transcribed text to current query
+                                    const newQuery = query
+                                        ? `${query} ${transcription}`
+                                        : transcription;
+                                    setQuery(newQuery.trim());
+                                    // Focus the textarea after transcription is added so user can press Enter immediately
+                                    setTimeout(() => {
+                                        if (textareaRef.current) {
+                                            textareaRef.current.focus();
+                                            // Move cursor to end of text
+                                            const length = textareaRef.current.value.length;
+                                            textareaRef.current.setSelectionRange(length, length);
+                                        }
+                                    }, 100); // Small delay to ensure state update completes
+                                }
+                                else {
+                                    // toast({
+                                    //   title: "No Speech Detected",
+                                    //   description:
+                                    //     "Try speaking more clearly or closer to the microphone",
+                                    //   variant: "destructive",
+                                    // });
+                                }
+                            }
+                            else {
+                                throw new Error("Transcription failed");
+                            }
+                        }
+                        catch (error) {
+                            console.error("Transcription error:", error);
+                            // Provide more specific error messages
+                            let errorMessage = "Could not convert speech to text. Please try again.";
+                            let errorTitle = "Transcription Failed";
+                            if (error instanceof Error) {
+                                if (error.message.includes("No audio data") ||
+                                    error.message.includes("too short")) {
+                                    errorTitle = "Recording Too Short";
+                                    errorMessage =
+                                        "Please speak for at least 1-2 seconds before stopping.";
+                                }
+                            }
+                            // toast({
+                            //   title: errorTitle,
+                            //   description: errorMessage,
+                            //   variant: "destructive",
+                            // });
+                        }
+                        finally {
+                            // Clean up
+                            audioChunksRef.current = [];
+                            mediaRecorderRef.current = null;
+                            setRecordingStartTime(null);
+                            setIsTranscribing(false);
+                            setShowVoiceOverlay(false);
+                            resolve();
+                        }
+                    };
+                    // Set up a timeout to force stop if MediaRecorder doesn't stop properly
+                    stopTimeout = setTimeout(() => {
+                        console.warn("MediaRecorder stop timeout, forcing cleanup");
+                        audioChunksRef.current = [];
+                        mediaRecorderRef.current = null;
+                        setRecordingStartTime(null);
+                        setIsTranscribing(false);
+                        setShowVoiceOverlay(false);
+                        resolve();
+                    }, 5000); // 5 second timeout
+                    // Stop the recording
+                    try {
+                        mediaRecorderRef.current.stop();
+                    }
+                    catch (error) {
+                        console.error("Error stopping MediaRecorder:", error);
+                        // Force cleanup if stop fails
+                        if (stopTimeout) {
+                            clearTimeout(stopTimeout);
+                        }
+                        audioChunksRef.current = [];
+                        mediaRecorderRef.current = null;
+                        setRecordingStartTime(null);
+                        setIsTranscribing(false);
+                        setShowVoiceOverlay(false);
+                        resolve();
+                    }
+                }
+                else {
+                    // No MediaRecorder available, just clean up
+                    setRecordingStartTime(null);
+                    setIsTranscribing(false);
+                    setShowVoiceOverlay(false);
+                    resolve();
+                }
+            });
+        }
+    };
+    const handleVoiceRecording = async () => {
+        if (isTranscribing) {
+            // Don't allow interaction while transcribing
+            return;
+        }
+        if (isRecording) {
+            // Manual stop
+            await stopRecording();
+        }
+        else {
+            // Start recording - automatically trigger permission request
+            try {
+                // Check if mediaDevices is supported
+                if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+                    throw new Error("Browser doesn't support microphone access");
+                }
+                // This will automatically trigger the browser's permission prompt
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    audio: {
+                        echoCancellation: true,
+                        noiseSuppression: true,
+                        sampleRate: 44100,
+                    },
+                });
+                // Create MediaRecorder
+                const mediaRecorder = new MediaRecorder(stream, {
+                    mimeType: MediaRecorder.isTypeSupported("audio/webm")
+                        ? "audio/webm"
+                        : "audio/mp4",
+                });
+                mediaRecorderRef.current = mediaRecorder;
+                audioChunksRef.current = [];
+                // Set up event listeners
+                mediaRecorder.ondataavailable = (event) => {
+                    if (event.data.size > 0) {
+                        audioChunksRef.current.push(event.data);
+                    }
+                };
+                // Start recording
+                mediaRecorder.start(200); // Collect data every 200 ms
+                setIsRecording(true);
+                setRecordingStartTime(Date.now());
+                setShowVoiceOverlay(true);
+                // Set up 60 second auto-timeout
+                const timeout = setTimeout(async () => {
+                    await stopRecording();
+                }, 60000);
+                setRecordingTimeout(timeout);
+            }
+            catch (error) {
+                console.error("Microphone access error:", error);
+                let errorMessage = "Please allow microphone access to use voice recording";
+                let errorTitle = "Microphone Access Required";
+                if (error instanceof Error) {
+                    if (error.name === "NotAllowedError") {
+                        errorMessage =
+                            "Microphone access was denied. Please click the microphone icon in your browser's address bar and allow access, then try again.";
+                    }
+                    else if (error.name === "NotFoundError") {
+                        errorTitle = "No Microphone Found";
+                        errorMessage =
+                            "No microphone was detected. Please connect a microphone and try again.";
+                    }
+                    else if (error.name === "NotReadableError") {
+                        errorTitle = "Microphone In Use";
+                        errorMessage =
+                            "Your microphone is being used by another application. Please close other apps and try again.";
+                    }
+                    else if (error.name === "NotSupportedError") {
+                        errorTitle = "Not Supported";
+                        errorMessage =
+                            "Your browser doesn't support microphone access. Please use a modern browser.";
+                    }
+                }
+                // toast({
+                //   title: errorTitle,
+                //   description: errorMessage,
+                //   variant: "destructive",
+                // });
+            }
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement(VoiceOverlay, { isRecording: isRecording, isTranscribing: isTranscribing, onDismiss: handleVoiceOverlayDismiss }),
+        React.createElement("div", { style: {
+                position: "relative",
+                padding: "2px",
+                width: "100%",
+                maxWidth: "100%",
+                marginLeft: "auto",
+                marginRight: "auto",
+            } },
+            React.createElement("div", { style: {
+                    backgroundColor: colorScheme.shadow.dark,
+                    position: "absolute",
+                    top: "0",
+                    right: "0",
+                    bottom: "0",
+                    left: "0",
+                    borderRadius: "0.85rem",
+                    transition: "opacity 0.3s ease-in-out",
+                    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+                    opacity: "1",
+                    pointerEvents: "none",
+                } }),
+            React.createElement("div", { style: {
+                    background: colorScheme.gradient,
+                    backgroundSize: "400% 400%",
+                    position: "absolute",
+                    top: "0",
+                    right: "0",
+                    bottom: "0",
+                    left: "0",
+                    borderRadius: "0.85rem",
+                    zIndex: 1,
+                    filter: "blur(12px)",
+                    transition: "opacity 0.3s ease-in-out",
+                    pointerEvents: "none",
+                    opacity: isFocused ? "0.8" : "0.4",
+                    animation: "gradient-bg 5s ease infinite",
+                } }),
+            React.createElement("div", { style: {
+                    background: colorScheme.gradient,
+                    backgroundSize: "400% 400%",
+                    position: "absolute",
+                    top: "0",
+                    right: "0",
+                    bottom: "0",
+                    left: "0",
+                    borderRadius: "0.85rem",
+                    zIndex: 1,
+                    transition: "opacity 0.3s ease-in-out",
+                    pointerEvents: "none",
+                    opacity: isFocused ? "1" : "0.7",
+                    animation: "gradient-bg 5s ease infinite",
+                } }),
+            React.createElement("div", { style: {
+                    position: "relative",
+                    zIndex: 10,
+                    borderRadius: "0.75rem",
+                    backgroundColor: "rgb(24, 24, 27)", // zinc-900 equivalent
+                    width: "100%",
+                    paddingLeft: "0.25rem",
+                    paddingRight: "0.25rem",
+                    paddingTop: "0.5rem",
+                    paddingBottom: "0.5rem",
+                } },
+                React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } },
+                    React.createElement("div", { style: {
+                            position: "relative",
+                            display: "flex",
+                            paddingLeft: "8px",
+                            paddingRight: "8px",
+                            gap: "8px",
+                            paddingTop: "4px",
+                            paddingBottom: "4px",
+                        } },
+                        hasTypingAnimation && typingTexts.length > 0 ? (React.createElement(TypingTextarea, { texts: typingTexts, ref: textareaRef, style: {
+                                flex: 1,
+                                width: "100%",
+                                border: "none",
+                                boxShadow: "none",
+                                outline: "none",
+                                paddingLeft: "4px",
+                                paddingRight: "4px",
+                                resize: "none",
+                                fontSize: "16px",
+                                overflow: "hidden",
+                                backgroundColor: "transparent",
+                                display: "block",
+                                paddingTop: "0",
+                                paddingBottom: "0",
+                                lineHeight: "1.5",
+                                overflowY: "auto",
+                                maxHeight: "192px",
+                                marginTop: "4px",
+                                color: "#f4f4f5",
+                                fontFamily: "inherit",
+                            }, value: query, onFocus: handleFocus, onBlur: handleBlur, onChange: (e) => setQuery(e.target.value), onSubmit: (e) => {
+                                // Prevent submission if recording
+                                if (isRecording || isTranscribing) {
+                                    e.preventDefault();
+                                    return;
+                                }
+                                onSubmit(e);
+                            }, isStreaming: isStreaming, rows: 1 })) : (React.createElement(Textarea, { ref: textareaRef, placeholder: placeholder, style: {
+                                flex: 1,
+                                width: "100%",
+                                border: "none",
+                                boxShadow: "none",
+                                outline: "none",
+                                paddingLeft: "4px",
+                                paddingRight: "4px",
+                                resize: "none",
+                                fontSize: "16px",
+                                overflow: "hidden",
+                                backgroundColor: "transparent",
+                                display: "block",
+                                paddingTop: "0",
+                                paddingBottom: "0",
+                                lineHeight: "1.5",
+                                overflowY: "auto",
+                                maxHeight: "192px",
+                                marginTop: "4px",
+                                color: "#f4f4f5",
+                                fontFamily: "inherit",
+                            }, value: query, onFocus: handleFocus, onBlur: handleBlur, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+                                if (e.key === "Enter") {
+                                    if (e.shiftKey) {
+                                        return;
+                                    }
+                                    e.preventDefault();
+                                    if (isStreaming) {
+                                        return;
+                                    }
+                                    onSubmit(e);
+                                }
+                            }, rows: 1 })),
+                        React.createElement("div", null,
+                            React.createElement(VoiceButton, { isRecording: isRecording, isTranscribing: isTranscribing, onVoiceRecording: handleVoiceRecording, playgroundUid: playgroundUid }),
+                            React.createElement(Button, { style: {
+                                    height: "32px",
+                                    width: "32px",
+                                    borderRadius: "6px",
+                                }, disabled: query.length === 0 || isSubmitting || hasPendingEnv, variant: isStreaming ? "outline" : "default", onClick: (e) => {
+                                    if (isStreaming && onCancel) {
+                                        onCancel();
+                                    }
+                                    else {
+                                        onSubmit(e);
+                                    }
+                                } }, isSubmitting ? (React.createElement(Loader2, { style: {
+                                    height: "20px",
+                                    width: "20px",
+                                    animation: "spin 1s linear infinite",
+                                } })) : isStreaming ? (React.createElement(CircleStop, { style: { height: "24px", width: "24px" } })) : (React.createElement(ArrowUp, { style: { height: "20px", width: "20px" } }))))),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            paddingLeft: "8px",
+                            paddingRight: "8px",
+                        } },
+                        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "4px" } }, showModelSelector && (React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } })))))),
+            React.createElement("style", null, `
+        @keyframes gradient-bg {
+          0%,
+          100% {
+            background-position: 0% 50%;
+          }
+          50% {
+            background-position: 100% 50%;
+          }
+        }
+        @keyframes spin {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `))));
+};