diff --git a/copilot-widget/index.html b/copilot-widget/index.html
index 6d24eb264..75b9fbd85 100644
--- a/copilot-widget/index.html
+++ b/copilot-widget/index.html
@@ -63,7 +63,7 @@ <h2>
     <div id="opencopilot-root"></div>
 
     <script>
-      const token = "D3BCYwikexJ0hF1Z";
+      const token = "9Mq2t3kepm1F5Akr";
       const apiUrl = "https://api.opencopilot.so/backend";
       const socketUrl = "https://api.opencopilot.so";
       const sharedConfig = {
@@ -74,13 +74,16 @@ <h2>
         defaultOpen: true, // optional
         language: "en", // optional
         warnBeforeClose: true,
+        debug: true,
         headers: {
           // optional
           // Authorization: "Bearer BQAlIe479yo16aXf",
+          Cookie: `SESSIONID_MYM=pbljd8rnim9pt46d652olit663;`,
         },
         queryParams: {
           // optional
           // passing extra query params to the backend along with every user message.
+        organizationId: 'org_7658431',
         },
         bot: {
           name: "AI Bot",
diff --git a/copilot-widget/lib/@components/Fallback.component.tsx b/copilot-widget/lib/@components/Fallback.component.tsx
index d8c930a7f..23be5a5e2 100644
--- a/copilot-widget/lib/@components/Fallback.component.tsx
+++ b/copilot-widget/lib/@components/Fallback.component.tsx
@@ -3,16 +3,14 @@ import type { ComponentProps } from "../contexts/componentRegistery";
 type Props = ComponentProps<unknown>;
 
 /**
- * The Basic Text component
+ * The Basic Fallback component (Rendered when Debug is True and the component key is not found)
  */
 export function Fallback(props: Props) {
   return (
-    <div className="space-y-2 flex-1">
-      <div className="w-full max-w-full overflow-auto">
-        <code dir="auto" className="text-xs leading-tight">
-          {JSON.stringify(props, null, 1)}
-        </code>
-      </div>
+    <div className="w-full max-w-full overflow-auto shrink-0">
+      <pre dir="auto" className="text-xs leading-tight">
+        {JSON.stringify(props, null, 1)}
+      </pre>
     </div>
   );
 }
diff --git a/copilot-widget/lib/@components/Handoff.component.tsx b/copilot-widget/lib/@components/Handoff.component.tsx
new file mode 100644
index 000000000..010e92de8
--- /dev/null
+++ b/copilot-widget/lib/@components/Handoff.component.tsx
@@ -0,0 +1,12 @@
+import { ComponentProps, HandoffPayloadType } from "..";
+
+type Props = ComponentProps<HandoffPayloadType>;
+
+export function HandoffComponentRenderer(props: Props) {
+  return (
+    <div className="w-full">
+      <span>{props.data.sentiment}</span>
+      <span>{props.data.summery}</span>
+    </div>
+  );
+}
diff --git a/copilot-widget/lib/@components/Text.component.tsx b/copilot-widget/lib/@components/Text.component.tsx
index be3df0f8e..8d495ceb5 100644
--- a/copilot-widget/lib/@components/Text.component.tsx
+++ b/copilot-widget/lib/@components/Text.component.tsx
@@ -1,6 +1,7 @@
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import type { ComponentProps } from "../contexts/componentRegistery";
+import { BotMessageWrapper } from "../components/Messages";
 
 type Props = ComponentProps<{
   message: string;
@@ -13,17 +14,19 @@ export function Text({ id, data }: Props) {
   const { message } = data;
 
   return (
-    <div className="space-y-2 flex-1">
-      <div className=" w-fit">
-        <div dir="auto">
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            className="prose prose-slate font-medium text-sm prose-sm prose-h1:font-medium prose-h2:font-normal prose-headings:my-1 max-w-full"
-          >
-            {message}
-          </ReactMarkdown>
+    <BotMessageWrapper id={id}>
+      <div className="space-y-2 flex-1">
+        <div className=" w-fit">
+          <div dir="auto">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              className="prose prose-slate font-medium text-sm prose-sm prose-h1:font-medium prose-h2:font-normal prose-headings:my-1 max-w-full"
+            >
+              {message}
+            </ReactMarkdown>
+          </div>
         </div>
       </div>
-    </div>
+    </BotMessageWrapper>
   );
 }
diff --git a/copilot-widget/lib/components/ChatHeader.tsx b/copilot-widget/lib/components/ChatHeader.tsx
index 73f75a1cf..f3464f77a 100644
--- a/copilot-widget/lib/components/ChatHeader.tsx
+++ b/copilot-widget/lib/components/ChatHeader.tsx
@@ -1,5 +1,5 @@
 import { useWidgetState } from "../contexts/WidgetState";
-import { AlertTriangle, CircleDashed, X } from "lucide-react";
+import { AlertTriangle, X } from "lucide-react";
 import {
   Dialog,
   DialogClose,
@@ -11,7 +11,6 @@ import { Button } from "./Button";
 import { useInitialData } from "@lib/hooks/useInitialData";
 import { useLang } from "@lib/contexts/LocalesProvider";
 import { useConfigData } from "@lib/contexts/ConfigData.tsx";
-import { useSocket } from "@lib/contexts/SocketProvider";
 
 function WarnBeforeCloseDialog({ onClose }: { onClose: () => void }) {
   const { get } = useLang();
@@ -42,41 +41,12 @@ function WarnBeforeCloseDialog({ onClose }: { onClose: () => void }) {
     </Dialog>
   );
 }
-function DisconnedtedAlert() {
-  const { state } = useSocket();
-  if (state.state === "disconnected") {
-    return (
-      <div className="bg-rose-200 p-1 px-2 text-rose-500 flex items-start gap-2">
-        <AlertTriangle className="text-xl size-[1em] text-rose-800" />
-        <span>
-          The connection to the server has been lost. Please wait while we try
-          to reconnect.
-        </span>
-      </div>
-    );
-  }
-  return null;
-}
-
-function ConnectingAlert() {
-  const { state } = useSocket();
-  if (state.state === "retrying") {
-    return (
-      <div className="bg-yellow-200 p-1 px-2 text-yellow-500 flex items-start gap-2">
-        <CircleDashed className="text-xl size-[1em] animate-spin text-yellow-800" />
-        <span>
-          We are trying to reconnect to the server. Please wait a moment.
-        </span>
-      </div>
-    );
-  }
-  return null;
-}
 
 export default function ChatHeader() {
   const [, , SetState] = useWidgetState();
   const { data } = useInitialData();
   const config = useConfigData();
+  const debug = config.debug ?? false;
 
   const onClose = () => {
     SetState(false);
@@ -89,9 +59,12 @@ export default function ChatHeader() {
   return (
     <header className="border-b border-b-black/10 w-full">
       <div className="p-2 w-full flex items-center justify-between">
-        <h1 className="font-semibold text-sm">
-          {data?.bot_name || "OpenCopilot"}
-        </h1>
+        <div className="flex items-center gap-2">
+          <h1 className="font-semibold text-sm">
+            {data?.bot_name || "OpenCopilot"}
+          </h1>
+          {debug && <span className="py-0.5 px-1 bg-primary font-semibold text-[10px] rounded-lg text-white">DEBUG</span>}
+        </div>
         <div className="flex items-center gap-3">
           {config?.warnBeforeClose === false ? (
             <button onClick={onClose}>
@@ -102,10 +75,6 @@ export default function ChatHeader() {
           )}
         </div>
       </div>
-      <div className="alerts w-full text-xs">
-        <DisconnedtedAlert />
-        <ConnectingAlert />
-      </div>
     </header>
   );
 }
diff --git a/copilot-widget/lib/components/Messages.tsx b/copilot-widget/lib/components/Messages.tsx
index 5c053c07c..2f6fe03fd 100644
--- a/copilot-widget/lib/components/Messages.tsx
+++ b/copilot-widget/lib/components/Messages.tsx
@@ -4,7 +4,6 @@ import { formatTimeFromTimestamp } from "../utils/time";
 import { getLast, isEmpty } from "@lib/utils/utils";
 import { useConfigData } from "@lib/contexts/ConfigData";
 import { useChatState } from "@lib/contexts/statefulMessageHandler";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./ToolTip";
 
 export function BotIcon({ error }: { error?: boolean }) {
   const config = useConfigData();
@@ -48,16 +47,7 @@ function UserAvatar() {
 function User() {
   const config = useConfigData();
 
-  return (
-    <Tooltip>
-      <TooltipContent hidden={!config?.user} side="top" align="center">
-        <span>{config?.user?.name}</span>
-      </TooltipContent>
-      <TooltipTrigger asChild>
-        <UserAvatar />
-      </TooltipTrigger>
-    </Tooltip>
-  );
+  return <UserAvatar />;
 }
 
 export function BotMessageWrapper({
diff --git a/copilot-widget/lib/components/ToolTip.tsx b/copilot-widget/lib/components/ToolTip.tsx
deleted file mode 100644
index a2da719fd..000000000
--- a/copilot-widget/lib/components/ToolTip.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { forwardRef, ComponentProps } from "react";
-import cn from "../utils/cn";
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipRoot = TooltipPrimitive.Root;
-
-const Tooltip = forwardRef(
-  ({ children, ...rest }: ComponentProps<typeof TooltipRoot>, ref) => {
-    return (
-      <TooltipPrimitive.Provider>
-        <TooltipRoot {...rest}>{children}</TooltipRoot>
-      </TooltipPrimitive.Provider>
-    );
-  }
-);
-
-Tooltip.displayName = "ToolTip";
-const TooltipContent = forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
-    arrowClassName?: string;
-  }
->(({ className, children, sideOffset = 0, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    dir="auto"
-    className={cn(
-      "text-white rounded-md font-medium px-2 bg-black z-[50000] py-1 overflow-hidden shadow min-w-fit max-w-[15rem] p-1 text-xs",
-      "animate-in  fade-in-0 slide-in-from-bottom-5 data-[state=closed]:animate-out data-[state=closed]:slide-in-from-top-0",
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </TooltipPrimitive.Content>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent };
diff --git a/copilot-widget/lib/components/VoiceRecorder.tsx b/copilot-widget/lib/components/VoiceRecorder.tsx
index 65389cc28..40748486c 100644
--- a/copilot-widget/lib/components/VoiceRecorder.tsx
+++ b/copilot-widget/lib/components/VoiceRecorder.tsx
@@ -1,5 +1,4 @@
 import { MicIcon, Square } from "lucide-react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./ToolTip";
 import { useAxiosInstance } from "@lib/contexts/axiosInstance";
 import { now } from "@lib/utils/time";
 import { useEffect } from "react";
@@ -53,25 +52,18 @@ export function VoiceRecorder({
   }
 
   return (
-    <Tooltip open={isRecording}>
-      <TooltipContent sideOffset={5} side="top">
-        {get("recording")} {recordingTime}s
-      </TooltipContent>
-      <TooltipTrigger asChild>
-        <button
-          onClick={handleClick}
-          className={cn(
-            "flex items-center justify-center shrink-0 rounded-full size-6 [&>svg]:size-4",
-            disabled ? "bg-rose-500" : "bg-emerald-500"
-          )}
-        >
-          {isRecording ? (
-            <Square strokeLinecap="round" className="text-accent size-[1em]" />
-          ) : (
-            <MicIcon strokeLinecap="round" className="text-white size-[1em]" />
-          )}
-        </button>
-      </TooltipTrigger>
-    </Tooltip>
+    <button
+      onClick={handleClick}
+      className={cn(
+        "flex items-center justify-center shrink-0 rounded-full size-6 [&>svg]:size-4",
+        disabled ? "bg-rose-500" : "bg-emerald-500"
+      )}
+    >
+      {isRecording ? (
+        <Square strokeLinecap="round" className="text-accent size-[1em]" />
+      ) : (
+        <MicIcon strokeLinecap="round" className="text-white size-[1em]" />
+      )}
+    </button>
   );
 }
diff --git a/copilot-widget/lib/contexts/componentRegistery.ts b/copilot-widget/lib/contexts/componentRegistery.ts
index 7abb96f1d..151842707 100644
--- a/copilot-widget/lib/contexts/componentRegistery.ts
+++ b/copilot-widget/lib/contexts/componentRegistery.ts
@@ -1,9 +1,11 @@
 import React from "react";
+import type { BotMessageType } from "./messageHandler";
+
 import { Fallback } from "@lib/@components/Fallback.component";
 import { FormComponent } from "@lib/@components/Form.component";
 import { Loading } from "@lib/@components/Loading.component";
 import { Text } from "@lib/@components/Text.component";
-import type { BotMessageType } from "./messageHandler";
+import { HandoffComponentRenderer } from "@lib/@components/Handoff.component";
 
 export type ComponentProps<TData> = BotMessageType<TData>;
 
@@ -15,6 +17,7 @@ export type ComponentType = {
 type OptionsType = {
   components?: ComponentType[];
 };
+
 /**
  * this a singleton  class helps me to easily control the components present/available in the widget.
  * it also manges the various types of components to be added along the way.
@@ -37,6 +40,10 @@ export class ComponentRegistery {
       key: "LOADING",
       component: Loading,
     },
+    {
+      key: "HANDOFF",
+      component: HandoffComponentRenderer,
+    },
   ] as const;
 
   constructor(opts: OptionsType) {
diff --git a/copilot-widget/lib/index.ts b/copilot-widget/lib/index.ts
index df7404ff0..4f5477205 100644
--- a/copilot-widget/lib/index.ts
+++ b/copilot-widget/lib/index.ts
@@ -1,3 +1,4 @@
+export { BotMessageWrapper } from "./components/Messages";
 export { default as Root } from "./Root";
 export { CopilotWidget } from "./CopilotWidget";
 export type {
diff --git a/copilot-widget/lib/screens/ChatScreen.tsx b/copilot-widget/lib/screens/ChatScreen.tsx
index 2c1db05f3..de235a5ce 100644
--- a/copilot-widget/lib/screens/ChatScreen.tsx
+++ b/copilot-widget/lib/screens/ChatScreen.tsx
@@ -1,10 +1,6 @@
 import ChatHeader from "../components/ChatHeader";
 import { ComponentType, useEffect, useRef } from "react";
-import {
-  BotMessageWrapper,
-  BotInitialMessage,
-  UserMessage,
-} from "../components/Messages";
+import { BotInitialMessage, UserMessage } from "../components/Messages";
 import useScrollToPercentage from "../hooks/useScrollTo";
 import ChatInputFooter from "../components/ChatInputFooter";
 import { useConfigData } from "../contexts/ConfigData";
@@ -61,13 +57,12 @@ export default function ChatScreen() {
                 }>;
 
                 return (
-                  <BotMessageWrapper id={message.id} key={index}>
-                    <Component
-                      {...message}
-                      data={message.data ?? {}}
-                      id={message.id}
-                    />
-                  </BotMessageWrapper>
+                  <Component
+                    {...message}
+                    data={message.data ?? {}}
+                    id={message.id}
+                    key={index}
+                  />
                 );
               } else if (message.from === "user") {
                 return (
diff --git a/copilot-widget/lib/utils/createSocket.ts b/copilot-widget/lib/utils/createSocket.ts
index 9eac61c12..a0f8d9de2 100644
--- a/copilot-widget/lib/utils/createSocket.ts
+++ b/copilot-widget/lib/utils/createSocket.ts
@@ -1,4 +1,4 @@
-import { io } from "socket.io-client";
+import { Socket, io } from "socket.io-client";
 
 interface ConfigType {
   socketUrl: string;
@@ -6,12 +6,18 @@ interface ConfigType {
   sessionId: string;
 }
 
+const sockets = new Map<string, Socket>();
+
 export function createSocketClient({
   socketUrl,
   token,
   sessionId,
 }: ConfigType) {
-  return io(socketUrl, {
+  const socket = sockets.get(sessionId + token);
+  if (socket) {
+    return socket;
+  }
+  const newSocket = io(socketUrl, {
     autoConnect: false,
     transports: ["websocket"],
     extraHeaders: {
@@ -19,4 +25,6 @@ export function createSocketClient({
       "X-Session-Id": sessionId,
     },
   });
+  sockets.set(sessionId + token, newSocket);
+  return newSocket;
 }
diff --git a/copilot-widget/package.json b/copilot-widget/package.json
index 51c1f7017..44ac909cc 100644
--- a/copilot-widget/package.json
+++ b/copilot-widget/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@openchatai/copilot-widget",
   "private": false,
-  "version": "2.8.6",
+  "version": "2.8.7",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -20,7 +20,6 @@
   "devDependencies": {
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-tooltip": "^1.0.7",
     "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^20.11.14",
     "@types/react": "^18.2.48",
@@ -44,7 +43,7 @@
     "react-textarea-autosize": "^8.5.3",
     "release-it": "^17.1.1",
     "remark-gfm": "^3.0.1",
-    "socket.io-client": "^4.7.4",
+    "socket.io-client": "^4.7.5",
     "swr": "^2.2.4",
     "tailwind-merge": "^1.14.0",
     "tailwind-scrollbar": "^3.0.5",
diff --git a/copilot-widget/pnpm-lock.yaml b/copilot-widget/pnpm-lock.yaml
index 5d48ad173..05f94be61 100644
--- a/copilot-widget/pnpm-lock.yaml
+++ b/copilot-widget/pnpm-lock.yaml
@@ -31,9 +31,6 @@ devDependencies:
   '@radix-ui/react-slot':
     specifier: ^1.0.2
     version: 1.0.2(@types/react@18.2.48)(react@18.2.0)
-  '@radix-ui/react-tooltip':
-    specifier: ^1.0.7
-    version: 1.0.7(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
   '@tailwindcss/typography':
     specifier: ^0.5.10
     version: 0.5.10(tailwindcss@3.4.1)
@@ -104,8 +101,8 @@ devDependencies:
     specifier: ^3.0.1
     version: 3.0.1
   socket.io-client:
-    specifier: ^4.7.4
-    version: 4.7.4
+    specifier: ^4.7.5
+    version: 4.7.5
   swr:
     specifier: ^2.2.4
     version: 2.2.4(react@18.2.0)
@@ -1200,38 +1197,6 @@ packages:
       react: 18.2.0
     dev: true
 
-  /@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.9
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.48)(react@18.2.0):
     resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
     peerDependencies:
@@ -1320,27 +1285,6 @@ packages:
       react: 18.2.0
     dev: true
 
-  /@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.9
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/rect@1.0.1:
     resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
     dependencies:
@@ -5586,8 +5530,8 @@ packages:
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
     dev: true
 
-  /socket.io-client@4.7.4:
-    resolution: {integrity: sha512-wh+OkeF0rAVCrABWQBaEjLfb7DVPotMbu0cgWgyR0v6eA4EoVnAwcIeIbcdTE3GT/H3kbdLl7OoH2+asoDRIIg==}
+  /socket.io-client@4.7.5:
+    resolution: {integrity: sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==}
     engines: {node: '>=10.0.0'}
     dependencies:
       '@socket.io/component-emitter': 3.1.0
diff --git a/copilot-widget/scripts/update-pilot.sh b/copilot-widget/scripts/update-pilot.sh
deleted file mode 100755
index 7b3032162..000000000
--- a/copilot-widget/scripts/update-pilot.sh
+++ /dev/null
@@ -1,4 +0,0 @@
-echo "Updating pilot..."
-pnpm install 
-echo "Updating dashboard-pilot..."
-pnpm update-dashboard-pilot
diff --git a/dashboard/app/(authenticated)/(copilot)/copilot/[copilot_id]/page.tsx b/dashboard/app/(authenticated)/(copilot)/copilot/[copilot_id]/page.tsx
index 6627ddd4a..db92e5eea 100644
--- a/dashboard/app/(authenticated)/(copilot)/copilot/[copilot_id]/page.tsx
+++ b/dashboard/app/(authenticated)/(copilot)/copilot/[copilot_id]/page.tsx
@@ -47,7 +47,7 @@ function InstallationSection() {
           </p>
           <CodeBlock
             code={`
-<script src="${baseUrl}/pilot.js"></script>
+            <script src="https://unpkg.com/@openchatai/copilot-widget@latest/dist-embed/pilot.js"></script>
 <script> 
       const options = {
         apiUrl: "${baseUrl}/backend", 
diff --git a/dashboard/package.json b/dashboard/package.json
index 757628d20..c263bb0a4 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
     "@kbox-labs/react-echarts": "^1.0.3",
-    "@openchatai/copilot-widget": "^2.8.6",
+    "@openchatai/copilot-widget": "^2.8.7",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
diff --git a/dashboard/pnpm-lock.yaml b/dashboard/pnpm-lock.yaml
index 027b38632..16c0e4c81 100644
--- a/dashboard/pnpm-lock.yaml
+++ b/dashboard/pnpm-lock.yaml
@@ -12,8 +12,8 @@ dependencies:
     specifier: ^1.0.3
     version: 1.0.3(echarts@5.4.3)(react@18.2.0)
   '@openchatai/copilot-widget':
-    specifier: ^2.8.6
-    version: 2.8.6(react@18.2.0)
+    specifier: ^2.8.7
+    version: 2.8.7(react@18.2.0)
   '@radix-ui/react-accordion':
     specifier: ^1.1.2
     version: 1.1.2(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0)
@@ -706,8 +706,8 @@ packages:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.15.0
 
-  /@openchatai/copilot-widget@2.8.6(react@18.2.0):
-    resolution: {integrity: sha512-ZmsjmnjP7MWuscYNBoclXg8356keFaBcFENjhSUo6PRH34x2yLIoQ7NsxPakcx+Th+vKtqbm2CAl3fLX0AbTbA==}
+  /@openchatai/copilot-widget@2.8.7(react@18.2.0):
+    resolution: {integrity: sha512-1g6JwP3ASbASIs3agqHIygaugvpqSWhKn9GCVUTFp6xvqGly1s+fsofaCetzBoNBZ6CkfueuqcWRB0/uD8pbUw==}
     peerDependencies:
       react: ^18.x
     dependencies: