@aslaluroba/help-center-react 2.1.2 → 3.0.0

package/dist/lib/config.d.ts

@@ -1,7 +1,6 @@
 import { TokenResponse } from './types';
 type Config = {
     baseUrl?: string;
-    hubUrl?: string;
     tenantId?: string;
     apiKey?: string;
     getToken?: () => Promise<TokenResponse>;

package/dist/ui/chatbot-popup/chat-window-screen/footer.d.ts

@@ -5,7 +5,7 @@ interface ChatWindowFooterProps {
     handleKeyDown: (e: React.KeyboardEvent) => void;
     handleSendMessage: () => void;
     isLoading: boolean;
-    isSignalRConnected: boolean;
+    isAblyConnected: boolean;
 }
 declare const ChatWindowFooter: React.FC<ChatWindowFooterProps>;
 export default ChatWindowFooter;

package/dist/ui/chatbot-popup/chat-window-screen/index.d.ts

@@ -5,7 +5,7 @@ interface ChatWindowProps {
     messages: Message[];
     assistantStatus: string;
     needsAgent: boolean;
-    isSignalRConnected: boolean;
+    isAblyConnected: boolean;
 }
-export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, messages, assistantStatus, isSignalRConnected }: ChatWindowProps) => React.JSX.Element>;
+export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, messages, assistantStatus, isAblyConnected }: ChatWindowProps) => React.JSX.Element>;
 export {};

package/dist/ui/confirmation-modal/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface ConfirmationModalProps {
+    title: string;
+    message: string;
+    onCancel: () => void;
+    onConfirm: () => void;
+}
+declare const ConfirmationModal: ({ title, message, onCancel, onConfirm, }: ConfirmationModalProps) => React.JSX.Element;
+export default ConfirmationModal;

package/dist/ui/help-popup.d.ts

@@ -15,16 +15,10 @@ type HelpPopupProps = {
     assistantStatus: string;
     sessionId: string | null;
     isChatClosed: boolean;
-    isSignalRConnected: boolean;
+    isAblyConnected: boolean;
     selectedOption: Option | null;
     setSelectedOption: (option: Option | null) => void;
     showHelpScreen: boolean;
 };
-export declare const ConfirmationModal: ({ title, message, onCancel, onConfirm, }: {
-    title: string;
-    message: string;
-    onCancel: () => void;
-    onConfirm: () => void;
-}) => React.JSX.Element;
-export declare function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isSignalRConnected, }: HelpPopupProps): React.JSX.Element;
+export declare function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isAblyConnected, }: HelpPopupProps): React.JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "2.1.2",
+  "version": "3.0.0",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {
@@ -21,15 +21,16 @@
   "scripts": {
     "build": "rollup -c",
     "build:prod": "production rollup -c",
-    "dev": "rollup -c -w",
+    "dev": "rollup --watch --config rollup.dev.config.js",
     "test": "jest",
     "clean": "rimraf dist",
     "version:patch": "npm version patch --no-git-tag-version",
     "version:minor": "npm version minor --no-git-tag-version",
     "version:major": "npm version major --no-git-tag-version",
-    "publish": "yarn clean && yarn build && yarn version:patch && yarn publish --access public",
+    "publish:patch": "yarn clean && yarn build && yarn version:patch && yarn publish --access public",
     "publish:minor": "yarn clean && yarn build && yarn version:minor && yarn publish --access public",
-    "publish:major": "yarn clean && yarn build && yarn version:major && yarn publish --access public"
+    "publish:major": "yarn clean && yarn build && yarn version:major && yarn publish --access public",
+    "watch": "concurrently \"yarn dev\" \"yalc publish --watch --push\""
   },
   "files": [
     "dist",
@@ -61,7 +62,9 @@
     "tailwind-merge": "^3.0.0"
   },
   "dependencies": {
+    "@ably/chat": "^0.8.0",
     "@microsoft/signalr": "^7.0.14",
+    "ably": "^2.9.0",
     "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1"
   },
@@ -85,6 +88,7 @@
     "autoprefixer": "^10.4.14",
     "babel-loader": "^10.0.0",
     "clsx": "^2.1.1",
+    "concurrently": "^9.1.2",
     "i18next": "^25.2.1",
     "postcss": "^8.4.24",
     "react-i18next": "^15.5.2",

package/src/assets/icons/threeDots.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 14 4">
-  <path fill="#AD49E1" d="M3.25 1.827a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.25 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.25 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
+  <path fill="currentcolor" d="M3.25 1.827a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.25 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.25 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
 </svg>

package/src/assets/logo_ai.svg

@@ -5,10 +5,10 @@
 <ellipse cx="121" cy="85" rx="21" ry="21.5" fill="#F9F9F9"/>
 <path d="M504.878 93.808V28.24H518.126V93.808H504.878Z" fill="#AD49E1"/>
 <path d="M446 93.808L462.704 28.24H485.84L502.448 93.808H489.2L485.552 80.56H462.608L459.152 93.808H446ZM464.72 69.904H483.632L476.24 38.992H472.208L464.72 69.904Z" fill="#AD49E1"/>
-<path d="M430.666 93.808V25.936H443.434V93.808H430.666Z" fill="#18162C"/>
-<path d="M398.14 114.064L404.284 93.808H394.012L382.588 45.616H395.932L404.476 82.96H406.972L415.516 45.616H428.38L411.772 114.064H398.14Z" fill="#18162C"/>
-<path d="M358.863 94.864C357.263 94.864 355.311 94.8 353.007 94.672C350.703 94.544 348.335 94.352 345.903 94.096C343.535 93.84 341.423 93.616 339.567 93.424V25.936H352.431V47.152C353.391 46.768 354.575 46.384 355.983 46C357.391 45.616 358.863 45.296 360.399 45.04C361.999 44.72 363.471 44.56 364.815 44.56C369.295 44.56 372.847 45.488 375.471 47.344C378.159 49.136 380.079 51.824 381.231 55.408C382.383 58.992 382.959 63.504 382.959 68.944C382.959 75.344 382.223 80.464 380.751 84.304C379.343 88.08 376.879 90.8 373.359 92.464C369.839 94.064 365.007 94.864 358.863 94.864ZM358.959 84.112C362.095 84.112 364.431 83.568 365.967 82.48C367.503 81.328 368.527 79.632 369.039 77.392C369.615 75.152 369.903 72.4 369.903 69.136C369.903 65.808 369.647 63.152 369.135 61.168C368.623 59.12 367.759 57.648 366.543 56.752C365.391 55.792 363.759 55.312 361.647 55.312C360.623 55.312 359.535 55.44 358.383 55.696C357.231 55.888 356.111 56.144 355.023 56.464C353.999 56.72 353.135 56.976 352.431 57.232V83.728C353.391 83.792 354.511 83.888 355.791 84.016C357.071 84.08 358.127 84.112 358.959 84.112Z" fill="#18162C"/>
-<path d="M306.79 94.8639C301.798 94.8639 298.022 93.6159 295.462 91.1199C292.966 88.5599 291.718 84.7199 291.718 79.5999C291.718 76.0159 292.358 73.2319 293.638 71.2479C294.918 69.1999 296.806 67.7279 299.302 66.8319C301.862 65.8719 304.966 65.2959 308.614 65.1039L320.326 64.0479V61.1679C320.326 58.8639 319.75 57.2639 318.598 56.3679C317.446 55.4079 315.75 54.9279 313.51 54.9279C311.718 54.9279 309.638 54.9919 307.27 55.1199C304.966 55.2479 302.662 55.4079 300.358 55.5999C298.118 55.7919 296.166 55.9839 294.502 56.1759L294.118 47.1519C295.782 46.7679 297.766 46.3839 300.07 45.9999C302.438 45.5519 304.902 45.1999 307.462 44.9439C310.022 44.6879 312.39 44.5599 314.566 44.5599C318.662 44.5599 322.086 45.0719 324.838 46.0959C327.59 47.1199 329.67 48.8159 331.078 51.1839C332.486 53.4879 333.19 56.6239 333.19 60.5919V82.5759C333.318 83.4719 333.798 84.1759 334.63 84.6879C335.462 85.1359 336.422 85.4559 337.51 85.6479L337.222 94.4799C336.198 94.4799 335.174 94.4799 334.15 94.4799C333.19 94.5439 332.262 94.5439 331.366 94.4799C330.47 94.4799 329.67 94.4159 328.966 94.2879C327.494 94.0959 326.214 93.7119 325.126 93.1359C324.102 92.5599 323.27 91.9519 322.63 91.3119C321.606 91.7599 320.23 92.2719 318.502 92.8479C316.774 93.4239 314.886 93.9039 312.838 94.2879C310.854 94.6719 308.838 94.8639 306.79 94.8639ZM309.862 85.3599C311.078 85.3599 312.358 85.2319 313.702 84.9759C315.046 84.7199 316.294 84.4319 317.446 84.1119C318.662 83.7279 319.622 83.3759 320.326 83.0559V72.0159L310.534 72.8799C308.422 73.0719 306.886 73.7119 305.926 74.7999C305.03 75.8239 304.582 77.2959 304.582 79.2159C304.582 81.1359 304.998 82.6399 305.83 83.7279C306.726 84.8159 308.07 85.3599 309.862 85.3599Z" fill="#18162C"/>
-<path d="M241 93.808V28.24H267.112C271.464 28.24 275.208 28.784 278.344 29.872C281.48 30.96 283.912 32.72 285.64 35.152C287.432 37.52 288.328 40.72 288.328 44.752C288.328 47.504 288.04 49.84 287.464 51.76C286.952 53.616 286.12 55.216 284.968 56.56C283.88 57.84 282.44 59.024 280.648 60.112C282.568 60.816 284.232 61.776 285.64 62.992C287.112 64.144 288.232 65.712 289 67.696C289.768 69.616 290.152 72.176 290.152 75.376C290.152 78.896 289.608 81.84 288.52 84.208C287.432 86.576 285.864 88.464 283.816 89.872C281.832 91.28 279.496 92.304 276.808 92.944C274.12 93.52 271.176 93.808 267.976 93.808H241ZM254.248 84.016H267.016C269.256 84.016 271.112 83.76 272.584 83.248C274.12 82.672 275.272 81.68 276.04 80.272C276.872 78.864 277.288 76.912 277.288 74.416C277.288 72.496 276.968 70.928 276.328 69.712C275.688 68.496 274.856 67.6 273.832 67.024C272.808 66.384 271.656 65.936 270.376 65.68C269.16 65.424 267.944 65.296 266.728 65.296H254.248V84.016ZM254.248 55.888H266.632C268.808 55.888 270.568 55.568 271.912 54.928C273.256 54.224 274.248 53.2 274.888 51.856C275.528 50.448 275.848 48.688 275.848 46.576C275.848 43.568 275.048 41.392 273.448 40.048C271.912 38.704 269.48 38.032 266.152 38.032H254.248V55.888Z" fill="#18162C"/>
-<path d="M251.12 162.064V149.304L241.44 131.66H245.4L252.836 145.784L260.316 131.66H264.276L254.64 149.304V162.064H251.12ZM270.396 162.504C267.932 162.504 266.011 162.079 264.632 161.228C263.283 160.377 262.33 159.087 261.772 157.356C261.244 155.625 260.98 153.44 260.98 150.8C260.98 148.277 261.274 146.195 261.86 144.552C262.476 142.909 263.474 141.677 264.852 140.856C266.231 140.035 268.079 139.624 270.396 139.624C272.743 139.624 274.606 140.035 275.984 140.856C277.363 141.677 278.346 142.909 278.932 144.552C279.548 146.195 279.856 148.277 279.856 150.8C279.856 153.44 279.578 155.625 279.02 157.356C278.492 159.087 277.539 160.377 276.16 161.228C274.811 162.079 272.89 162.504 270.396 162.504ZM270.396 159.556C272.098 159.556 273.374 159.263 274.224 158.676C275.075 158.06 275.632 157.107 275.896 155.816C276.19 154.525 276.336 152.853 276.336 150.8C276.336 148.776 276.16 147.163 275.808 145.96C275.456 144.757 274.855 143.892 274.004 143.364C273.154 142.836 271.951 142.572 270.396 142.572C268.871 142.572 267.668 142.836 266.788 143.364C265.938 143.892 265.336 144.757 264.984 145.96C264.632 147.163 264.456 148.776 264.456 150.8C264.456 152.853 264.588 154.525 264.852 155.816C265.146 157.107 265.718 158.06 266.568 158.676C267.419 159.263 268.695 159.556 270.396 159.556ZM289.726 162.504C287.848 162.504 286.411 162.123 285.414 161.36C284.416 160.597 283.727 159.409 283.346 157.796C282.994 156.183 282.818 154.1 282.818 151.548V140.064H286.206V151.548C286.206 153.484 286.294 155.024 286.47 156.168C286.675 157.312 287.1 158.148 287.746 158.676C288.391 159.175 289.359 159.424 290.65 159.424C291.94 159.424 293.114 159.248 294.17 158.896C295.226 158.544 296.076 158.192 296.722 157.84V140.064H300.11V162.064H296.722V160.524C295.783 161.052 294.756 161.521 293.642 161.932C292.556 162.313 291.251 162.504 289.726 162.504ZM304.256 162.064V140.064H307.644V143.012C308.201 142.631 308.905 142.22 309.756 141.78C310.606 141.311 311.545 140.871 312.572 140.46C313.598 140.049 314.625 139.756 315.652 139.58V143.056C314.654 143.261 313.642 143.54 312.616 143.892C311.589 144.215 310.636 144.567 309.756 144.948C308.905 145.329 308.201 145.667 307.644 145.96V162.064H304.256ZM322.621 162.064L330.937 131.66H338.549L346.821 162.064H343.301L341.145 154.364H328.297L326.141 162.064H322.621ZM329.045 151.24H340.397L335.865 134.652H333.577L329.045 151.24ZM349.316 162.064V131.66H352.836V162.064H349.316ZM355.83 167.476L357.81 157.268H361.638L358.646 167.476H355.83ZM379.605 162.064V149.304L369.925 131.66H373.885L381.321 145.784L388.801 131.66H392.761L383.125 149.304V162.064H379.605ZM398.882 162.504C396.418 162.504 394.496 162.079 393.118 161.228C391.768 160.377 390.815 159.087 390.258 157.356C389.73 155.625 389.466 153.44 389.466 150.8C389.466 148.277 389.759 146.195 390.346 144.552C390.962 142.909 391.959 141.677 393.338 140.856C394.716 140.035 396.564 139.624 398.882 139.624C401.228 139.624 403.091 140.035 404.47 140.856C405.848 141.677 406.831 142.909 407.418 144.552C408.034 146.195 408.342 148.277 408.342 150.8C408.342 153.44 408.063 155.625 407.506 157.356C406.978 159.087 406.024 160.377 404.646 161.228C403.296 162.079 401.375 162.504 398.882 162.504ZM398.882 159.556C400.583 159.556 401.859 159.263 402.71 158.676C403.56 158.06 404.118 157.107 404.382 155.816C404.675 154.525 404.822 152.853 404.822 150.8C404.822 148.776 404.646 147.163 404.294 145.96C403.942 144.757 403.34 143.892 402.49 143.364C401.639 142.836 400.436 142.572 398.882 142.572C397.356 142.572 396.154 142.836 395.274 143.364C394.423 143.892 393.822 144.757 393.47 145.96C393.118 147.163 392.942 148.776 392.942 150.8C392.942 152.853 393.074 154.525 393.338 155.816C393.631 157.107 394.203 158.06 395.054 158.676C395.904 159.263 397.18 159.556 398.882 159.556ZM418.211 162.504C416.333 162.504 414.896 162.123 413.899 161.36C412.901 160.597 412.212 159.409 411.831 157.796C411.479 156.183 411.303 154.1 411.303 151.548V140.064H414.691V151.548C414.691 153.484 414.779 155.024 414.955 156.168C415.16 157.312 415.585 158.148 416.231 158.676C416.876 159.175 417.844 159.424 419.135 159.424C420.425 159.424 421.599 159.248 422.655 158.896C423.711 158.544 424.561 158.192 425.207 157.84V140.064H428.595V162.064H425.207V160.524C424.268 161.052 423.241 161.521 422.127 161.932C421.041 162.313 419.736 162.504 418.211 162.504ZM432.741 162.064V140.064H436.129V143.012C436.686 142.631 437.39 142.22 438.241 141.78C439.091 141.311 440.03 140.871 441.057 140.46C442.083 140.049 443.11 139.756 444.137 139.58V143.056C443.139 143.261 442.127 143.54 441.101 143.892C440.074 144.215 439.121 144.567 438.241 144.948C437.39 145.329 436.686 145.667 436.129 145.96V162.064H432.741ZM457.531 162.064L451.415 131.66H455.067L460.171 158.984H461.403L467.563 131.88H471.699L477.859 158.984H479.091L484.195 131.66H487.847L481.687 162.064H475.351L469.323 134.696H469.939L463.911 162.064H457.531ZM494.487 162.504C492.463 162.504 490.923 161.932 489.867 160.788C488.811 159.644 488.283 157.972 488.283 155.772C488.283 154.335 488.533 153.161 489.031 152.252C489.53 151.343 490.278 150.653 491.275 150.184C492.302 149.685 493.563 149.377 495.059 149.26L501.835 148.6V146.708C501.835 145.212 501.498 144.156 500.823 143.54C500.178 142.924 499.21 142.616 497.919 142.616C497.186 142.616 496.306 142.645 495.279 142.704C494.282 142.763 493.285 142.836 492.287 142.924C491.29 143.012 490.41 143.1 489.647 143.188L489.471 140.592C490.175 140.445 491.026 140.299 492.023 140.152C493.021 140.005 494.062 139.888 495.147 139.8C496.233 139.683 497.23 139.624 498.139 139.624C499.811 139.624 501.175 139.888 502.231 140.416C503.287 140.915 504.05 141.692 504.519 142.748C505.018 143.775 505.267 145.095 505.267 146.708V157.84C505.326 158.485 505.575 158.955 506.015 159.248C506.485 159.541 507.071 159.732 507.775 159.82L507.643 162.504C507.233 162.504 506.837 162.489 506.455 162.46C506.074 162.431 505.707 162.372 505.355 162.284C505.033 162.225 504.71 162.152 504.387 162.064C504.006 161.917 503.639 161.741 503.287 161.536C502.965 161.331 502.642 161.081 502.319 160.788C501.762 161.023 501.043 161.272 500.163 161.536C499.313 161.8 498.389 162.02 497.391 162.196C496.423 162.401 495.455 162.504 494.487 162.504ZM495.059 159.644C495.851 159.644 496.673 159.571 497.523 159.424C498.374 159.277 499.181 159.101 499.943 158.896C500.706 158.691 501.337 158.5 501.835 158.324V151.152L495.455 151.768C494.135 151.885 493.182 152.267 492.595 152.912C492.038 153.557 491.759 154.481 491.759 155.684C491.759 156.916 492.038 157.884 492.595 158.588C493.153 159.292 493.974 159.644 495.059 159.644ZM513.595 171.788L516.455 162.064H513.155L506.951 140.064H510.383L515.751 159.116H517.247L522.659 140.064H526.091L517.027 171.788H513.595Z" fill="#18162C"/>
+<path d="M430.666 93.808V25.936H443.434V93.808H430.666Z" fill="currentcolor"/>
+<path d="M398.14 114.064L404.284 93.808H394.012L382.588 45.616H395.932L404.476 82.96H406.972L415.516 45.616H428.38L411.772 114.064H398.14Z" fill="currentcolor"/>
+<path d="M358.863 94.864C357.263 94.864 355.311 94.8 353.007 94.672C350.703 94.544 348.335 94.352 345.903 94.096C343.535 93.84 341.423 93.616 339.567 93.424V25.936H352.431V47.152C353.391 46.768 354.575 46.384 355.983 46C357.391 45.616 358.863 45.296 360.399 45.04C361.999 44.72 363.471 44.56 364.815 44.56C369.295 44.56 372.847 45.488 375.471 47.344C378.159 49.136 380.079 51.824 381.231 55.408C382.383 58.992 382.959 63.504 382.959 68.944C382.959 75.344 382.223 80.464 380.751 84.304C379.343 88.08 376.879 90.8 373.359 92.464C369.839 94.064 365.007 94.864 358.863 94.864ZM358.959 84.112C362.095 84.112 364.431 83.568 365.967 82.48C367.503 81.328 368.527 79.632 369.039 77.392C369.615 75.152 369.903 72.4 369.903 69.136C369.903 65.808 369.647 63.152 369.135 61.168C368.623 59.12 367.759 57.648 366.543 56.752C365.391 55.792 363.759 55.312 361.647 55.312C360.623 55.312 359.535 55.44 358.383 55.696C357.231 55.888 356.111 56.144 355.023 56.464C353.999 56.72 353.135 56.976 352.431 57.232V83.728C353.391 83.792 354.511 83.888 355.791 84.016C357.071 84.08 358.127 84.112 358.959 84.112Z" fill="currentcolor"/>
+<path d="M306.79 94.8639C301.798 94.8639 298.022 93.6159 295.462 91.1199C292.966 88.5599 291.718 84.7199 291.718 79.5999C291.718 76.0159 292.358 73.2319 293.638 71.2479C294.918 69.1999 296.806 67.7279 299.302 66.8319C301.862 65.8719 304.966 65.2959 308.614 65.1039L320.326 64.0479V61.1679C320.326 58.8639 319.75 57.2639 318.598 56.3679C317.446 55.4079 315.75 54.9279 313.51 54.9279C311.718 54.9279 309.638 54.9919 307.27 55.1199C304.966 55.2479 302.662 55.4079 300.358 55.5999C298.118 55.7919 296.166 55.9839 294.502 56.1759L294.118 47.1519C295.782 46.7679 297.766 46.3839 300.07 45.9999C302.438 45.5519 304.902 45.1999 307.462 44.9439C310.022 44.6879 312.39 44.5599 314.566 44.5599C318.662 44.5599 322.086 45.0719 324.838 46.0959C327.59 47.1199 329.67 48.8159 331.078 51.1839C332.486 53.4879 333.19 56.6239 333.19 60.5919V82.5759C333.318 83.4719 333.798 84.1759 334.63 84.6879C335.462 85.1359 336.422 85.4559 337.51 85.6479L337.222 94.4799C336.198 94.4799 335.174 94.4799 334.15 94.4799C333.19 94.5439 332.262 94.5439 331.366 94.4799C330.47 94.4799 329.67 94.4159 328.966 94.2879C327.494 94.0959 326.214 93.7119 325.126 93.1359C324.102 92.5599 323.27 91.9519 322.63 91.3119C321.606 91.7599 320.23 92.2719 318.502 92.8479C316.774 93.4239 314.886 93.9039 312.838 94.2879C310.854 94.6719 308.838 94.8639 306.79 94.8639ZM309.862 85.3599C311.078 85.3599 312.358 85.2319 313.702 84.9759C315.046 84.7199 316.294 84.4319 317.446 84.1119C318.662 83.7279 319.622 83.3759 320.326 83.0559V72.0159L310.534 72.8799C308.422 73.0719 306.886 73.7119 305.926 74.7999C305.03 75.8239 304.582 77.2959 304.582 79.2159C304.582 81.1359 304.998 82.6399 305.83 83.7279C306.726 84.8159 308.07 85.3599 309.862 85.3599Z" fill="currentcolor"/>
+<path d="M241 93.808V28.24H267.112C271.464 28.24 275.208 28.784 278.344 29.872C281.48 30.96 283.912 32.72 285.64 35.152C287.432 37.52 288.328 40.72 288.328 44.752C288.328 47.504 288.04 49.84 287.464 51.76C286.952 53.616 286.12 55.216 284.968 56.56C283.88 57.84 282.44 59.024 280.648 60.112C282.568 60.816 284.232 61.776 285.64 62.992C287.112 64.144 288.232 65.712 289 67.696C289.768 69.616 290.152 72.176 290.152 75.376C290.152 78.896 289.608 81.84 288.52 84.208C287.432 86.576 285.864 88.464 283.816 89.872C281.832 91.28 279.496 92.304 276.808 92.944C274.12 93.52 271.176 93.808 267.976 93.808H241ZM254.248 84.016H267.016C269.256 84.016 271.112 83.76 272.584 83.248C274.12 82.672 275.272 81.68 276.04 80.272C276.872 78.864 277.288 76.912 277.288 74.416C277.288 72.496 276.968 70.928 276.328 69.712C275.688 68.496 274.856 67.6 273.832 67.024C272.808 66.384 271.656 65.936 270.376 65.68C269.16 65.424 267.944 65.296 266.728 65.296H254.248V84.016ZM254.248 55.888H266.632C268.808 55.888 270.568 55.568 271.912 54.928C273.256 54.224 274.248 53.2 274.888 51.856C275.528 50.448 275.848 48.688 275.848 46.576C275.848 43.568 275.048 41.392 273.448 40.048C271.912 38.704 269.48 38.032 266.152 38.032H254.248V55.888Z" fill="currentcolor"/>
+<path d="M251.12 162.064V149.304L241.44 131.66H245.4L252.836 145.784L260.316 131.66H264.276L254.64 149.304V162.064H251.12ZM270.396 162.504C267.932 162.504 266.011 162.079 264.632 161.228C263.283 160.377 262.33 159.087 261.772 157.356C261.244 155.625 260.98 153.44 260.98 150.8C260.98 148.277 261.274 146.195 261.86 144.552C262.476 142.909 263.474 141.677 264.852 140.856C266.231 140.035 268.079 139.624 270.396 139.624C272.743 139.624 274.606 140.035 275.984 140.856C277.363 141.677 278.346 142.909 278.932 144.552C279.548 146.195 279.856 148.277 279.856 150.8C279.856 153.44 279.578 155.625 279.02 157.356C278.492 159.087 277.539 160.377 276.16 161.228C274.811 162.079 272.89 162.504 270.396 162.504ZM270.396 159.556C272.098 159.556 273.374 159.263 274.224 158.676C275.075 158.06 275.632 157.107 275.896 155.816C276.19 154.525 276.336 152.853 276.336 150.8C276.336 148.776 276.16 147.163 275.808 145.96C275.456 144.757 274.855 143.892 274.004 143.364C273.154 142.836 271.951 142.572 270.396 142.572C268.871 142.572 267.668 142.836 266.788 143.364C265.938 143.892 265.336 144.757 264.984 145.96C264.632 147.163 264.456 148.776 264.456 150.8C264.456 152.853 264.588 154.525 264.852 155.816C265.146 157.107 265.718 158.06 266.568 158.676C267.419 159.263 268.695 159.556 270.396 159.556ZM289.726 162.504C287.848 162.504 286.411 162.123 285.414 161.36C284.416 160.597 283.727 159.409 283.346 157.796C282.994 156.183 282.818 154.1 282.818 151.548V140.064H286.206V151.548C286.206 153.484 286.294 155.024 286.47 156.168C286.675 157.312 287.1 158.148 287.746 158.676C288.391 159.175 289.359 159.424 290.65 159.424C291.94 159.424 293.114 159.248 294.17 158.896C295.226 158.544 296.076 158.192 296.722 157.84V140.064H300.11V162.064H296.722V160.524C295.783 161.052 294.756 161.521 293.642 161.932C292.556 162.313 291.251 162.504 289.726 162.504ZM304.256 162.064V140.064H307.644V143.012C308.201 142.631 308.905 142.22 309.756 141.78C310.606 141.311 311.545 140.871 312.572 140.46C313.598 140.049 314.625 139.756 315.652 139.58V143.056C314.654 143.261 313.642 143.54 312.616 143.892C311.589 144.215 310.636 144.567 309.756 144.948C308.905 145.329 308.201 145.667 307.644 145.96V162.064H304.256ZM322.621 162.064L330.937 131.66H338.549L346.821 162.064H343.301L341.145 154.364H328.297L326.141 162.064H322.621ZM329.045 151.24H340.397L335.865 134.652H333.577L329.045 151.24ZM349.316 162.064V131.66H352.836V162.064H349.316ZM355.83 167.476L357.81 157.268H361.638L358.646 167.476H355.83ZM379.605 162.064V149.304L369.925 131.66H373.885L381.321 145.784L388.801 131.66H392.761L383.125 149.304V162.064H379.605ZM398.882 162.504C396.418 162.504 394.496 162.079 393.118 161.228C391.768 160.377 390.815 159.087 390.258 157.356C389.73 155.625 389.466 153.44 389.466 150.8C389.466 148.277 389.759 146.195 390.346 144.552C390.962 142.909 391.959 141.677 393.338 140.856C394.716 140.035 396.564 139.624 398.882 139.624C401.228 139.624 403.091 140.035 404.47 140.856C405.848 141.677 406.831 142.909 407.418 144.552C408.034 146.195 408.342 148.277 408.342 150.8C408.342 153.44 408.063 155.625 407.506 157.356C406.978 159.087 406.024 160.377 404.646 161.228C403.296 162.079 401.375 162.504 398.882 162.504ZM398.882 159.556C400.583 159.556 401.859 159.263 402.71 158.676C403.56 158.06 404.118 157.107 404.382 155.816C404.675 154.525 404.822 152.853 404.822 150.8C404.822 148.776 404.646 147.163 404.294 145.96C403.942 144.757 403.34 143.892 402.49 143.364C401.639 142.836 400.436 142.572 398.882 142.572C397.356 142.572 396.154 142.836 395.274 143.364C394.423 143.892 393.822 144.757 393.47 145.96C393.118 147.163 392.942 148.776 392.942 150.8C392.942 152.853 393.074 154.525 393.338 155.816C393.631 157.107 394.203 158.06 395.054 158.676C395.904 159.263 397.18 159.556 398.882 159.556ZM418.211 162.504C416.333 162.504 414.896 162.123 413.899 161.36C412.901 160.597 412.212 159.409 411.831 157.796C411.479 156.183 411.303 154.1 411.303 151.548V140.064H414.691V151.548C414.691 153.484 414.779 155.024 414.955 156.168C415.16 157.312 415.585 158.148 416.231 158.676C416.876 159.175 417.844 159.424 419.135 159.424C420.425 159.424 421.599 159.248 422.655 158.896C423.711 158.544 424.561 158.192 425.207 157.84V140.064H428.595V162.064H425.207V160.524C424.268 161.052 423.241 161.521 422.127 161.932C421.041 162.313 419.736 162.504 418.211 162.504ZM432.741 162.064V140.064H436.129V143.012C436.686 142.631 437.39 142.22 438.241 141.78C439.091 141.311 440.03 140.871 441.057 140.46C442.083 140.049 443.11 139.756 444.137 139.58V143.056C443.139 143.261 442.127 143.54 441.101 143.892C440.074 144.215 439.121 144.567 438.241 144.948C437.39 145.329 436.686 145.667 436.129 145.96V162.064H432.741ZM457.531 162.064L451.415 131.66H455.067L460.171 158.984H461.403L467.563 131.88H471.699L477.859 158.984H479.091L484.195 131.66H487.847L481.687 162.064H475.351L469.323 134.696H469.939L463.911 162.064H457.531ZM494.487 162.504C492.463 162.504 490.923 161.932 489.867 160.788C488.811 159.644 488.283 157.972 488.283 155.772C488.283 154.335 488.533 153.161 489.031 152.252C489.53 151.343 490.278 150.653 491.275 150.184C492.302 149.685 493.563 149.377 495.059 149.26L501.835 148.6V146.708C501.835 145.212 501.498 144.156 500.823 143.54C500.178 142.924 499.21 142.616 497.919 142.616C497.186 142.616 496.306 142.645 495.279 142.704C494.282 142.763 493.285 142.836 492.287 142.924C491.29 143.012 490.41 143.1 489.647 143.188L489.471 140.592C490.175 140.445 491.026 140.299 492.023 140.152C493.021 140.005 494.062 139.888 495.147 139.8C496.233 139.683 497.23 139.624 498.139 139.624C499.811 139.624 501.175 139.888 502.231 140.416C503.287 140.915 504.05 141.692 504.519 142.748C505.018 143.775 505.267 145.095 505.267 146.708V157.84C505.326 158.485 505.575 158.955 506.015 159.248C506.485 159.541 507.071 159.732 507.775 159.82L507.643 162.504C507.233 162.504 506.837 162.489 506.455 162.46C506.074 162.431 505.707 162.372 505.355 162.284C505.033 162.225 504.71 162.152 504.387 162.064C504.006 161.917 503.639 161.741 503.287 161.536C502.965 161.331 502.642 161.081 502.319 160.788C501.762 161.023 501.043 161.272 500.163 161.536C499.313 161.8 498.389 162.02 497.391 162.196C496.423 162.401 495.455 162.504 494.487 162.504ZM495.059 159.644C495.851 159.644 496.673 159.571 497.523 159.424C498.374 159.277 499.181 159.101 499.943 158.896C500.706 158.691 501.337 158.5 501.835 158.324V151.152L495.455 151.768C494.135 151.885 493.182 152.267 492.595 152.912C492.038 153.557 491.759 154.481 491.759 155.684C491.759 156.916 492.038 157.884 492.595 158.588C493.153 159.292 493.974 159.644 495.059 159.644ZM513.595 171.788L516.455 162.064H513.155L506.951 140.064H510.383L515.751 159.116H517.247L522.659 140.064H526.091L517.027 171.788H513.595Z" fill="currentcolor"/>
 </svg>

package/src/components/ui/agent-response/agent-response.tsx

@@ -27,14 +27,14 @@ const AgentResponse = ({ senderType, messageContent, messageId, onType }: AgentR
       className={`babylai-rounded-2xl babylai-p-4  ${
         senderType === 1
           ? 'babylai-bg-primary-500 !babylai-text-black-white-50 babylai-max-w-[220px]'
-          : 'babylai-bg-black-white-50'
+          : 'babylai-bg-black-white-50 dark:!babylai-bg-storm-dust-900'
       }`}
     >
       <Markdown
         components={{
           p: ({ node, ...props }: { node?: Element; [key: string]: any }) => (
             <p
-              className='babylai-m-0 babylai-leading-6 babylai-text-sm babylai-font-sans babylai-break-words'
+              className='babylai-m-0 babylai-leading-6 babylai-text-sm babylai-font-sans babylai-break-words dark:babylai-text-white'
               {...props}
             />
           ),

package/src/core/AblyService.ts

@@ -0,0 +1,137 @@
+import * as Ably from 'ably';
+
+export class ClientAblyService {
+  private static client: Ably.Realtime | null = null;
+  private static channel: Ably.RealtimeChannel | null = null;
+  private static isConnected: boolean = false;
+  private static sessionId: string | null = null;
+  private static messageUnsubscribe: (() => void) | null = null;
+
+  static async startConnection(sessionId: string, ablyToken: string, onMessageReceived: Function, tenantId: string) {
+    // Prevent multiple connections
+    if (this.isConnected && this.sessionId === sessionId) {
+      return;
+    }
+
+    // Close existing connection if connecting to a different session
+    if (this.isConnected && this.sessionId !== sessionId) {
+      await this.stopConnection();
+    }
+
+    try {
+      // Initialize Ably client with the token
+      this.client = new Ably.Realtime({
+        authUrl: undefined,
+        token: ablyToken,
+        autoConnect: true,
+      });
+
+      // Wait for connection to be established
+      await new Promise<void>((resolve, reject) => {
+        if (!this.client) {
+          reject(new Error('Failed to initialize Ably client'));
+          return;
+        }
+
+        this.client.connection.once('connected', () => {
+          this.isConnected = true;
+          this.sessionId = sessionId;
+          resolve();
+        });
+
+        this.client.connection.once('failed', (stateChange) => {
+          reject(new Error(`Ably connection failed: ${stateChange.reason?.message || 'Unknown error'}`));
+        });
+
+        this.client.connection.once('disconnected', (stateChange) => {
+          reject(new Error(`Ably connection disconnected: ${stateChange.reason?.message || 'Unknown error'}`));
+        });
+
+        // Set a timeout for connection
+        setTimeout(() => {
+          if (!this.isConnected) {
+            reject(new Error('Ably connection timeout'));
+          }
+        }, 10000);
+      });
+
+      // Subscribe to the session room
+      await this.joinChannel(sessionId, onMessageReceived, tenantId);
+    } catch (error) {
+      this.isConnected = false;
+      this.sessionId = null;
+      throw error;
+    }
+  }
+
+  private static async joinChannel(sessionId: string, onMessageReceived: Function, tenantId: string) {
+    if (!this.client) {
+      throw new Error('Chat client not initialized');
+    }
+
+    const roomName = `session:${tenantId}-${sessionId}`;
+
+    // Set up raw channel subscription for server messages
+    if (this.client) {
+      this.channel = this.client.channels.get(roomName);
+
+      // Subscribe to assistant/system responses
+      this.channel.subscribe('ReceiveMessage', (message) => {
+        try {
+          const messageContent =
+            typeof message.data === 'string' ? message.data : message.data?.content || message.data?.message;
+          const senderType = 3; // Assistant
+          const needsAgent = message.data?.needsAgent || false;
+
+          onMessageReceived(messageContent, senderType, needsAgent);
+        } catch (error) {
+          console.error('[AblyService] Error processing ReceiveMessage:', error);
+        }
+      });
+
+      await this.channel.attach();
+    }
+  }
+
+  static async stopConnection() {
+    try {
+      // Unsubscribe from room messages
+      if (this.messageUnsubscribe) {
+        this.messageUnsubscribe();
+        this.messageUnsubscribe = null;
+      }
+
+      // Unsubscribe and detach from raw channel
+      if (this.channel) {
+        this.channel.unsubscribe();
+        await this.channel.detach();
+        this.channel = null;
+      }
+
+      // Close Ably connection
+      if (this.client) {
+        this.client.close();
+        this.client = null;
+      }
+
+      this.isConnected = false;
+      this.sessionId = null;
+    } catch (error) {
+      console.error('[AblyService] Error stopping Ably connection:', error);
+      // Reset state even if there's an error
+      this.isConnected = false;
+      this.sessionId = null;
+      this.client = null;
+      this.channel = null;
+      this.messageUnsubscribe = null;
+    }
+  }
+
+  static isConnectionActive(): boolean {
+    return this.isConnected && this.client?.connection.state === 'connected';
+  }
+
+  static getConnectionState(): string {
+    return this.client?.connection.state || 'disconnected';
+  }
+}

package/src/index.ts

@@ -1,22 +1,22 @@
-import { configService } from './lib/config'
-import { HelpCenter } from './ui/help-center'
-import { TokenResponse } from './lib/types'
+import { configService } from './lib/config';
+import { HelpCenter } from './ui/help-center';
+import { TokenResponse } from './lib/types';
 
 export type HelpCenterConfig = {
-  baseUrl?: string
-  hubUrl?: string
-  getToken?: () => Promise<TokenResponse>
-}
+  baseUrl?: string;
+  hubUrl?: string;
+  getToken?: () => Promise<TokenResponse>;
+};
 
 export function initializeHelpCenter(config: HelpCenterConfig) {
-  configService.initialize(config)
+  configService.initialize(config);
 }
 
-export { HelpCenter }
+export { HelpCenter };
 
-export * from './lib/types'
-export * from './core/ApiService'
-export * from './core/SignalRService'
+export * from './lib/types';
+export * from './core/ApiService';
+export * from './core/AblyService';
 // export * from './globals.css'
 
-export { TokenService } from './core/token-service'
+export { TokenService } from './core/token-service';

package/src/lib/config.ts

@@ -1,10 +1,8 @@
-import { ClientSignalRService } from '../core/SignalRService';
 import { initializeAPI, getValidToken } from '../core/api';
 import { TokenResponse } from './types';
 
 type Config = {
   baseUrl?: string;
-  hubUrl?: string;
   tenantId?: string;
   apiKey?: string;
   getToken?: () => Promise<TokenResponse>;
@@ -26,7 +24,6 @@ class ConfigService {
   initialize(config: Config) {
     this.config = {
       baseUrl: config.baseUrl || 'https://babylai.net/api',
-      hubUrl: config.hubUrl || config.baseUrl || 'https://babylai.net/api',
       tenantId: config.tenantId,
       apiKey: config.apiKey,
       getToken: config.getToken,
@@ -38,10 +35,6 @@ class ConfigService {
     }
 
     initializeAPI(this.config.baseUrl || 'https://babylai.net/api', this.config.getToken);
-
-    // Initialize SignalR
-    const hubUrl = this.config.hubUrl || this.config.baseUrl || 'https://babylai.net/api';
-    ClientSignalRService.initialize(hubUrl);
   }
 
   getConfig(): Config {

package/src/ui/chatbot-popup/chat-window-screen/footer.tsx

@@ -9,26 +9,26 @@ interface ChatWindowFooterProps {
   handleKeyDown: (e: React.KeyboardEvent) => void;
   handleSendMessage: () => void;
   isLoading: boolean;
-  isSignalRConnected: boolean;
+  isAblyConnected: boolean;
 }
 
 const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
   const { t, dir } = useLocalTranslation();
   return (
-    <footer className='babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white babylai-m-4 md:babylai-m-6 md:babylai-py-3 md:babylai-px-4'>
+    <footer className='babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white dark:!babylai-bg-storm-dust-900 babylai-m-4 md:babylai-m-6 md:babylai-py-3 md:babylai-px-4'>
       <input
         type='text'
         value={props.inputMessage}
         onChange={(e) => props.setInputMessage(e.target.value)}
         onKeyDown={props.handleKeyDown}
         placeholder={t('homeSdk.placeholder')}
-        className='babylai-flex-1 babylai-py-2 babylai-px-4 babylai-bg-transparent babylai-outline-none babylai-text-sm'
+        className='babylai-flex-1 babylai-py-2 babylai-px-4 babylai-bg-transparent babylai-outline-none babylai-text-sm dark:babylai-text-white'
       />
       <Button
         variant='default'
         size='icon'
         onClick={props.handleSendMessage}
-        disabled={props?.isLoading || !props.isSignalRConnected}
+        disabled={props?.isLoading || !props.isAblyConnected}
         className='babylai-rounded-full babylai-bg-purple-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 babylai-disabled:babylai-opacity-50'
       >
         <EnvelopeIcon className={`babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`} />

package/src/ui/chatbot-popup/chat-window-screen/header.tsx

@@ -20,21 +20,21 @@ const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
   const isRTL = i18n.dir() === 'rtl'
 
   return (
-    <header className="babylai-flex babylai-w-full babylai-items-center babylai-py-[18px] babylai-px-[18px] babylai-justify-between babylai-relative babylai-bg-black-white-50 babylai-rounded-t-3xl">
+    <header className="babylai-flex babylai-w-full babylai-items-center babylai-py-[18px] babylai-px-[18px] babylai-justify-between babylai-relative babylai-bg-black-white-50 dark:!babylai-bg-storm-dust-900 babylai-rounded-t-3xl">
       <div className="babylai-flex babylai-items-center babylai-gap-2">
-        <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10" onClick={props.handleBack}>
-          <ArrowRight className={`!babylai-w-[12px] babylai-h-[12px] ${isRTL ? '' : 'babylai-rotate-180'} babylai-text-primary-500`} />{' '}
+        <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10 dark:babylai-bg-storm-dust-950" onClick={props.handleBack}>
+          <ArrowRight className={`!babylai-w-[12px] babylai-h-[12px] ${isRTL ? '' : 'babylai-rotate-180'} babylai-text-primary-500 dark:babylai-text-white`} />{' '}
         </Button>
         <div className="babylai-relative babylai-mr-2">
-          <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10" onClick={() => setShowMenu(!showMenu)}>
-            <ThreeDots className="babylai-w-[14px] babylai-h-[4px] babylai-text-primary-500" />
+          <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10 dark:babylai-bg-storm-dust-950" onClick={() => setShowMenu(!showMenu)}>
+            <ThreeDots className="babylai-w-[14px] babylai-h-[4px] babylai-text-primary-500 dark:babylai-text-white" />
           </Button>
 
           {showMenu && (
-            <div className="babylai-absolute babylai-top-10 babylai-left-0 babylai-w-48 babylai-rounded-md babylai-shadow-lg babylai-bg-white babylai-ring-1 babylai-ring-black babylai-ring-opacity-5 babylai-z-10">
+            <div className="babylai-absolute babylai-top-10 babylai-start-0 babylai-w-48 babylai-rounded-md babylai-shadow-lg babylai-bg-white dark:!babylai-bg-storm-dust-950 babylai-ring-1 babylai-ring-black babylai-ring-opacity-5 babylai-z-10">
               <div className="babylai-py-1" role="menu" aria-orientation="vertical">
                 <button
-                  className="babylai-block babylai-px-4 babylai-py-2 babylai-text-sm babylai-text-gray-700 babylai-hover:babylai-bg-gray-100 babylai-w-full babylai-text-left"
+                  className="babylai-block babylai-px-4 babylai-py-2 babylai-text-sm babylai-text-gray-700 dark:babylai-text-white babylai-hover:babylai-bg-gray-100 babylai-w-full babylai-text-left"
                   role="menuitem"
                   onClick={(e) => {
                     e.stopPropagation()
@@ -50,7 +50,7 @@ const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
         </div>
       </div>
       <div className="babylai-flex babylai-items-center babylai-gap-2 babylai-absolute babylai-left-1/2 babylai-transform babylai--translate-x-1/2">
-        <Logo className="babylai-w-[124px] babylai-h-auto" />
+        <Logo className="babylai-w-[124px] babylai-h-auto dark:babylai-text-white" />
       </div>
     </header>
   )

package/src/ui/chatbot-popup/chat-window-screen/index.tsx

@@ -11,7 +11,7 @@ interface ChatWindowProps {
   messages: Message[];
   assistantStatus: string;
   needsAgent: boolean;
-  isSignalRConnected: boolean;
+  isAblyConnected: boolean;
 }
 
 // Memoize individual message component to prevent unnecessary re-renders
@@ -42,13 +42,13 @@ const MessageComponent = React.memo(
         )}
         <div className={`babylai-mb-4 babylai-flex ${textDirection}`}>
           {isFirstInSequence && message.senderType === 3 && (
-            <div className='babylai-flex-shrink-0 babylai-mr-3'>
+            <div className='babylai-flex-shrink-0 babylai-me-3'>
               <div className='babylai-w-8 babylai-h-8 babylai-rounded-full babylai-bg-purple-500 babylai-flex babylai-items-center babylai-justify-center'>
                 <LogoIcon className='babylai-w-4 babylai-h-4 babylai-text-white' />
               </div>
             </div>
           )}
-          {!isFirstInSequence && <div className='babylai-flex-shrink-0 babylai-mr-3 babylai-w-8'></div>}
+          {!isFirstInSequence && <div className='babylai-flex-shrink-0 babylai-me-3 babylai-w-8'></div>}
 
           <AgentResponse
             messageContent={message.messageContent}
@@ -70,13 +70,13 @@ const TypingIndicator = React.memo(({ firstHumanAgentIndex }: { firstHumanAgentI
 
   return (
     <div className='babylai-mb-4 babylai-flex'>
-      <div className='babylai-flex-shrink-0 babylai-mr-3'>
+      <div className='babylai-flex-shrink-0 babylai-me-3'>
         <div className='babylai-w-8 babylai-h-8 babylai-rounded-full babylai-flex babylai-items-center babylai-justify-center'>
           <img src={LoadingGif} alt='Loading' className='babylai-w-8 babylai-h-8' />
         </div>
       </div>
-      <div className='babylai-max-w-[80%] babylai-rounded-2xl babylai-p-4 babylai-bg-white'>
-        <p className='babylai-text-sm babylai-opacity-70'>...</p>
+      <div className='babylai-max-w-[80%] babylai-rounded-2xl babylai-p-4 babylai-bg-white dark:!babylai-bg-storm-dust-900'>
+        <p className='babylai-text-sm babylai-opacity-70 dark:babylai-text-white'>...</p>
       </div>
     </div>
   );
@@ -85,7 +85,7 @@ const TypingIndicator = React.memo(({ firstHumanAgentIndex }: { firstHumanAgentI
 TypingIndicator.displayName = 'TypingIndicator';
 
 export const ChatWindow = React.memo(
-  ({ onSendMessage, messages, assistantStatus = 'loading', isSignalRConnected }: ChatWindowProps) => {
+  ({ onSendMessage, messages, assistantStatus = 'loading', isAblyConnected }: ChatWindowProps) => {
     const [inputMessage, setInputMessage] = useState('');
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -131,7 +131,7 @@ export const ChatWindow = React.memo(
 
     const handleKeyDown = useCallback(
       (e: React.KeyboardEvent) => {
-        if (e.key === 'Enter' && !e.shiftKey && isSignalRConnected) {
+        if (e.key === 'Enter' && !e.shiftKey && isAblyConnected) {
           e.preventDefault();
           if (inputMessage.trim() && assistantStatus !== 'typing') {
             onSendMessage(inputMessage);
@@ -139,7 +139,7 @@ export const ChatWindow = React.memo(
           }
         }
       },
-      [inputMessage, onSendMessage, assistantStatus, isSignalRConnected]
+      [inputMessage, onSendMessage, assistantStatus, isAblyConnected]
     );
 
     // Memoize the first human agent index calculation
@@ -187,7 +187,7 @@ export const ChatWindow = React.memo(
           handleSendMessage={handleSendMessage}
           setInputMessage={setInputMessage}
           isLoading={isLoading}
-          isSignalRConnected={isSignalRConnected}
+          isAblyConnected={isAblyConnected}
         />
       </>
     );

package/src/ui/chatbot-popup/loading-screen/index.tsx

@@ -11,13 +11,13 @@ interface ChatBotLoadingScreenProps {
 
 const ChatBotLoadingScreen: React.FC<ChatBotLoadingScreenProps> = (props) => {
   return (
-    <div className="babylai-w-full babylai-h-full babylai-bg-black-white-50 babylai-rounded-3xl babylai-shadow-lg babylai-flex babylai-flex-col">
+    <div className="babylai-w-full babylai-h-full babylai-bg-black-white-50 dark:babylai-bg-storm-dust-950 babylai-rounded-3xl babylai-shadow-lg babylai-flex babylai-flex-col">
       <div
         className={cn(
           'babylai-rounded-3xl babylai-h-full babylai-flex babylai-flex-col babylai-py-6 md:babylai-py-8 babylai-px-6 gap-4 md:gap-8',
           {
             'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': !props.isShowList,
-            'babylai-bg-black-white-100': props.isShowList
+            'babylai-bg-black-white-100 dark:babylai-bg-storm-dust-950': props.isShowList
           }
         )}
       >

package/src/ui/chatbot-popup/options-list-screen/expanded-option.tsx

@@ -15,7 +15,7 @@ const ExpandedOption: React.FC<ExpandedOptionProps> = ({ option, handleStartChat
     <>
       <CardContent className="babylai-transition-all babylai-duration-300 babylai-ease-in-out babylai-flex babylai-flex-col babylai-gap-1">
         {option.paragraphs.map((paragraph, index) => (
-          <p key={index} className="babylai-font-semibold babylai-text-base babylai-text-black-white-800">
+          <p key={index} className="babylai-font-semibold babylai-text-base babylai-text-black-white-800 dark:babylai-text-white">
             {paragraph}
           </p>
         ))}

package/src/ui/chatbot-popup/options-list-screen/header.tsx

@@ -24,7 +24,7 @@ const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({ handleBack, showH
       <Button
         variant='rounded-icon'
         size='icon'
-        className='!babylai-w-12 !babylai-h-12  babylai-bg-black-white-50 babylai-relative babylai-z-10'
+        className='!babylai-w-12 !babylai-h-12  babylai-bg-black-white-50 dark:babylai-bg-storm-dust-900 babylai-relative babylai-z-10'
         onClick={handleBack}
       >
         {showHelpScreen ? (

package/src/ui/chatbot-popup/options-list-screen/index.tsx

@@ -34,7 +34,9 @@ const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
     <div className='babylai-px-8 babylai-pb-12 babylai-pt-8 babylai-overflow-y-auto  babylai-h-full'>
       <OptionsListHeader handleBack={handleBack} showHelpScreen={showHelpScreen} />
 
-      <h1 className='babylai-text-4xl  babylai-font-bold babylai-text-black-white-800 mb-4'>{helpScreen?.title}</h1>
+      <h1 className='babylai-text-4xl babylai-font-bold mb-4 babylai-text-black-white-800 dark:babylai-text-white'>
+        {helpScreen?.title}
+      </h1>
 
       {helpScreen && (
         <div className='babylai-flex babylai-flex-col babylai-gap-3 babylai-mt-3 babylai-mb-3'>
@@ -42,7 +44,7 @@ const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
             <Card
               key={option.id}
               variant='rounded'
-              className='babylai-cursor-pointer babylai-transition-all babylai-hover:babylai-shadow-md !babylai-px-2 !babylai-py-1'
+              className='babylai-cursor-pointer babylai-transition-all babylai-hover:babylai-shadow-md !babylai-px-2 !babylai-py-1 dark:!babylai-bg-storm-dust-900'
               onClick={() => handleToggleExpandOption(option)}
             >
               <OptionCard title={option.title} />

package/src/ui/chatbot-popup/options-list-screen/option-card.tsx

@@ -12,7 +12,7 @@ const OptionCard: React.FC<OptionCardProps> = (props) => {
           const isLTR = i18n.dir() === 'ltr';
     return (
         <div className="babylai-flex babylai-items-center babylai-justify-between babylai-p-2">
-            <p className="babylai-text-sm babylai-font-medium babylai-text-black-white-800">{props.title}</p>
+            <p className="babylai-text-sm babylai-font-medium babylai-text-black-white-800 dark:babylai-text-white">{props.title}</p>
             <Button variant="rounded-icon" size="icon" className="babylai-text-primary-500 hover:babylai-bg-primary-100">
                 <ArrowRight  className={`babylai-w-[12px] babylai-h-[12px] ${
       isLTR ? '' : 'babylai-rotate-180'