@sampleapp.ai/sdk 1.0.24 → 1.0.25

package/dist/components/ui/button.js

@@ -0,0 +1,141 @@
+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 button styles
+const baseButtonStyles = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5rem",
+    whiteSpace: "nowrap",
+    borderRadius: "6px",
+    fontSize: "14px",
+    fontWeight: "500",
+    transition: "colors 0.15s ease-in-out",
+    outline: "none",
+    border: "none",
+    cursor: "pointer",
+    fontFamily: "inherit",
+};
+// Variant styles
+const variantStyles = {
+    default: {
+        backgroundColor: "#0f172a",
+        color: "#f8fafc",
+        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    },
+    destructive: {
+        backgroundColor: "#dc2626",
+        color: "#fef2f2",
+        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    },
+    outline: {
+        border: "1px solid #e2e8f0",
+        backgroundColor: "transparent",
+        color: "#0f172a",
+        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    },
+    secondary: {
+        backgroundColor: "#f1f5f9",
+        color: "#0f172a",
+        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    },
+    ghost: {
+        backgroundColor: "transparent",
+        color: "#0f172a",
+    },
+    link: {
+        backgroundColor: "transparent",
+        color: "#0f172a",
+        textDecoration: "underline",
+        textUnderlineOffset: "4px",
+    },
+    ghostOutline: {
+        border: "1px solid #f1f5f9",
+        backgroundColor: "transparent",
+        color: "#64748b",
+        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",
+    },
+    lg: {
+        height: "40px",
+        paddingLeft: "32px",
+        paddingRight: "32px",
+    },
+    icon: {
+        height: "32px",
+        width: "32px",
+        padding: "0",
+    },
+};
+// Hover styles
+const getHoverStyles = (variant) => {
+    switch (variant) {
+        case "default":
+            return { backgroundColor: "#1e293b" };
+        case "destructive":
+            return { backgroundColor: "#b91c1c" };
+        case "outline":
+            return { backgroundColor: "#f1f5f9", color: "#0f172a" };
+        case "secondary":
+            return { backgroundColor: "#e2e8f0" };
+        case "ghost":
+            return { backgroundColor: "#f1f5f9", color: "#0f172a" };
+        case "link":
+            return {};
+        case "ghostOutline":
+            return { backgroundColor: "#f1f5f9", color: "#0f172a" };
+        default:
+            return {};
+    }
+};
+const Button = React.forwardRef((_a, ref) => {
+    var { variant = "default", size = "default", asChild = false, style, onMouseEnter, onMouseLeave } = _a, props = __rest(_a, ["variant", "size", "asChild", "style", "onMouseEnter", "onMouseLeave"]);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const buttonStyle = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, baseButtonStyles), variantStyles[variant]), sizeStyles[size]), (isHovered ? getHoverStyles(variant) : {})), style);
+    // Handle disabled state
+    if (props.disabled) {
+        buttonStyle.pointerEvents = "none";
+        buttonStyle.opacity = 0.5;
+    }
+    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);
+    };
+    // Note: asChild functionality removed for pure inline CSS approach
+    // If you need slot-like behavior, consider implementing it separately
+    if (asChild) {
+        console.warn("asChild prop is not supported in the inline CSS version of Button. Consider using a wrapper component instead.");
+    }
+    return (React.createElement("button", Object.assign({ style: buttonStyle, ref: ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, 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,27 @@ export declare interface BaseSettings {
     [key: string]: any;
 }
 
+export declare const ChatBar: ({ query, placeholder, setQuery, onSubmit, isStreaming, height, hasPendingEnv, playgroundUid, hasTypingAnimation, isSubmitting, onCancel, typingTexts, shouldFocusOnMount, showModelSelector, projectUid, theme, }: ChatBarProps) => default_2.JSX.Element;
+
+export declare interface ChatBarProps {
+    query: string;
+    placeholder?: string;
+    setQuery: (query: string) => void;
+    onSubmit: (e: default_2.FormEvent) => void;
+    isStreaming: boolean;
+    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 +41,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 +72,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 { }