lulichat 1.0.7 → 1.0.15

package/README.md

@@ -1,4 +1,4 @@
-# Lulichat Support Chat
+# LuliChat Support Chat
 
 Lulichat Support Chat is a React library that provides a chat interface for web applications. It includes a chat icon that opens a contact form for users to submit their contact information, and it establishes a socket connection for real-time chat functionality.
 
@@ -11,7 +11,7 @@ Lulichat Support Chat is a React library that provides a chat interface for web
 
 ## Installation
 
-To install the Lulichat Support Chat library, run the following command:
+To install the LuliChat Support Chat library, run the following command:
 
 ```bash
 npm install lulichat
@@ -22,14 +22,15 @@ npm install lulichat
 To use the Lulichat Support Chat in your application, import the components as follows:
 
 ```tsx
-import Lulichat from "lulichat";
+import LuliChat from "lulichat";
+import "lulichat/dist/style.css";
 ```
 
 ### Example
 
 ```tsx
 import React from "react";
-import Lulichat from "lulichat";
+import LuliChat from "lulichat";
 import "lulichat/dist/style.css";
 
 const App = () => {
@@ -52,13 +53,251 @@ const App = () => {
 export default App;
 ```
 
+## Script tag (no React)
+
+You have two ways to embed the widget:
+
+1. Externalized (smaller) build – you provide React, ReactDOM and socket.io-client (as globals) OR you are on a React page already.
+2. Standalone (larger) build – everything bundled, just one script tag.
+
+### 1. Externalized build (recommended if you already use React)
+
+Add React, ReactDOM and socket.io-client globals if they are not already present. If you are not using the standalone bundle, also add marked and DOMPurify (or rely on our graceful fallbacks):
+
+```html
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/socket.io-client@4/dist/socket.io.min.js"></script>
+<script src="https://unpkg.com/marked/marked.min.js"></script>
+<script src="https://unpkg.com/dompurify/dist/purify.min.js"></script>
+```
+
+Then include the library UMD bundle. You can pass configuration using `data-*` attributes, or initialize programmatically.
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/lulichat/dist/style.css" />
+<script
+  src="https://unpkg.com/lulichat/dist/lulichat-support.umd.js"
+  data-api-key="YOUR_API_KEY"
+  data-company-name="Your Company"
+  data-position="bottom-right"
+  data-primary-color="#4f46e5"
+  defer
+  onload="window.LuliChatSupport && window.LuliChatSupport.initFromScript()"
+></script>
+```
+
+Or programmatically:
+
+```html
+<script src="https://unpkg.com/lulichat/dist/lulichat-support.umd.js"></script>
+<script>
+  window.LuliChatSupport.mount({
+    apiKey: "YOUR_API_KEY",
+    baseUrl: "https://api.example.com",
+    position: "bottom-right",
+    primaryColor: "#4f46e5",
+  });
+  // Later
+  // window.LuliChatSupport.unmountAll();
+  // or window.LuliChatSupport.unmount(id)
+</script>
+```
+
+Notes:
+
+- When using programmatic mount, the stylesheet will be auto‑injected. If your CSS file isn’t next to the script, set a custom URL via `data-style-href` on the script tag.
+- If `marked` or `DOMPurify` are not present, the widget will still render. Markdown will fall back to plain text/HTML passthrough and a console warning is logged. For best security and formatting, include both scripts above or use the standalone bundle.
+
+### 2. Standalone build (no other scripts needed)
+
+If you prefer a zero‑dependency drop‑in (larger file size), use the standalone bundle produced as `lulichat-support-standalone.umd.js`:
+
+```html
+<script
+  src="https://unpkg.com/lulichat/dist/lulichat-support-standalone.umd.js"
+  data-api-key="YOUR_API_KEY"
+  data-company-name="Your Company"
+  data-position="bottom-right"
+  data-primary-color="#4f46e5"
+  defer
+  onload="window.LuliChatSupport && window.LuliChatSupport.initFromScript()"
+></script>
+```
+
+No React/socket.io-client tags required. Choose this for non‑React sites wanting the simplest integration. Trade‑off: bigger download (~300kB UMD vs ~61kB + peer scripts).
+
+### Isolated iframe mode (optional)
+
+If you want to isolate the widget’s DOM and CSS from your page, you can mount it inside a fixed-position iframe. Enable it from the script tag via `data-isolated="iframe"`:
+
+```html
+<script
+  src="https://unpkg.com/lulichat/dist/lulichat-support.umd.js"
+  data-api-key="YOUR_API_KEY"
+  data-isolated="iframe"
+  data-iframe-width="360px"
+  data-iframe-height="560px"
+  defer
+  onload="window.LuliChatSupport && window.LuliChatSupport.initFromScript()"
+></script>
+```
+
+Options you can set as `data-*` attributes for iframe mode:
+
+- `data-iframe-width` – width of the iframe (e.g. `360px`)
+- `data-iframe-height` – height of the iframe (e.g. `560px`)
+- `data-iframe-auto-resize` – when `true`, the iframe will resize to fit its content height
+- `data-iframe-min-height` / `data-iframe-max-height` – optional min/max height bounds for auto-resize
+
+You can also mount the iframe programmatically:
+
+```html
+<script>
+    const { mountIframe } = window.LuliChatSupport;
+    const { id, iframe, unmount } = mountIframe(
+      {
+        apiKey: "YOUR_API_KEY",
+        position: "bottom-right",
+        primaryColor: "#4f46e5",
+      },
+      {
+        width: "360px",
+        height: "auto", // optional; if omitted, set autoResize: true to fit content
+        autoResize: true,
+        minHeight: 300, // optional
+        maxHeight: 700, // optional
+      }
+    );
+    // later: unmount()
+    // or: window.LuliChatSupport.unmountIframe(id)
+    // or: window.LuliChatSupport.unmountAll()
+    // You can also set a custom stylesheet URL inside the iframe via styleHref:
+    // mountIframe(config, { styleHref: 'https://cdn.example.com/lulichat.css' })
+  }
+</script>
+```
+
+Notes:
+
+- Stylesheet injection is automatic for both normal and iframe modes. If your `style.css` is not next to the UMD script, set `data-style-href` on the script or pass `styleHref` to `mountIframe`.
+- In auto-resize mode, the iframe height tracks the content using `ResizeObserver` (with a polling fallback). Min/max heights are respected if provided.
+
+### Zero-JS iframe embedding (static frame)
+
+If you want to embed the chat without placing any script tags on the parent page (just an `<iframe>`), you can use the provided `frame.html` (or host a copy of it).
+
+Example:
+
+```html
+<iframe
+  src="/path/to/frame.html?apiKey=YOUR_API_KEY&baseUrl=https://api.example.com&position=bottom-right&primaryColor=%234f46e5"
+  width="380"
+  height="600"
+  style="border:0;background:transparent"
+  loading="lazy"
+></iframe>
+```
+
+Supported query parameters (same semantics as data-\*):
+
+| Param              | Description                                                |
+| ------------------ | ---------------------------------------------------------- | ----------- | --------- | -------- |
+| apiKey             | Required API key                                           |
+| baseUrl            | API base override                                          |
+| position           | bottom-right                                               | bottom-left | top-right | top-left |
+| primaryColor       | Hex/CSS color                                              |
+| companyName        | Display name                                               |
+| welcomeMessage     | Initial auto-response message                              |
+| requireContactInfo | `true` or `false`                                          |
+| allowAnonymous     | `true` or `false`                                          |
+| configUrl          | URL returning JSON config to merge (query params override) |
+
+Config JSON shape (example returned by `configUrl`):
+
+```json
+{
+  "apiKey": "YOUR_API_KEY",
+  "companyName": "My Company",
+  "welcomeMessage": "Hello! How can we help?",
+  "primaryColor": "#4f46e5",
+  "requireContactInfo": true,
+  "allowAnonymous": false
+}
+```
+
+Precedence: query parameters override fields returned by `configUrl`.
+
+To host your own: copy `frame.html` and ensure the path to the standalone bundle script is correct (or swap to externalized bundle + peer scripts). The frame loads, then waits for `window.LuliChatSupport` and mounts internally; styles are auto-injected.
+
+## Hosted widget (production)
+
+We recommend hosting a small, versioned bundle set under:
+
+https://app.lulichat.com/widget/<version>/
+
+Each version folder contains:
+
+- `lulichat-widget.js` – loader clients include in their pages
+- `lulichat-widget.html` – the frame loaded by the loader
+- `dist/style.css` – stylesheet
+- `lulichat-widget-standalone.umd.js` – the standalone bundle (copied/renamed from the build)
+
+There is also a convenience alias:
+
+https://app.lulichat.com/widget/latest/
+
+Use `latest` if you want automatic upgrades; pin a specific `<version>` for stability.
+
+### Client usage (loader)
+
+```html
+<script
+  src="https://app.lulichat.com/widget/latest/lulichat-widget.js"
+  data-api-key="YOUR_API_KEY"
+  data-base-url="https://api.lulichat.com"
+  data-position="bottom-right"
+  data-primary-color="#4f46e5"
+  defer
+></script>
+```
+
+The loader computes its base URL from its own `src` and injects an iframe pointing to `.../lulichat-widget.html` with your `data-*` passed as query params. It also auto-resizes the iframe based on messages from the frame.
+
+#
+
+### Passing options via data attributes
+
+Supported attributes (all optional except api-key):
+
+| Attribute          | Purpose                                                 |
+| ------------------ | ------------------------------------------------------- |
+| data-api-key       | Your public API key for auth/identification             |
+| data-company-name  | Display name in header                                  |
+| data-position      | one of: bottom-right, bottom-left, top-right, top-left  |
+| data-primary-color | Hex or CSS color used as primary accent                 |
+| data-container     | CSS selector for a custom mount node (defaults to body) |
+| data-style-href    | Optional absolute URL to the CSS file if not colocated  |
+
+Programmatic mount accepts the same properties plus `baseUrl` and feature flags like `allowAnonymous`.
+
+```
+
 ## API
 
-### Components
+### Global Embed API
+
+`window.LuliChatSupport.mount(options)` – mounts the widget, returns an id.
+
+`window.LuliChatSupport.unmount(id)` – unmounts a specific instance.
 
-- **ChatIcon**: Renders a chat icon that opens the contact form.
-- **ContactForm**: Displays a form for users to input their contact details.
-- **SupportChat**: Manages the chat interface and socket connection.
+`window.LuliChatSupport.unmountAll()` – removes all mounted instances.
+
+`window.LuliChatSupport.initFromScript()` – reads the current script tag's `data-*` attributes and auto‑mounts.
+
+### React Usage
+
+Import the default export `LuliChat` for React integration; styling is in `dist/style.css`.
 
 ## Contributing
 
@@ -67,3 +306,4 @@ Contributions are welcome! Please open an issue or submit a pull request for any
 ## License
 
 This project is licensed under the MIT License. See the LICENSE file for more details.
+```

package/dist/components/Animation.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { Height } from "react-animate-height";
+interface TypewriterProps {
+    text: string;
+    speed?: number;
+    onComplete?: () => void;
+    className?: string;
+}
+export declare function Typewriter(props: TypewriterProps): React.JSX.Element;
+export declare function ThinkingDots(): React.JSX.Element;
+export declare function AnimateHeightCustom(props: React.HTMLProps<HTMLDivElement> & {
+    height?: Height;
+    end?: VoidFunction;
+}): React.JSX.Element;
+export {};

package/dist/components/ChatWidget.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { LuliChatConfig } from "../types";
+interface ChatWidgetProps {
+    config: LuliChatConfig;
+}
+export declare const ChatWidget: React.FC<ChatWidgetProps>;
+export {};

package/dist/components/chatroom/ChatBody.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function ChatBody(): React.JSX.Element;
+export default ChatBody;

package/dist/components/chatroom/ChatFooter.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function ChatFooter(): React.JSX.Element;
+export default ChatFooter;

package/dist/components/chatroom/ChatHeader.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const ChatHeader: () => React.JSX.Element;
+export default ChatHeader;

package/dist/components/chatroom/ChatInterface.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ChatInterface: React.FC<{}>;

package/dist/components/chatroom/ChatRating.d.ts

@@ -0,0 +1,7 @@
+import { TicketTracking } from "@/types";
+import React from "react";
+export type RatingRef = {
+    open: (tracking: TicketTracking, callback?: (tracking: TicketTracking) => void) => void;
+};
+declare const ChatRating: React.ForwardRefExoticComponent<React.RefAttributes<RatingRef>>;
+export default ChatRating;

package/dist/components/chatroom/CompanyQueues.d.ts

@@ -0,0 +1,13 @@
+import { Queue, QueueOption } from "@/types";
+import React from "react";
+export interface Tag extends Queue, QueueOption {
+    type: "queue" | "option";
+}
+interface Props {
+    message?: string;
+}
+export interface QueueRefObject {
+    getTags: () => Tag[];
+}
+declare const CompanyQueues: React.ForwardRefExoticComponent<Props & React.RefAttributes<QueueRefObject>>;
+export default CompanyQueues;

package/dist/components/chatroom/Message.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: React.MemoExoticComponent<(props: {
+    adjust: boolean;
+    animate: boolean;
+    index: number;
+}) => React.JSX.Element>;
+export default _default;

package/dist/components/chatroom/StartChat.d.ts

@@ -0,0 +1,17 @@
+import { ContactInfo } from "@/types";
+import React from "react";
+interface StartChatProps {
+}
+export interface StartChatRefObject {
+    getValues: () => ContactInfo;
+    startChat: (payload: Payload) => void;
+}
+export interface Payload {
+    message: string;
+    files?: FileList | null;
+    queueId?: number;
+    queueOptionId?: number;
+    dataJson?: Record<string, any>;
+}
+export declare const StartChat: React.ForwardRefExoticComponent<StartChatProps & React.RefAttributes<StartChatRefObject>>;
+export {};

package/dist/components/faq/FAQBody.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const FAQBody: () => React.JSX.Element;
+export default FAQBody;

package/dist/components/faq/FAQCategories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { LuliChatAPI } from "@/utils/api";
+declare const FAQCategories: React.MemoExoticComponent<(props: {
+    resource: ReturnType<LuliChatAPI["helpCategoriesResource"]>;
+    setCategory: (category: string) => void;
+}) => React.JSX.Element>;
+export default FAQCategories;

package/dist/components/faq/FAQInterface.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const FAQInterface: (props: {
+    active: boolean;
+}) => React.JSX.Element;
+export default FAQInterface;

package/dist/components/faq/FAQList.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { LuliChatAPI } from "@/utils/api";
+declare const FAQList: React.MemoExoticComponent<(props: {
+    resource: ReturnType<LuliChatAPI["faqResource"]>;
+    search: string;
+    category: string;
+}) => React.JSX.Element>;
+export default FAQList;

package/dist/components/faq/FAQViewer.d.ts

@@ -0,0 +1,7 @@
+import { Help } from "@/types";
+import React from "react";
+export interface FAQViewerRefObject {
+    view: React.Dispatch<React.SetStateAction<Help | undefined>>;
+}
+declare const FAQViewer: React.ForwardRefExoticComponent<React.RefAttributes<FAQViewerRefObject>>;
+export default FAQViewer;

package/dist/components/history/HistoryInterface.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const HistoryInterface: (props: {
+    active: boolean;
+}) => React.JSX.Element;
+export default HistoryInterface;

package/dist/components/history/Rate.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function Rate(): React.JSX.Element;
+export default Rate;

package/dist/components/history/TicketList.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { LuliChatAPI } from "@/utils/api";
+declare const TicketTrackingList: React.MemoExoticComponent<(props: {
+    resource: ReturnType<LuliChatAPI["historyResource"]>;
+}) => React.JSX.Element>;
+export default TicketTrackingList;

package/dist/components/ui/AutoResizeTextArea.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type Props = {
+    value?: string;
+    onChange?: (v: string) => void;
+    placeholder?: string;
+    className?: string;
+    maxHeight?: number;
+} & Omit<React.HTMLProps<HTMLTextAreaElement>, "onChange">;
+export default function AutoResizingTextarea(props: Props): React.JSX.Element;
+export {};

package/dist/components/ui/Button.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    size?: "md" | "sm" | "lg" | "icon";
+    shape?: "circle" | "rounded" | "none";
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/components/ui/Form.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+interface FormProps<T> extends React.FormHTMLAttributes<HTMLFormElement> {
+    onValuesChange?: (values: T) => void;
+    initialValues?: T;
+    onFinish?: (values: T) => void;
+}
+export interface FormRefObject<T> {
+    getValues(): T;
+    getFieldValue: <K extends keyof T>(fieldName: K) => T[K];
+    elementRef: () => HTMLFormElement | null;
+    setFieldValue: <K extends keyof T>(fieldName: K, value: T[K]) => void;
+}
+type FormComponent = React.ForwardRefExoticComponent<FormProps<Record<string, any>> & React.RefAttributes<FormRefObject<Record<string, any>>>> & {
+    Item: typeof FormItem;
+    Label: typeof FormLabel;
+    useForm: typeof useForm;
+};
+declare const Form: FormComponent;
+interface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    name?: string;
+    children?: React.ReactNode;
+    label?: string;
+    required?: boolean;
+    error?: string;
+}
+declare const FormItem: React.ForwardRefExoticComponent<FormItemProps & React.RefAttributes<HTMLDivElement>>;
+interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+    htmlFor?: string;
+}
+declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;
+declare const useForm: <T>(initialValues: T) => FormRefObject<T>[];
+export default Form;

package/dist/components/ui/Icons.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import type { SVGProps } from "react";
+export declare function ReplyFill(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function Star(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function StarFilled(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function SystemIcon(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function MaterialSymbolsHistoryRounded(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function WpfFaq(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function MaterialSymbolsChatRounded(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare const ThumbsUp: React.FC<React.SVGProps<any>>;
+export declare const ThumbsDown: React.FC<React.SVGProps<any>>;
+export declare const Search: React.FC<React.SVGProps<any>>;
+export declare const Bot: React.FC<React.SVGProps<any>>;
+export declare const ArrowInOut: React.FC<React.SVGProps<any>>;
+export declare const Uploading: React.FC<React.SVGProps<any>>;
+export declare const DropdownArrow: React.FC<React.SVGProps<any>>;
+export declare const Attachment: React.FC<React.SVGProps<any>>;
+export declare const Close: React.FC<React.SVGProps<any>>;
+export declare const Hello: React.FC<React.SVGProps<any>>;
+export declare const Headphones: React.FC<React.SVGProps<any>>;
+export declare const User: React.FC<React.SVGProps<any>>;
+export declare const Plus: React.FC<React.SVGProps<any>>;
+export declare const Send: React.FC<React.SVGProps<any>>;
+export declare const Loader: React.FC<React.SVGProps<any>>;
+export declare const MessageCircle: React.FC<React.SVGProps<any>>;

package/dist/components/ui/Input.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+type InputComponent = React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>> & {
+    Password: typeof Password;
+};
+declare const Input: InputComponent;
+declare const Password: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/components/ui/Tab.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const TabItem: (props: React.HTMLProps<HTMLButtonElement> & {
+    value: string;
+    activeTab: string;
+    icon: React.ReactNode;
+}) => React.JSX.Element;

package/dist/constants.d.ts

@@ -0,0 +1,33 @@
+export declare const Colors: {
+    readonly primary: "#0E0E2C";
+    readonly secondary: "#755AE2";
+    readonly dark: "#0D0D0D";
+    readonly mood2: "#131313";
+    readonly dark2: "#8770E6";
+    readonly light_Dark: "#D3D3F1";
+    readonly secondary_dark: "#9278FA";
+    readonly helper: "#F5F3FF";
+    readonly cod: "#E4E4E4";
+    readonly yellow_500: "#BF6700";
+    readonly darkgreen: "#099976";
+    readonly light_gray: "#F8F9FB";
+    readonly orange: "#FF6B00";
+    readonly text: "#242424";
+    readonly BodyText: "#4A4A68";
+    readonly BodyTextAlpha: "#56566A";
+    readonly BodyTextLight: "#8C8CA1";
+    readonly green: "#12B669";
+    readonly blue: "#24214E";
+    readonly white: "#fff";
+    readonly gray: "#F5F7F9";
+    readonly sand: "#818181";
+    readonly icon: "#4E4E4E";
+    readonly tag: "#F3F4F6";
+    readonly outline: "#F1F8FF";
+    readonly modal: "#F9FAFB";
+    readonly border: "#E9E9E9";
+    readonly flat: "#F6F6F6";
+    readonly pale: "#EAEDF0;";
+    readonly grey: "#F8F8F8";
+};
+export declare const gId = "luli-g-id";

package/dist/hooks/useContext.d.ts

@@ -0,0 +1,14 @@
+import { RatingRef } from "@/components/chatroom/ChatRating";
+import { StartChatRefObject } from "@/components/chatroom/StartChat";
+import { FAQViewerRefObject } from "@/components/faq/FAQViewer";
+import { LuliChatAPI } from "@/utils/api";
+import React from "react";
+interface AppContextInterface {
+    api: React.RefObject<LuliChatAPI>;
+    FAQViewerRef: React.RefObject<FAQViewerRefObject>;
+    startChatRef: React.RefObject<StartChatRefObject>;
+    ratingRef: React.RefObject<RatingRef>;
+}
+export declare const AppContext: React.Context<AppContextInterface>;
+export declare const useAppContext: () => AppContextInterface;
+export {};

package/dist/hooks/useSocket.d.ts

@@ -0,0 +1,4 @@
+declare const useSocket: (url: string) => {
+    sendMessage: (message: string) => void;
+};
+export default useSocket;

package/dist/hooks/useStore.d.ts

@@ -0,0 +1,50 @@
+import { ChatSocket } from "@/lib/socket";
+import { ChatSession, Company, Contact, Ticket } from "@/types";
+import { ChatMessage } from "@/types/index";
+import { LuliChatConfig } from "@/types";
+import { Tag } from "@/components/chatroom/CompanyQueues";
+type ConnectionStatus = "disconnected" | "connected" | "error";
+type AppStoreState = {
+    open: boolean;
+    messages: ChatMessage[];
+    addMessage: (m: ChatMessage) => void;
+    set: (state: AppStoreState | Partial<AppStoreState> | ((state: AppStoreState) => AppStoreState)) => unknown;
+    session?: ChatSession;
+    company?: Company;
+    setMessages: (messages: ChatMessage[]) => void;
+    config: LuliChatConfig | null;
+    allowAnonymous: boolean;
+    tags: Tag[];
+    options: Tag[];
+    guestId: string;
+    contact?: Contact;
+    updateSession: (changes: {
+        ticket: Ticket;
+        contact: Contact;
+        token?: string;
+    }) => unknown;
+};
+export declare const useAppStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<AppStoreState>, "setState" | "persist"> & {
+    setState(partial: AppStoreState | Partial<AppStoreState> | ((state: AppStoreState) => AppStoreState | Partial<AppStoreState>), replace?: false | undefined): unknown;
+    setState(state: AppStoreState | ((state: AppStoreState) => AppStoreState), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<AppStoreState, AppStoreState, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: AppStoreState) => void) => () => void;
+        onFinishHydration: (fn: (state: AppStoreState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<AppStoreState, AppStoreState, unknown>>;
+    };
+}>;
+export declare function useAppStoreShallow<T extends (keyof AppStoreState)[]>(fields: [...T]): Pick<AppStoreState, T[number]>;
+type SocketState = {
+    socket: ChatSocket | null;
+    setSocket: (socket: ChatSocket) => void;
+    connected: boolean;
+    connectionStatus: ConnectionStatus;
+    setStatus: (c: ConnectionStatus) => void;
+};
+export declare const useSocketStore: import("zustand").UseBoundStore<import("zustand").StoreApi<SocketState>>;
+export declare function useSocketStoreShallow<T extends (keyof SocketState)[]>(fields: [...T]): Pick<SocketState, T[number]>;
+export {};