tybotflow-widget 0.0.3

package/README.md

@@ -0,0 +1,42 @@
+# TybotFlow Widget SDK
+
+A modern, customizable React widget for Tybot chat integration.
+
+## Installation
+
+```bash
+npm install tybot-widget
+```
+
+## Usage
+
+in react
+
+```tsx
+import { createTybotWidget } from "tybot-widget";
+
+useEffect(() => {
+  createTybotWidget({
+    bot: { botId: "your-bot-id", name: "My Bot" },
+    mainColor: "#FF0000",
+    // ...other config options
+  });
+}, []);
+```
+
+with script tag
+
+```html
+<script src="https://unpkg.com/tybotflow-widget/dist/index.umd.js"></script>
+<script>
+  TybotWidget.createTybotWidget({
+      bot: { botId: "your-bot-id", name: "My Bot" },
+      mainColor: "#FF0000",
+      // ...other config options
+  });
+</script>
+```
+
+## Props
+
+See `dist/index.d.ts` for all available configuration options.

package/dist/index.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Mounts the Tybot Widget to the DOM.
+ * @param config - Configuration options for the widget.
+ * @example
+ * ```html
+ * <script>
+ *   TybotWidget.createTybotWidget(
+ *     {
+ *       bot: { botId: '123', name: 'Support Bot' }
+ *     }
+ *   );
+ * </script>
+ * ```
+ */
+export declare function createTybotWidget(
+  config: TybotWidgetConfig
+): void;
+
+/**
+ * Information about a bot instance.
+ * @category Types
+ */
+declare interface IBot {
+    /** Bot's numeric ID (optional). */
+    id?: number;
+    /** Unique bot identifier string. */
+    botId: string;
+    /** Display name of the bot. */
+    name: any;
+    /** Optional description of the bot. */
+    description?: string | null;
+    /** Whether the bot is active (camelCase). */
+    isActive?: boolean;
+    /** URL to the bot's avatar image. */
+    avatar_url?: string;
+    /** Whether the bot is active (snake_case, API compatibility). */
+    is_active?: boolean;
+    /** Whether the bot is deleted. */
+    is_deleted?: boolean;
+    /** Domain ID the bot belongs to. */
+    domainId?: number;
+    /** Allow additional arbitrary properties. */
+    [key: string]: any;
+}
+
+/**
+ * Configuration for the Tybot Widget instance.
+ * @category Props
+ */
+declare interface TybotWidgetConfig {
+    /** Current user object or ID. */
+    user?: any;
+    /** Authentication token for API calls. */
+    token?: string | null;
+    /** Title displayed in the widget header. */
+    title?: string;
+    /** URL or path to the widget icon. */
+    icon?: string;
+    /** Background color for the icon container (in hex #RRGGBB). */
+    iconBackgroundColor?: string;
+    /** Border radius for the icon container (all css units for <radius> (px, rem, etc.)). */
+    iconRoundness?: string;
+    /** Primary theme color (in hex #RRGGBB). */
+    mainColor?: string;
+    /** Secondary theme color (in hex #RRGGBB). */
+    secondaryColor?: string;
+    /** Tertiary theme color (in hex #RRGGBB). */
+    thirdColor?: string;
+    /** Background color for the input field (in hex #RRGGBB). */
+    inputBackgroundColor?: string;
+    /** Text color for the input field (in hex #RRGGBB). */
+    inputTextColor?: string;
+    /** Border radius for all the widget corners (all css units for <radius> (px, rem, etc.)). */
+    roundness?: string;
+    /** Minimum width of the widget panel (in pixels). */
+    minPanelWidth?: number;
+    /** Maximum width of the widget panel (in pixels). */
+    maxPanelWidth?: number;
+    /** Border radius for chat bubbles (all css units for <radius> (px, rem, etc.)). */
+    chatRoundness?: string;
+    /** Maximum width of chat bubbles (in percent %). */
+    chatMaxWidth?: number;
+    /** Top-left border radius for the toggle button (all css units for <radius> (px, rem, etc.)). */
+    toggleBtnBorderTopLeftRadius?: string;
+    /** Top-right border radius for the toggle button (all css units for <radius> (px, em, etc.)). */
+    toggleBtnBorderTopRightRadius?: string;
+    /** Bottom-left border radius for the toggle button (all css units for <radius> (px, rem, etc.)). */
+    toggleBtnBorderBottomLeftRadius?: string;
+    /** Bottom-right border radius for the toggle button (all css units for <radius> (px, rem, etc.)). */
+    toggleBtnBorderBottomRightRadius?: string;
+    /** First gradient color for the header (in hex #RRGGBB). */
+    headerFirstColor?: string;
+    /** Second gradient color for the header (in hex #RRGGBB). */
+    headerSecondColor?: string;
+    /** Background color for the upload menu (in hex #RRGGBB). */
+    menuBackgroundColor?: string;
+    /** Text color for the menu items (in hex #RRGGBB). */
+    menuTextColor?: string;
+    /** Background color when hovering over a menu item (in hex #RRGGBB). */
+    menuHoverBackgroundColor?: string;
+    /** Text color for agent messages (in hex #RRGGBB). */
+    agentChatResponseColor?: string;
+    /** Background color for agent messages (in hex #RRGGBB). */
+    agentChatResponseBgColor?: string;
+    /** Text color for user messages (in hex #RRGGBB). */
+    userChatMessagesColor?: string;
+    /** User role identifier. */
+    role?: string | null;
+    /** Base API URL for widget requests. */
+    API_URL?: string;
+    /** Bot instance configuration. */
+    bot: IBot;
+}
+
+export { }