ss-support-widget 1.0.9 → 1.0.10

package/src/containers/App.tsx

@@ -0,0 +1,187 @@
+// App.tsx
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { streamChat } from "../api/sse";
+import ReactMarkdown from "react-markdown";
+import { getConversationId, writeConversation } from "../storage/session-storage";
+import ChatWidget from "../components/ChatWidget";
+import { useSignalR } from "../hooks/useSignalR";
+import { UUID } from "bson";
+import { chatBasePath } from "../constants";
+import { Config, ConversationStatus, Msg, MsgDelta } from "../types";
+import { getConversationStatus, getHistoryMessages } from "../api/service";
+
+export default function App({ config }: { config: Config }) {
+  const { connected, error, start, stop, on, off, invoke } = useSignalR({
+    // accessToken: config.sessionToken,
+    url: config.apiBaseUrl + `/ws?sessionId=${getConversationId()}`
+      + `&clientId=${config.clientId}`,
+    autoStart: false
+  });
+  const [open, setOpen] = useState(false);
+  const [input, setInput] = useState("");
+  const [conversationId, setConversationId] = useState<string | null>(getConversationId());
+  const [conversationStatus, setConversationStatus] = useState<ConversationStatus | null>()
+  const [msgs, setMsgs] = useState<Msg[]>([]);
+  const [sending, setSending] = useState(false);
+  const [hideChat, setHideChat] = useState(false);
+
+  const anchorSx = useMemo(
+    () => ({
+      position: "fixed",
+      right: 16,
+      bottom: 16,
+      zIndex: 2147483647,
+      fontFamily: "system-ui",
+    }),
+    []
+  );
+
+  useEffect(() => {
+    const path = window.location.pathname;
+    if (config.hideChatForUrls?.some(u => path.startsWith(u))) {
+      setHideChat(true);
+    } else {
+      setHideChat(false);
+    }
+  });
+
+  useEffect(() => {
+    if (open && msgs.length == 0) {
+      getHistoryMessages(config, getConversationId() || config.conversationId || "",
+        (delta) => {
+          const msgs = delta.map((m: MsgDelta) => ({ id: m.id, role: m.role, text: m.text, sentAt: formatDateLabel(m.sentAt), seen: m.seen }));
+          setMsgs((prev) => [...msgs]);
+        });
+    }
+
+    if (open && conversationId) {
+      const fetchData = async () => {
+        const result = await getConversationStatus(config, conversationId);
+        setConversationStatus(result);
+      }
+      fetchData();
+    }
+
+
+  }, [open]);
+
+  function upsertAssistantDelta(delta: MsgDelta) {
+    setMsgs((prev) => {
+      const last = prev[prev.length - 1];
+      if (!last || last.role !== "Assistant" || last.id !== delta.id) {
+        return [...prev, { id: delta.id, role: delta.role, text: delta.text, sentAt: formatDateLabel(delta.sentAt), seen: delta.seen }];
+      }
+      const updated = prev.slice();
+      updated[updated.length - 1] = { ...last, text: last.text + delta.text };
+      return updated;
+    });
+  }
+
+  async function send() {
+    const text = input.trim();
+    if (!text || sending) return;
+
+    setSending(true);
+    setInput("");
+    const newMsg = { id: new UUID().toString(), role: "User", text, seen: false, sentAt: formatDateLabel(new Date().toISOString()) }
+    setMsgs((m) => [...m, newMsg]);
+
+    ///add an if here to check if should talk to llm or human agent
+
+    try {
+      await streamChat({
+        url: config.apiBaseUrl + chatBasePath + "/" + config.clientId + '/send-message/',
+        // url: config.apiBaseUrl + "api/message-operator",
+        token: config.sessionToken,
+        clientId: config.clientId,
+        conversationId: conversationId,
+        messageId: newMsg.id,
+        body: text,
+        onDelta: (delta) => {
+          upsertAssistantDelta(delta)
+          setConversationId(delta.conversationId);
+          writeConversation(delta.conversationId);
+        }
+      });
+    } catch {
+      setMsgs((m) => [...m, { id: crypto.randomUUID(), role: "Assistant", text: "Eroare la trimitere.", seen: false }]);
+    } finally {
+      setSending(false);
+    }
+  }
+
+
+  const messageRecieveHandler = useCallback((conversationId: string, message: any) => {
+    upsertAssistantDelta({ id: message.messageId, role: "Assistant", text: message.text, conversationId: conversationId, sentAt: new Date().toISOString(), seen: message.seen });
+  }, []);
+
+  const updateSeenAtHandler = useCallback((messageId: string) => {
+    setMsgs((prev) => prev.map(m => m.id === messageId ? { ...m, seen: true } : m));
+  }, []);
+
+  const conversationModeChangedHandler = useCallback((message: ConversationStatus) => {
+      setConversationStatus(message);
+      console.log(message)
+  }, []);
+
+
+  useEffect(() => {
+    if (conversationId == ""
+      || conversationId == null
+    ) return
+
+    start();
+  }, [conversationId]);
+
+  useEffect(() => {
+    on("ReceivedOperatorMessage", messageRecieveHandler);
+    on("ReceivedSeenAtByOperator", updateSeenAtHandler);
+    on("RecievedConversationModeChanged", conversationModeChangedHandler);
+
+    return () => {
+      off("ReceivedOperatorMessage", messageRecieveHandler);
+      off("ReceivedSeenAtByOperator", updateSeenAtHandler)
+      off("RecievedConversationModeChanged", conversationModeChangedHandler);
+    };
+  }, [on, connected, off]);
+
+
+  const getConversationMode = useCallback((conversationStatus?: ConversationStatus | null): ConversationMode => {
+    if (!conversationId)
+      return "New"
+
+    if (!connected) {
+      return "Disconnected"
+    }
+
+    if (conversationStatus?.mode == "Bot")
+      return "AI"
+
+    if (conversationStatus?.mode == "Human")
+      return "Human"
+
+    return "AI"
+  }, [conversationId, connected])
+
+  return (
+    hideChat
+      ? <></>
+      : <ChatWidget
+        anchorSx={anchorSx}
+        open={open}
+        setOpen={setOpen}
+        msgs={msgs}
+        input={input}
+        setInput={setInput}
+        send={send}
+        sending={sending}
+        conversationMode={getConversationMode(conversationStatus)} />
+  );
+}
+
+export type ConversationMode = "New" | "AI" | "Human" | "Disconnected" | "Ended"
+
+function formatDateLabel(dateString: string | undefined): string {
+  if (!dateString) return "";
+  return new Date(dateString).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}

package/src/{hooks.ts → hooks/hooks.ts}

@@ -1,32 +1,32 @@
-import { useEffect } from "react";
-
-export function ensureViewportMeta() {
-  if (typeof document === "undefined") return;
-
-  const existing = document.querySelector('meta[name="viewport"]');
-  if (existing) return;
-
-  const meta = document.createElement("meta");
-  meta.name = "viewport";
-  meta.content = "width=device-width, initial-scale=1";
-  document.head.appendChild(meta);
-}
-
-export function useViewportHeightVar() {
-  useEffect(() => {
-    const setVh = () => {
-      const vh = window.innerHeight * 0.01;
-      document.documentElement.style.setProperty("--vh", `${vh}px`);
-    };
-
-    setVh();
-
-    window.addEventListener("resize", setVh);
-    window.addEventListener("orientationchange", setVh);
-
-    return () => {
-      window.removeEventListener("resize", setVh);
-      window.removeEventListener("orientationchange", setVh);
-    };
-  }, []);
+import { useEffect, useRef, useState, useCallback } from "react";
+
+export function ensureViewportMeta() {
+  if (typeof document === "undefined") return;
+
+  const existing = document.querySelector('meta[name="viewport"]');
+  if (existing) return;
+
+  const meta = document.createElement("meta");
+  meta.name = "viewport";
+  meta.content = "width=device-width, initial-scale=1";
+  document.head.appendChild(meta);
+}
+
+export function useViewportHeightVar() {
+  useEffect(() => {
+    const setVh = () => {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty("--vh", `${vh}px`);
+    };
+
+    setVh();
+
+    window.addEventListener("resize", setVh);
+    window.addEventListener("orientationchange", setVh);
+
+    return () => {
+      window.removeEventListener("resize", setVh);
+      window.removeEventListener("orientationchange", setVh);
+    };
+  }, []);
 }

package/src/hooks/useSignalR.ts

@@ -0,0 +1,222 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import * as signalR from "@microsoft/signalr";
+import { getSessionAccessToken } from "../authentification/token";
+
+type SignalRStatus =
+  | "disconnected"
+  | "connecting"
+  | "connected"
+  | "reconnecting";
+
+type UseSignalROptions = {
+  url: string;
+  accessToken?: string;
+  autoStart?: boolean;
+};
+
+type Handler<T = any> = (payload: T, ...args: any[]) => void;
+
+export function useSignalR({ url, accessToken, autoStart = true }: UseSignalROptions) {
+  const connectionRef = useRef<signalR.HubConnection | null>(null);
+  const handlersRef = useRef<Map<string, Set<Handler>>>(new Map());
+
+  const retryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const retryAttemptRef = useRef<number>(0);
+  const stopRequestedRef = useRef<boolean>(false);
+
+  const [status, setStatus] = useState<SignalRStatus>("disconnected");
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearRetry = useCallback(() => {
+    if (retryTimeoutRef.current) {
+      clearTimeout(retryTimeoutRef.current);
+      retryTimeoutRef.current = null;
+    }
+  }, []);
+
+  const scheduleRetry = useCallback(() => {
+    if (stopRequestedRef.current) return;
+    if (retryTimeoutRef.current) return;
+
+    retryAttemptRef.current += 1;
+
+    const attempt = retryAttemptRef.current;
+    const base = Math.min(30000, 1000 * Math.pow(2, attempt - 1)); // 1s,2s,4s,...,30s cap
+    const jitter = Math.floor(Math.random() * 500);
+    const delay = base + jitter;
+
+    retryTimeoutRef.current = setTimeout(() => {
+      retryTimeoutRef.current = null;
+      void start();
+    }, delay);
+  }, [clearRetry]);
+
+  const attachHandlers = useCallback((connection: signalR.HubConnection) => {
+    handlersRef.current.forEach((set, event) => {
+      connection.off(event);
+      set.forEach(handler => {
+        connection.on(event, handler);
+      });
+    });
+  }, []);
+
+  const getAccessToken = useCallback(async (): Promise<string> => {
+    return getSessionAccessToken();
+  }, []);
+
+  const buildConnection = useCallback(() => {
+    const connection = new signalR.HubConnectionBuilder()
+      .withUrl(url, {
+        accessTokenFactory: getAccessToken
+      })
+      .withAutomaticReconnect({
+        nextRetryDelayInMilliseconds: retryContext => {
+          if (retryContext.elapsedMilliseconds < 60000) {
+            return Math.random() * 10000;
+          }
+          return null;
+        }
+      })
+      .build();
+
+    connection.onreconnecting(() => {
+      clearRetry();
+      setStatus("reconnecting");
+    });
+
+    connection.onreconnected(() => {
+      clearRetry();
+      retryAttemptRef.current = 0;
+      setStatus("connected");
+      attachHandlers(connection);
+    });
+
+    connection.onclose(err => {
+      setStatus("disconnected");
+      if (err) setError(err);
+
+      if (!stopRequestedRef.current) {
+        scheduleRetry();
+      }
+    });
+
+    return connection;
+  }, [url, getAccessToken, attachHandlers, clearRetry, scheduleRetry]);
+
+  const start = useCallback(async () => {
+    stopRequestedRef.current = false;
+    clearRetry();
+
+    if (!connectionRef.current) {
+      connectionRef.current = buildConnection();
+    }
+
+    const connection = connectionRef.current;
+
+    if (connection.state === signalR.HubConnectionState.Connected) {
+      setStatus("connected");
+      return;
+    }
+
+    if (connection.state === signalR.HubConnectionState.Connecting) {
+      setStatus("connecting");
+      return;
+    }
+
+    if (connection.state === signalR.HubConnectionState.Reconnecting) {
+      setStatus("reconnecting");
+      return;
+    }
+
+    setStatus("connecting");
+
+    try {
+      await connection.start();
+      attachHandlers(connection);
+      retryAttemptRef.current = 0;
+      setStatus("connected");
+      setError(null);
+    } catch (err) {
+      setError(err as Error);
+      setStatus("disconnected");
+      scheduleRetry();
+    }
+  }, [attachHandlers, buildConnection, clearRetry, scheduleRetry]);
+
+  const stop = useCallback(async () => {
+    stopRequestedRef.current = true;
+    clearRetry();
+    retryAttemptRef.current = 0;
+
+    const connection = connectionRef.current;
+    connectionRef.current = null;
+
+    if (!connection) {
+      setStatus("disconnected");
+      return;
+    }
+
+    try {
+      await connection.stop();
+    } finally {
+      setStatus("disconnected");
+    }
+  }, [clearRetry]);
+
+  const on = useCallback(<T = any>(eventName: string, handler: Handler<T>) => {
+    let set = handlersRef.current.get(eventName);
+    if (!set) {
+      set = new Set();
+      handlersRef.current.set(eventName, set);
+    }
+
+    set.add(handler as Handler);
+
+    const connection = connectionRef.current;
+    if (connection) {
+      connection.on(eventName, handler as Handler);
+    }
+  }, []);
+
+  const off = useCallback(<T = any>(eventName: string, handler: Handler<T>) => {
+    const set = handlersRef.current.get(eventName);
+    if (!set) return;
+
+    set.delete(handler as Handler);
+    if (set.size === 0) {
+      handlersRef.current.delete(eventName);
+    }
+
+    const connection = connectionRef.current;
+    if (connection) {
+      connection.off(eventName, handler as Handler);
+    }
+  }, []);
+
+  const invoke = useCallback(async <T = any>(methodName: string, ...args: any[]): Promise<T> => {
+    const connection = connectionRef.current;
+    if (!connection || connection.state !== signalR.HubConnectionState.Connected) {
+      throw new Error("SignalR not connected");
+    }
+    return connection.invoke<T>(methodName, ...args);
+  }, []);
+
+  useEffect(() => {
+    if (autoStart) void start();
+
+    return () => {
+      void stop();
+    };
+  }, [autoStart, start, stop]);
+
+  return {
+    status,
+    connected: status === "connected",
+    error,
+    start,
+    stop,
+    on,
+    off,
+    invoke
+  };
+}

package/src/main.ts

@@ -0,0 +1,38 @@
+import { ChatBotElement } from "./components/chatbot-element";
+import { getApiStatus, getClientActivityStatus } from "./api/service";
+import { getConversationId } from "./storage/session-storage";
+import { getThisScript } from "./utils/script-utils";
+import { getChatBotConfig, setChatBotConfig } from "./services/chatConfiguration";
+
+const apiBaseUrl = "https://localhost:7352"
+
+const script = getThisScript();
+const clientId = script?.getAttribute("data-client-id") || "";
+const chatBotComponentName = `chat-bot-${clientId}`;
+
+if (!customElements.get(chatBotComponentName)) {
+  customElements.define(chatBotComponentName, ChatBotElement);
+}
+
+(async function autoMount() {
+  var chatConfiguration = getChatBotConfig()
+  if (!chatConfiguration) {
+    chatConfiguration = {
+      clientId: clientId, apiBaseUrl: apiBaseUrl, conversationId: undefined, userId: undefined, hideChatForUrls: undefined,
+      sessionToken: null
+    }
+    setChatBotConfig(chatConfiguration)
+  }
+  if (document.querySelector(chatBotComponentName)) return;
+
+  var isHealty = await getApiStatus(chatConfiguration!)
+  if (!isHealty) return;
+
+  var clientActivityStatus = await getClientActivityStatus(chatConfiguration!, getConversationId())
+  if (!clientActivityStatus.isActive) return;
+
+  chatConfiguration!.hideChatForUrls = clientActivityStatus.hideForUrls;
+
+  const el = document.createElement(chatBotComponentName);
+  document.body.appendChild(el);
+})();

package/src/services/chatConfiguration.ts

@@ -0,0 +1,11 @@
+import { Config } from "../types";
+
+let chatConfiguration: Config | null = null;
+
+export function setChatBotConfig(value: Config) {
+  chatConfiguration = value
+}
+
+export function getChatBotConfig() {
+  return chatConfiguration
+}

package/src/storage/session-storage.ts

@@ -0,0 +1,53 @@
+const STORAGE_KEY = "chat_session_v1";
+const INACTIVITY_MS = 30 * 60 * 1000;
+
+type ChatSession = {
+  conversationId: string;
+  lastActivityAt: number;
+};
+
+function readSession(): ChatSession | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    return JSON.parse(raw) as ChatSession;
+  } catch {
+    return null;
+  }
+}
+function writeSession(session: ChatSession): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(session));
+}
+
+export function getConversationId(): string | null {
+  const now = Date.now();
+  const session = readSession();
+
+  if (!session) return null
+
+  const expired = now - session.lastActivityAt > INACTIVITY_MS;
+
+  if (expired) {
+    resetConversation()
+    return null
+  }
+
+  const next: ChatSession = {
+    ...session,
+    lastActivityAt: now,
+  };
+
+  writeSession(next);
+  return next.conversationId;
+}
+
+export function writeConversation(conversationId: string): void {
+  const next: ChatSession = {
+    conversationId: conversationId,
+    lastActivityAt: Date.now(),
+  };
+  writeSession(next);
+}
+export function resetConversation(): void {
+  localStorage.removeItem(STORAGE_KEY);
+}

package/src/types.ts

@@ -0,0 +1,29 @@
+export type Config = {
+  clientId: string;
+  apiBaseUrl: string;
+  conversationId?: string;
+  userId?: string;
+  hideChatForUrls?: string[];
+  sessionToken?: string | null;
+};
+
+export type Msg = {
+  id: string; role: string | "User" | "Assistant"; text: string, sentAt?: string;
+  seen: boolean;
+};
+
+export type MsgDelta = {
+  id: string;
+  conversationId: string;
+  text: string;
+  role: string | "User" | "Assistant";
+  sentAt?: string;
+  seen: boolean;
+};
+
+export type ConversationState = "AI_ACTIVE" | "AI_NEEDS_HELP" | "HANDOFF_PENDING" | "HUMAN_ACTIVE" | "WRAP_UP" | "CLOSED"
+export type ControlModeType = "Bot" | "Human"
+export type ConversationStatus = {
+    state: ConversationState,
+    mode: ControlModeType
+}

package/src/utils/deviceInfo.ts

@@ -0,0 +1,13 @@
+export default function getDeviceType() : string {
+  const width = window.innerWidth;
+
+  if (width <= 767) {
+    return "Mobile";
+  }
+
+  if (width <= 1024) {
+    return "Tablet";
+  }
+
+  return "Desktop";
+}

package/src/utils/script-utils.ts

@@ -0,0 +1,11 @@
+export function getThisScript(): HTMLScriptElement | null {
+  const cs = document.currentScript as HTMLScriptElement | null;
+  if (cs) return cs;
+
+  const scripts = Array.from(document.getElementsByTagName("script"));
+  const matches = scripts.filter(s => 
+    (s.src || "").startsWith("http://localhost:5173/src/main.ts") //for development only
+    || (s.src || "").includes("https://cdn.jsdelivr.net/npm/ss-support-widget")
+);
+  return matches.length ? matches[matches.length - 1] : null;
+}

package/tsconfig.json

@@ -1,13 +1,13 @@
-{
-  "compilerOptions": {
-    "target": "ES2019",
-    "lib": ["DOM", "ES2019"],
-    "jsx": "react-jsx",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "strict": true,
-    "skipLibCheck": true,
-    "noEmit": true
-  },
-  "include": ["src"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "lib": ["DOM", "ES2019"],
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}