@sampleapp.ai/sdk 1.0.25 → 1.0.26

package/dist/components/chat-bar/typing-textarea.js

@@ -12,7 +12,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { useState, useEffect, useRef, forwardRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
 import { Textarea } from "../ui/textarea";
 export const TypingTextarea = forwardRef((_a, ref) => {
     var { texts, typingSpeed = 30, deletingSpeed = 15, delayAfterText = 800, onSubmit, isStreaming = false, className = "", placeholderClassName = "", value, onChange, onFocus, onBlur, onKeyDown, onPaste, placeholder: originalPlaceholder, rows = 1 } = _a, props = __rest(_a, ["texts", "typingSpeed", "deletingSpeed", "delayAfterText", "onSubmit", "isStreaming", "className", "placeholderClassName", "value", "onChange", "onFocus", "onBlur", "onKeyDown", "onPaste", "placeholder", "rows"]);
@@ -22,11 +21,11 @@ export const TypingTextarea = forwardRef((_a, ref) => {
     const [isWaiting, setIsWaiting] = useState(false);
     const [showTabHint, setShowTabHint] = useState(false);
     const [isPausing, setIsPausing] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
     const localRef = useRef(null);
     const textareaRef = ref || localRef;
     const currentText = texts[textIndex];
     const isEmpty = value === "" || value === undefined;
-    // const isFullTextDisplayed = displayText === currentText && !isDeleting;
     // Handle animation only when textarea is empty
     useEffect(() => {
         if (!isEmpty)
@@ -37,14 +36,16 @@ export const TypingTextarea = forwardRef((_a, ref) => {
                 setIsWaiting(false);
                 setIsPausing(true);
                 setShowTabHint(true);
+                setIsAnimating(true);
             }, delayAfterText);
             return () => clearTimeout(timeout);
         }
         if (isPausing) {
-            // Show tab hint for 3 seconds with fade animation
+            // Show tab hint for 3 seconds
             timeout = setTimeout(() => {
-                setShowTabHint(false);
+                setIsAnimating(false);
                 setTimeout(() => {
+                    setShowTabHint(false);
                     setIsPausing(false);
                     setIsDeleting(true);
                 }, 300); // Wait for fade out animation
@@ -120,25 +121,30 @@ export const TypingTextarea = forwardRef((_a, ref) => {
                 paddingRight: "4px",
                 paddingTop: "0",
                 paddingBottom: "0",
-                marginTop: "4px",
+                marginTop: "5px",
             } },
-            React.createElement("p", { style: Object.assign({ color: "#a1a1aa", fontWeight: "500", lineHeight: "1.5" }, (placeholderClassName ? {} : {})) },
+            React.createElement("p", { style: Object.assign({ color: "#a1a1aa", fontWeight: "500", lineHeight: "1.25" }, (placeholderClassName ? {} : {})) },
                 displayText,
-                React.createElement(AnimatePresence, null, showTabHint && (React.createElement(motion.span, { initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.3 }, style: {
+                React.createElement("span", { style: {
                         fontSize: "12px",
-                        color: "#d1d5db", // zinc-300 for dark mode
-                        backgroundColor: "#27272a", // zinc-800 for dark mode
+                        color: "#d1d5db",
+                        backgroundColor: "#27272a",
                         paddingLeft: "6px",
                         paddingRight: "6px",
                         paddingTop: "2px",
                         paddingBottom: "2px",
                         borderRadius: "8px",
-                        border: "1px solid #3f3f46", // zinc-700 for dark mode
+                        border: "1px solid #3f3f46",
                         alignItems: "center",
                         marginLeft: "8px",
                         display: "inline-flex",
                         whiteSpace: "nowrap",
-                    } }, "Tab to select")))))),
+                        opacity: isAnimating ? 1 : 0,
+                        transform: isAnimating ? "scale(1)" : "scale(0.8)",
+                        transition: "opacity 0.3s ease, transform 0.3s ease",
+                        visibility: showTabHint ? "visible" : "hidden",
+                        verticalAlign: "middle",
+                    } }, "Tab to select")))),
         React.createElement(Textarea, Object.assign({ ref: textareaRef, placeholder: originalPlaceholder, style: className ? {} : {}, value: value, onFocus: onFocus, onBlur: onBlur, onChange: onChange, onKeyDown: handleKeyDown, onPaste: onPaste, rows: rows }, props))));
 });
 TypingTextarea.displayName = "TypingTextarea";

package/dist/components/chat-bar/voice-button.js

@@ -1,26 +1,13 @@
 "use client";
 import React from "react";
 import { Button } from "../ui/button";
-import { VoiceIcon } from "./voice-button/voice-icon";
-export const VoiceButton = ({ isRecording, isTranscribing, onVoiceRecording, playgroundUid, // eslint-disable-line @typescript-eslint/no-unused-vars
-isLoggedIn = false, }) => {
+import { VoiceIcon } from "../icons";
+export const VoiceButton = ({ isRecording, isTranscribing, onVoiceRecording, }) => {
     // Don't show voice button for statsig playground
     // if (playgroundUid === "statsig") {
     //   return null;
     // }
-    const getTooltipText = () => {
-        if (isTranscribing) {
-            return "Transcribing your voice...";
-        }
-        if (isRecording) {
-            return "Click to stop recording";
-        }
-        if (isLoggedIn) {
-            return "Voice Mode – Build with voice (Ctrl/Cmd + /)";
-        }
-        return "Sign up to use voice mode";
-    };
-    return (React.createElement(Button, { size: "sm", variant: "ghostOutline", style: Object.assign(Object.assign({ height: "32px", paddingLeft: "8px", paddingRight: "8px", fontSize: "12px", fontWeight: "500", transition: "all 0.2s ease-in-out" }, (isRecording && {
+    return (React.createElement(Button, { size: "icon", variant: "outline", style: Object.assign(Object.assign({ height: "32px", paddingLeft: "8px", paddingRight: "8px", fontSize: "12px", fontWeight: "500", transition: "all 0.2s ease-in-out" }, (isRecording && {
             backgroundColor: "#ef4444", // red-500
             borderColor: "#ef4444",
             boxShadow: "0 10px 15px -3px rgba(239, 68, 68, 0.25)",
@@ -31,12 +18,7 @@ isLoggedIn = false, }) => {
             boxShadow: "0 10px 15px -3px rgba(59, 130, 246, 0.25)",
             color: "white",
         })), onClick: () => {
-            if (isLoggedIn && !isTranscribing) {
-                onVoiceRecording();
-            }
-            else if (!isLoggedIn) {
-                window.location.href = "/sign-up";
-            }
+            onVoiceRecording();
         }, disabled: isTranscribing },
         React.createElement(VoiceIcon, { isRecording: isRecording, isTranscribing: isTranscribing })));
 };

package/dist/components/chat-bar.js

@@ -2,22 +2,36 @@
 /* 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";
+import { LoaderIcon, ArrowUpIcon } from "./icons";
+import { TypingTextarea } from "./chat-bar/typing-textarea";
+import { VoiceButton } from "./chat-bar/voice-button";
+// Default fallback color scheme
+const DEFAULT_COLOR_SCHEME = {
+    gradient: "linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899)",
+    shadow: {
+        dark: "rgba(0, 0, 0, 0.2)",
+    },
+};
 const getColorScheme = (themeName, playgroundUid) => {
-    // If theme is provided, use it directly
-    if (themeName) {
-        return getTheme(themeName);
+    try {
+        // If theme is provided, use it directly
+        if (themeName) {
+            const theme = getTheme(themeName);
+            return theme || DEFAULT_COLOR_SCHEME;
+        }
+        // Use default theme
+        const defaultTheme = getTheme();
+        return defaultTheme || DEFAULT_COLOR_SCHEME;
+    }
+    catch (error) {
+        console.warn("Theme system error, using fallback:", error);
+        return DEFAULT_COLOR_SCHEME;
     }
-    // Use default theme
-    return getTheme();
 };
-export const ChatBar = ({ query, placeholder = "Ask anything...", setQuery, onSubmit, isStreaming, height, hasPendingEnv, playgroundUid, hasTypingAnimation = false, isSubmitting, onCancel, typingTexts = [
+export const ChatBar = ({ placeholder = "Ask anything...", onSubmit, hasPendingEnv, playgroundUid, isSubmitting, 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",
@@ -25,31 +39,43 @@ export const ChatBar = ({ query, placeholder = "Ask anything...", setQuery, onSu
     "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, }) => {
+], shouldFocusOnMount = true, showModelSelector = true, projectUid, theme, height = "auto", // Add default for required height prop
+ }) => {
+    var _a;
     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 [query, setQuery] = useState("");
     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]);
+    // Get color scheme for gradient border with error handling
+    const colorScheme = useMemo(() => {
+        try {
+            return getColorScheme(theme, playgroundUid);
+        }
+        catch (error) {
+            console.warn("Error getting color scheme:", error);
+            return DEFAULT_COLOR_SCHEME;
+        }
+    }, [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();
+            try {
+                textareaRef.current.focus();
+                textareaRef.current.select();
+            }
+            catch (error) {
+                console.warn("Focus error:", error);
+            }
         }
     }, [isMounted, shouldFocusOnMount]);
     const handleFocus = () => {
@@ -62,11 +88,16 @@ export const ChatBar = ({ query, placeholder = "Ask anything...", setQuery, onSu
     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`;
+            try {
+                // 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`;
+            }
+            catch (error) {
+                console.warn("Textarea height adjustment error:", error);
+            }
         }
     };
     // Update height whenever query changes
@@ -362,8 +393,26 @@ export const ChatBar = ({ query, placeholder = "Ask anything...", setQuery, onSu
             }
         }
     };
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (!query.trim()) {
+            return;
+        }
+        try {
+            if (playgroundUid) {
+                const encodedQuery = encodeURIComponent(query.trim());
+                const url = `https://${playgroundUid}.sampleapp.ai?q=${encodedQuery}`;
+                window.open(url, "_blank");
+            }
+            if (onSubmit) {
+                onSubmit(e);
+            }
+        }
+        catch (error) {
+            console.error("Submit error:", error);
+        }
+    };
     return (React.createElement("div", null,
-        React.createElement(VoiceOverlay, { isRecording: isRecording, isTranscribing: isTranscribing, onDismiss: handleVoiceOverlayDismiss }),
         React.createElement("div", { style: {
                 position: "relative",
                 padding: "2px",
@@ -373,7 +422,7 @@ export const ChatBar = ({ query, placeholder = "Ask anything...", setQuery, onSu
                 marginRight: "auto",
             } },
             React.createElement("div", { style: {
-                    backgroundColor: colorScheme.shadow.dark,
+                    backgroundColor: ((_a = colorScheme.shadow) === null || _a === void 0 ? void 0 : _a.dark) || "rgba(0, 0, 0, 0.2)",
                     position: "absolute",
                     top: "0",
                     right: "0",
@@ -386,7 +435,7 @@ export const ChatBar = ({ query, placeholder = "Ask anything...", setQuery, onSu
                     pointerEvents: "none",
                 } }),
             React.createElement("div", { style: {
-                    background: colorScheme.gradient,
+                    background: colorScheme.gradient || DEFAULT_COLOR_SCHEME.gradient,
                     backgroundSize: "400% 400%",
                     position: "absolute",
                     top: "0",
@@ -402,7 +451,7 @@ export const ChatBar = ({ query, placeholder = "Ask anything...", setQuery, onSu
                     animation: "gradient-bg 5s ease infinite",
                 } }),
             React.createElement("div", { style: {
-                    background: colorScheme.gradient,
+                    background: colorScheme.gradient || DEFAULT_COLOR_SCHEME.gradient,
                     backgroundSize: "400% 400%",
                     position: "absolute",
                     top: "0",
@@ -437,7 +486,7 @@ export const ChatBar = ({ query, placeholder = "Ask anything...", setQuery, onSu
                             paddingTop: "4px",
                             paddingBottom: "4px",
                         } },
-                        hasTypingAnimation && typingTexts.length > 0 ? (React.createElement(TypingTextarea, { texts: typingTexts, ref: textareaRef, style: {
+                        typingTexts.length > 0 ? (React.createElement(TypingTextarea, { texts: typingTexts, ref: textareaRef, style: {
                                 flex: 1,
                                 width: "100%",
                                 border: "none",
@@ -464,8 +513,8 @@ export const ChatBar = ({ query, placeholder = "Ask anything...", setQuery, onSu
                                     e.preventDefault();
                                     return;
                                 }
-                                onSubmit(e);
-                            }, isStreaming: isStreaming, rows: 1 })) : (React.createElement(Textarea, { ref: textareaRef, placeholder: placeholder, style: {
+                                handleSubmit(e);
+                            }, rows: 1 })) : (React.createElement(Textarea, { ref: textareaRef, placeholder: placeholder, style: {
                                 flex: 1,
                                 width: "100%",
                                 border: "none",
@@ -492,30 +541,15 @@ export const ChatBar = ({ query, placeholder = "Ask anything...", setQuery, onSu
                                         return;
                                     }
                                     e.preventDefault();
-                                    if (isStreaming) {
-                                        return;
-                                    }
-                                    onSubmit(e);
+                                    handleSubmit(e);
                                 }
                             }, rows: 1 })),
-                        React.createElement("div", null,
-                            React.createElement(VoiceButton, { isRecording: isRecording, isTranscribing: isTranscribing, onVoiceRecording: handleVoiceRecording, playgroundUid: playgroundUid }),
+                        React.createElement("div", { style: { display: "flex", flexDirection: "row", gap: "4px" } },
+                            React.createElement(VoiceButton, { isRecording: isRecording, isTranscribing: isTranscribing, onVoiceRecording: handleVoiceRecording }),
                             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" } }))))),
+                                }, disabled: query.length === 0 || isSubmitting || hasPendingEnv, variant: "secondary", onClick: handleSubmit, size: "icon" }, isSubmitting ? (React.createElement(LoaderIcon, { size: 20, style: { animation: "spin 1s linear infinite" } })) : (React.createElement(ArrowUpIcon, { style: { width: "20px", height: "20px" } }))))),
                     React.createElement("div", { style: {
                             display: "flex",
                             alignItems: "center",

package/dist/components/icons.js

@@ -0,0 +1,155 @@
+"use client";
+import React from "react";
+// Loader/Spinner Icon Component
+export const LoaderIcon = ({ size = 20, className = "", style = {}, }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, `
+          @keyframes icon-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        `),
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: `lucide lucide-loader-circle ${className}`, style: Object.assign({ animation: "icon-spin 1s linear infinite" }, style) },
+            React.createElement("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }))));
+};
+// Arrow Up Icon Component
+export const ArrowUpIcon = ({ size = 20, className = "", style = {}, }) => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: `lucide lucide-arrow-up ${className}`, style: Object.assign({}, style) },
+        React.createElement("path", { d: "m5 12 7-7 7 7" }),
+        React.createElement("path", { d: "M12 19V5" })));
+};
+export const VoiceIcon = ({ isRecording = false, isTranscribing = false, size = 20, style = {}, }) => {
+    const containerStyle = Object.assign({ position: "relative", width: `${size}px`, height: `${Math.floor(size * 0.8)}px`, display: "flex", alignItems: "center", justifyContent: "center" }, style);
+    if (isTranscribing) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("style", null, `
+            @keyframes icon-spin {
+              from { transform: rotate(0deg); }
+              to { transform: rotate(360deg); }
+            }
+          `),
+            React.createElement("div", { style: containerStyle },
+                React.createElement("div", { style: {
+                        width: `${Math.floor(size * 0.6)}px`,
+                        height: `${Math.floor(size * 0.6)}px`,
+                        border: "2px solid currentColor",
+                        borderTop: "2px solid transparent",
+                        borderRadius: "50%",
+                        animation: "icon-spin 1s linear infinite",
+                    } }))));
+    }
+    if (isRecording) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("style", null, `
+            @keyframes icon-pulse {
+              0%, 100% { transform: scale(1); }
+              50% { transform: scale(0.95); }
+            }
+          `),
+            React.createElement("div", { style: containerStyle },
+                React.createElement("div", { style: {
+                        width: `${Math.floor(size * 0.6)}px`,
+                        height: `${Math.floor(size * 0.6)}px`,
+                        backgroundColor: "currentColor",
+                        borderRadius: "2px",
+                        animation: "icon-pulse 1s ease-in-out infinite",
+                    } }))));
+    }
+    // Default voice icon with sound wave animation
+    const barWidth = Math.max(1, Math.floor(size * 0.075));
+    const gap = Math.max(1, Math.floor(size * 0.1));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, `
+          @keyframes wave1 {
+            0%, 100% {
+              transform: scaleY(0.4);
+              opacity: 0.6;
+            }
+            50% {
+              transform: scaleY(0.8);
+              opacity: 0.9;
+            }
+          }
+          
+          @keyframes wave2 {
+            0%, 100% {
+              transform: scaleY(0.5);
+              opacity: 0.7;
+            }
+            50% {
+              transform: scaleY(1);
+              opacity: 1;
+            }
+          }
+          
+          @keyframes wave3 {
+            0%, 100% {
+              transform: scaleY(0.6);
+              opacity: 0.8;
+            }
+            50% {
+              transform: scaleY(1);
+              opacity: 1;
+            }
+          }
+          
+          @keyframes wave4 {
+            0%, 100% {
+              transform: scaleY(0.5);
+              opacity: 0.7;
+            }
+            50% {
+              transform: scaleY(0.9);
+              opacity: 1;
+            }
+          }
+          
+          @keyframes wave5 {
+            0%, 100% {
+              transform: scaleY(0.4);
+              opacity: 0.6;
+            }
+            50% {
+              transform: scaleY(0.7);
+              opacity: 0.9;
+            }
+          }
+        `),
+        React.createElement("div", { style: containerStyle },
+            React.createElement("div", { style: { display: "flex", alignItems: "center", gap: `${gap}px` } },
+                React.createElement("div", { style: {
+                        width: `${barWidth}px`,
+                        height: `${Math.floor(size * 0.4)}px`,
+                        backgroundColor: "currentColor",
+                        borderRadius: "999px",
+                        animation: "wave1 1.8s ease-in-out infinite",
+                    } }),
+                React.createElement("div", { style: {
+                        width: `${barWidth}px`,
+                        height: `${Math.floor(size * 0.6)}px`,
+                        backgroundColor: "currentColor",
+                        borderRadius: "999px",
+                        animation: "wave2 2.1s ease-in-out infinite",
+                    } }),
+                React.createElement("div", { style: {
+                        width: `${barWidth}px`,
+                        height: `${Math.floor(size * 0.8)}px`,
+                        backgroundColor: "currentColor",
+                        borderRadius: "999px",
+                        animation: "wave3 1.6s ease-in-out infinite",
+                    } }),
+                React.createElement("div", { style: {
+                        width: `${barWidth}px`,
+                        height: `${Math.floor(size * 0.6)}px`,
+                        backgroundColor: "currentColor",
+                        borderRadius: "999px",
+                        animation: "wave4 1.9s ease-in-out infinite",
+                    } }),
+                React.createElement("div", { style: {
+                        width: `${barWidth}px`,
+                        height: `${Math.floor(size * 0.4)}px`,
+                        backgroundColor: "currentColor",
+                        borderRadius: "999px",
+                        animation: "wave5 2.2s ease-in-out infinite",
+                    } })))));
+};

package/dist/components/minimal-chat-bar.js

@@ -0,0 +1,51 @@
+// src/components/MinimalChatBar.tsx
+import React, { useState } from "react";
+export const MinimalChatBar = ({ placeholder = "Ask anything...", onSubmit, theme = "light", }) => {
+    const [message, setMessage] = useState("");
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (message.trim()) {
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(message.trim());
+            setMessage("");
+        }
+    };
+    return (React.createElement("div", { style: {
+            width: "100%",
+            maxWidth: "600px",
+            margin: "0 auto",
+        } },
+        React.createElement("form", { onSubmit: handleSubmit, style: {
+                display: "flex",
+                gap: "8px",
+                padding: "12px",
+                border: theme === "dark" ? "1px solid #333" : "1px solid #ccc",
+                borderRadius: "8px",
+                backgroundColor: theme === "dark" ? "#1a1a1a" : "#ffffff",
+                boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+            } },
+            React.createElement("input", { type: "text", value: message, onChange: (e) => setMessage(e.target.value), placeholder: placeholder, style: {
+                    flex: 1,
+                    padding: "8px 12px",
+                    border: "1px solid #ddd",
+                    borderRadius: "4px",
+                    fontSize: "14px",
+                    outline: "none",
+                    backgroundColor: theme === "dark" ? "#333" : "#fff",
+                    color: theme === "dark" ? "#fff" : "#000",
+                } }),
+            React.createElement("button", { type: "submit", disabled: !message.trim(), style: {
+                    padding: "8px 16px",
+                    backgroundColor: message.trim() ? "#007bff" : "#ccc",
+                    color: "white",
+                    border: "none",
+                    borderRadius: "4px",
+                    cursor: message.trim() ? "pointer" : "not-allowed",
+                    fontSize: "14px",
+                } }, "Send")),
+        React.createElement("p", { style: {
+                fontSize: "12px",
+                color: "#666",
+                textAlign: "center",
+                marginTop: "8px",
+            } }, "SDK Version: @sampleapp.ai/sdk v1.0.25")));
+};