@sampleapp.ai/sdk 1.0.24 → 1.0.26

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")));
+};

package/dist/components/ui/button.js

@@ -0,0 +1,189 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+// Import your scoped styles
+// Base button styles
+const baseButtonStyles = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5rem",
+    whiteSpace: "nowrap",
+    borderRadius: "15px",
+    fontSize: "14px",
+    fontWeight: "500",
+    transition: "all 0.15s ease-in-out",
+    outline: "none",
+    border: "none",
+    cursor: "pointer",
+    fontFamily: "inherit",
+    flexShrink: 0,
+};
+// Variant styles using prefixed CSS variables with fallbacks
+const variantStyles = {
+    default: {
+        backgroundColor: "hsl(var(--sdk-primary, 240 5.9% 10%))",
+        color: "hsl(var(--sdk-primary-foreground, 0 0% 98%))",
+        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    },
+    destructive: {
+        backgroundColor: "hsl(var(--sdk-destructive, 0 84.2% 60.2%))",
+        color: "hsl(var(--sdk-destructive-foreground, 0 0% 98%))",
+        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    },
+    outline: {
+        border: "1px solid hsl(var(--sdk-border, 240 3.7% 25%))",
+        backgroundColor: "hsl(var(--sdk-secondary, 240 3.7% 15.9%))",
+        color: "hsl(var(--sdk-secondary-foreground, 0 0% 98%))",
+        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    },
+    secondary: {
+        backgroundColor: "hsl(var(--sdk-secondary, 240 4.8% 95.9%))",
+        color: "hsl(var(--sdk-secondary-foreground, 240 5.9% 10%))",
+        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    },
+    ghost: {
+        backgroundColor: "transparent",
+        color: "hsl(var(--sdk-foreground, 240 10% 3.9%))",
+    },
+    link: {
+        backgroundColor: "transparent",
+        color: "hsl(var(--sdk-primary, 240 5.9% 10%))",
+        textDecoration: "underline",
+        textUnderlineOffset: "4px",
+    },
+    ghostOutline: {
+        border: "1px solid hsl(var(--sdk-secondary, 240 4.8% 95.9%))",
+        backgroundColor: "transparent",
+        color: "hsl(var(--sdk-muted-foreground, 240 3.8% 46.1%))",
+        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    },
+};
+// Size styles
+const sizeStyles = {
+    default: {
+        height: "36px",
+        paddingLeft: "16px",
+        paddingRight: "16px",
+        paddingTop: "8px",
+        paddingBottom: "8px",
+    },
+    sm: {
+        height: "32px",
+        paddingLeft: "12px",
+        paddingRight: "12px",
+        fontSize: "12px",
+        borderRadius: "6px",
+    },
+    lg: {
+        height: "40px",
+        paddingLeft: "32px",
+        paddingRight: "32px",
+        borderRadius: "6px",
+    },
+    icon: {
+        height: "32px",
+        width: "32px",
+        padding: "0",
+    },
+};
+// Hover styles with CSS variables and fallbacks
+const getHoverStyles = (variant) => {
+    switch (variant) {
+        case "default":
+            return { backgroundColor: "hsl(var(--sdk-primary, 240 5.9% 10%) / 0.9)" };
+        case "destructive":
+            return {
+                backgroundColor: "hsl(var(--sdk-destructive, 0 84.2% 60.2%) / 0.9)",
+            };
+        case "outline":
+            return {
+                backgroundColor: "hsl(var(--sdk-secondary, 240 3.7% 15.9%) / 0.8)",
+                color: "hsl(var(--sdk-secondary-foreground, 0 0% 98%))",
+            };
+        case "secondary":
+            return {
+                backgroundColor: "hsl(var(--sdk-secondary, 240 4.8% 95.9%) / 0.7)",
+            };
+        case "ghost":
+            return {
+                backgroundColor: "hsl(var(--sdk-accent, 240 4.8% 95.9%))",
+                color: "hsl(var(--sdk-accent-foreground, 240 5.9% 10%))",
+            };
+        case "link":
+            return { textDecoration: "underline" };
+        case "ghostOutline":
+            return {
+                backgroundColor: "hsl(var(--sdk-accent, 240 4.8% 95.9%))",
+                color: "hsl(var(--sdk-foreground, 240 10% 3.9%))",
+            };
+        default:
+            return {};
+    }
+};
+// Focus styles
+const getFocusStyles = (variant) => {
+    const baseStyles = {
+        outline: "1px solid hsl(var(--sdk-ring, 240 10% 3.9%))",
+        outlineOffset: "1px",
+    };
+    // Preserve variant colors on focus
+    switch (variant) {
+        case "outline":
+            return Object.assign(Object.assign({}, baseStyles), { backgroundColor: "hsl(var(--sdk-secondary, 240 3.7% 15.9%))", color: "hsl(var(--sdk-secondary-foreground, 0 0% 98%))" });
+        default:
+            return baseStyles;
+    }
+};
+const Button = React.forwardRef((_a, ref) => {
+    var { variant = "default", size = "default", asChild = false, style, onMouseEnter, onMouseLeave, onFocus, onBlur, onClick } = _a, props = __rest(_a, ["variant", "size", "asChild", "style", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onClick"]);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const buttonStyle = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, baseButtonStyles), variantStyles[variant]), sizeStyles[size]), (isHovered ? getHoverStyles(variant) : {})), (isFocused ? getFocusStyles(variant) : {})), style);
+    // Handle disabled state
+    if (props.disabled) {
+        buttonStyle.pointerEvents = "none";
+        buttonStyle.opacity = 0.5;
+        buttonStyle.cursor = "not-allowed";
+    }
+    const handleMouseEnter = (e) => {
+        setIsHovered(true);
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+    };
+    const handleMouseLeave = (e) => {
+        setIsHovered(false);
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+    };
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    };
+    const handleClick = (e) => {
+        // Auto-blur after click to prevent stuck focus state
+        setTimeout(() => {
+            if (e.currentTarget) {
+                e.currentTarget.blur();
+            }
+        }, 150);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    if (asChild) {
+        console.warn("asChild prop is not supported in the inline CSS version of Button.");
+    }
+    return (React.createElement("button", Object.assign({ style: buttonStyle, ref: ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick }, props)));
+});
+Button.displayName = "Button";
+export { Button };

package/dist/components/ui/card.js

@@ -0,0 +1,77 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+// Card component styles
+const cardStyles = {
+    borderRadius: "12px",
+    border: "1px solid #e2e8f0",
+    backgroundColor: "#ffffff",
+    color: "#0f172a",
+    boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+};
+const cardHeaderStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    padding: "24px",
+};
+const cardTitleStyles = {
+    fontWeight: "500",
+    lineHeight: "1",
+    fontSize: "18px",
+};
+const cardDescriptionStyles = {
+    fontSize: "14px",
+    color: "#64748b",
+    lineHeight: "1.4",
+};
+const cardContentStyles = {
+    padding: "24px",
+    paddingTop: "0",
+};
+const cardFooterStyles = {
+    display: "flex",
+    alignItems: "center",
+    padding: "24px",
+    paddingTop: "0",
+};
+const Card = React.forwardRef((_a, ref) => {
+    var { style } = _a, props = __rest(_a, ["style"]);
+    return (React.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, cardStyles), style) }, props)));
+});
+Card.displayName = "Card";
+const CardHeader = React.forwardRef((_a, ref) => {
+    var { style } = _a, props = __rest(_a, ["style"]);
+    return (React.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, cardHeaderStyles), style) }, props)));
+});
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef((_a, ref) => {
+    var { style } = _a, props = __rest(_a, ["style"]);
+    return (React.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, cardTitleStyles), style) }, props)));
+});
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef((_a, ref) => {
+    var { style } = _a, props = __rest(_a, ["style"]);
+    return (React.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, cardDescriptionStyles), style) }, props)));
+});
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef((_a, ref) => {
+    var { style } = _a, props = __rest(_a, ["style"]);
+    return (React.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, cardContentStyles), style) }, props)));
+});
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef((_a, ref) => {
+    var { style } = _a, props = __rest(_a, ["style"]);
+    return (React.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, cardFooterStyles), style) }, props)));
+});
+CardFooter.displayName = "CardFooter";
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/components/ui/textarea.js

@@ -0,0 +1,68 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+// Base textarea styles
+const baseTextareaStyles = {
+    display: "flex",
+    minHeight: "60px",
+    width: "100%",
+    borderRadius: "6px",
+    border: "1px solid #e2e8f0",
+    backgroundColor: "transparent",
+    paddingLeft: "12px",
+    paddingRight: "12px",
+    paddingTop: "8px",
+    paddingBottom: "8px",
+    fontSize: "14px",
+    boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    outline: "none",
+    fontFamily: "inherit",
+    resize: "vertical",
+    transition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
+};
+// Focus styles
+const focusStyles = {
+    borderColor: "#0f172a",
+    boxShadow: "0 0 0 1px #0f172a",
+};
+// Placeholder styles (applied via CSS custom properties)
+const placeholderColor = "#64748b";
+const Textarea = React.forwardRef((_a, ref) => {
+    var { style, onFocus, onBlur } = _a, props = __rest(_a, ["style", "onFocus", "onBlur"]);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const textareaStyle = Object.assign(Object.assign(Object.assign(Object.assign({}, baseTextareaStyles), (isFocused ? focusStyles : {})), style), { 
+        // Handle placeholder color via CSS custom property
+        // @ts-ignore - CSS custom properties are valid
+        "--placeholder-color": placeholderColor });
+    // Handle disabled state
+    if (props.disabled) {
+        textareaStyle.cursor = "not-allowed";
+        textareaStyle.opacity = 0.5;
+    }
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, `
+            .textarea-with-placeholder::placeholder {
+              color: var(--placeholder-color);
+            }
+          `),
+        React.createElement("textarea", Object.assign({ className: "textarea-with-placeholder", style: textareaStyle, ref: ref, onFocus: handleFocus, onBlur: handleBlur }, props))));
+});
+Textarea.displayName = "Textarea";
+export { Textarea };

package/dist/index.d.ts

@@ -13,6 +13,24 @@ export declare interface BaseSettings {
     [key: string]: any;
 }
 
+export declare const ChatBar: ({ placeholder, onSubmit, hasPendingEnv, playgroundUid, isSubmitting, typingTexts, shouldFocusOnMount, showModelSelector, projectUid, theme, height, }: ChatBarProps) => default_2.JSX.Element;
+
+export declare interface ChatBarProps {
+    placeholder?: string;
+    onSubmit?: (e: default_2.FormEvent) => void;
+    height: string;
+    hasPendingEnv?: boolean;
+    playgroundUid?: string;
+    hasTypingAnimation?: boolean;
+    onCancel?: () => void;
+    isSubmitting?: boolean;
+    typingTexts?: string[];
+    shouldFocusOnMount?: boolean;
+    showModelSelector?: boolean;
+    projectUid?: string | null | undefined;
+    theme?: ThemeName;
+}
+
 export declare const ChatButton: default_2.FC<ChatButtonProps>;
 
 declare interface ChatButtonProps {
@@ -20,6 +38,10 @@ declare interface ChatButtonProps {
     onClick?: () => void;
 }
 
+export declare const DEFAULT_THEME: ThemeName;
+
+export declare const getTheme: (themeName?: ThemeName) => ThemeColors;
+
 export declare const ModalSearchAndChat: default_2.FC<ModalSearchAndChatProps>;
 
 declare interface ModalSearchAndChatProps {
@@ -47,4 +69,35 @@ export declare interface SDKSettings {
     aiChatSettings?: AiChatSettings;
 }
 
+export declare interface ThemeColors {
+    primary: string;
+    shadow: {
+        light: string;
+        dark: string;
+    };
+    gradient: string;
+    placeholderText: {
+        light: string;
+        dark: string;
+    };
+    tabHint: {
+        text: {
+            light: string;
+            dark: string;
+        };
+        bg: {
+            light: string;
+            dark: string;
+        };
+        border: {
+            light: string;
+            dark: string;
+        };
+    };
+}
+
+export declare type ThemeName = "ocean" | "autumn" | "mint" | "sunset" | "lavender" | "forest" | "coral";
+
+export declare const themes: Record<ThemeName, ThemeColors>;
+
 export { }