@bikdotai/bik-component-library 0.0.870-beta.1 → 0.0.871

package/dist/esm/components/bik-copilot/CopilotPanel.js

@@ -1,19 +1,19 @@
-import { jsxs as r, jsx as t, Fragment as Oe } from "react/jsx-runtime";
-import Ue from "../../assets/icons/arrow_down.svg.js";
+import { jsxs as r, jsx as t, Fragment as ae } from "react/jsx-runtime";
+import Ve from "../../assets/icons/arrow_down.svg.js";
 import C from "../../assets/icons/bik_ai_stars_icon.svg.js";
-import de from "../../assets/icons/cross.svg.js";
-import Ve from "../../assets/icons/refresh.svg.js";
-import De, { useState as u, useRef as p, useEffect as S } from "react";
+import se from "../../assets/icons/cross.svg.js";
+import Ke from "../../assets/icons/refresh.svg.js";
+import Xe, { useState as p, useRef as h, useEffect as m } from "react";
 import { COLORS as f } from "../../constants/Theme.js";
-import { TitleSmall as Ke, BodyCaption as ae, BodySecondary as Xe } from "../TypographyStyle.js";
-import { CopilotFeedbackModal as Ge } from "./CopilotFeedbackModal.js";
-import { PanelContainer as ze, PanelHeader as Je, HeaderAvatar as Ze, HeaderText as qe, HeaderTitleRow as Qe, HeaderBadge as Ye, HeaderActions as et, IconAction as he, MessagesViewport as tt, MessagesArea as rt, EmptyState as ot, EmptyStateIcon as nt, SuggestionList as it, SuggestionChip as lt, HistoryLoader as ct, MessageBubble as dt, ToolCtaList as at, ToolCtaLink as ht, MessageTimestamp as st, InterruptedNote as ut, MessageActions as pt, MessageAction as x, FollowUpList as ft, FollowUpsLabel as kt, FollowUpChip as wt, ThinkingBubble as Ct, ThinkingLabel as bt, ScrollFade as yt, JumpToLatestButton as mt, ErrorBanner as vt, InputArea as gt, AttachmentChip as Tt, AttachmentText as St, AttachmentRemove as xt, InputWrapper as At, MessageInput as Mt, SendButton as It, Disclaimer as Lt } from "./CopilotPanel.styled.js";
-import { isCopilotRegeneratePrompt as Bt } from "./copilotRegenerate.js";
-import { buildCopilotSelectionPrompt as Rt } from "./copilotSelectionPrompt.js";
-import { renderCopilotMarkdown as Ht } from "./utils/markdown.js";
-import { toolResultCtas as Ft } from "./utils/toolCtas.js";
-import { DotPulse as se } from "../dot-pulse/DotPulse.js";
-const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
+import { TitleSmall as De, BodyCaption as he, BodySecondary as Ge } from "../TypographyStyle.js";
+import { CopilotFeedbackModal as Je } from "./CopilotFeedbackModal.js";
+import { PanelContainer as ze, PanelHeader as Ze, HeaderAvatar as qe, HeaderText as Qe, HeaderTitleRow as Ye, HeaderBadge as et, HeaderActions as tt, IconAction as ue, MessagesViewport as rt, MessagesArea as ot, EmptyState as nt, EmptyStateIcon as it, SuggestionList as lt, SuggestionChip as ct, HistoryLoader as dt, MessageBubble as at, ToolCtaList as st, ToolCtaLink as ht, MessageTimestamp as ut, InterruptedNote as pt, MessageActions as ft, MessageAction as x, FollowUpList as wt, FollowUpsLabel as kt, FollowUpChip as Ct, ThinkingBubble as mt, ThinkingLabel as yt, ScrollFade as bt, JumpToLatestButton as gt, ErrorBanner as vt, InputArea as Tt, AttachmentChip as St, AttachmentText as xt, AttachmentRemove as At, InputWrapper as It, MessageInput as Mt, SendButton as Lt, Disclaimer as Bt } from "./CopilotPanel.styled.js";
+import { isCopilotRegeneratePrompt as Rt } from "./copilotRegenerate.js";
+import { buildCopilotSelectionPrompt as Ht } from "./copilotSelectionPrompt.js";
+import { renderCopilotMarkdown as Ft } from "./utils/markdown.js";
+import { toolResultCtas as Et } from "./utils/toolCtas.js";
+import { DotPulse as pe } from "../dot-pulse/DotPulse.js";
+const _t = 96, Pt = 24, Wt = 1800, jt = async (n) => {
   try {
     if (navigator.clipboard?.writeText)
       return await navigator.clipboard.writeText(n), !0;
@@ -27,7 +27,7 @@ const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
   } catch {
     return !1;
   }
-}, jt = 48, Nt = (n) => {
+}, Nt = 48, $t = (n) => {
   if (!n || !Number.isFinite(n))
     return "";
   const i = new Date(n);
@@ -35,7 +35,7 @@ const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
     hour: "numeric",
     minute: "2-digit"
   });
-}, $t = () => /* @__PURE__ */ r(
+}, Ot = () => /* @__PURE__ */ r(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -52,7 +52,7 @@ const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
       /* @__PURE__ */ t("path", { d: "M6 11l6-6 6 6" })
     ]
   }
-), Ot = () => /* @__PURE__ */ r(
+), Ut = () => /* @__PURE__ */ r(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -69,7 +69,7 @@ const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
       /* @__PURE__ */ t("path", { d: "M13 6l6 6-6 6" })
     ]
   }
-), ue = ({ size: n = 16 }) => /* @__PURE__ */ t(
+), fe = ({ size: n = 16 }) => /* @__PURE__ */ t(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -79,7 +79,7 @@ const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
     "aria-hidden": "true",
     children: /* @__PURE__ */ t("rect", { x: "7", y: "7", width: "10", height: "10", rx: "2" })
   }
-), Ut = () => /* @__PURE__ */ r(
+), Vt = () => /* @__PURE__ */ r(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -96,7 +96,7 @@ const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
       /* @__PURE__ */ t("path", { d: "M15 5.5A1.5 1.5 0 0 0 13.5 4H5.5A1.5 1.5 0 0 0 4 5.5v8A1.5 1.5 0 0 0 5.5 15" })
     ]
   }
-), Vt = () => /* @__PURE__ */ t(
+), Kt = () => /* @__PURE__ */ t(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -110,7 +110,7 @@ const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
     "aria-hidden": "true",
     children: /* @__PURE__ */ t("path", { d: "M5 13l4 4L19 7" })
   }
-), Dt = () => /* @__PURE__ */ r(
+), Xt = () => /* @__PURE__ */ r(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -127,7 +127,7 @@ const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
       /* @__PURE__ */ t("path", { d: "M20 4v4h-4" })
     ]
   }
-), Kt = ({ filled: n = !1 }) => /* @__PURE__ */ r(
+), Dt = ({ filled: n = !1 }) => /* @__PURE__ */ r(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -144,7 +144,7 @@ const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
       /* @__PURE__ */ t("path", { d: "M7 10l4.5-7a2 2 0 0 1 3.7 1.3L14.5 9H19a2 2 0 0 1 2 2.3l-1.1 7A2 2 0 0 1 18 20H7" })
     ]
   }
-), Xt = ({ filled: n = !1 }) => /* @__PURE__ */ r(
+), Gt = ({ filled: n = !1 }) => /* @__PURE__ */ r(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -161,187 +161,190 @@ const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
       /* @__PURE__ */ t("path", { d: "M7 14l4.5 7a2 2 0 0 0 3.7-1.3L14.5 15H19a2 2 0 0 0 2-2.3l-1.1-7A2 2 0 0 0 18 4H7" })
     ]
   }
-), dr = ({
+), ar = ({
   messages: n,
   onSend: i,
   onClose: A,
-  title: b = "Copilot",
-  badge: O,
-  subtitle: U,
-  avatar: pe,
-  placeholder: fe = "Write your message...",
-  disclaimer: V = "AI can make mistakes, Verify the responses.",
-  emptyStateTitle: ke,
-  emptyStateSubtitle: D = "Here are some things you can try",
-  suggestions: M,
-  onSuggestionClick: we,
-  showRefresh: Ce = !0,
+  title: y = "Copilot",
+  badge: $,
+  subtitle: O,
+  avatar: we,
+  placeholder: ke = "Write your message...",
+  disclaimer: U = "AI can make mistakes, Verify the responses.",
+  emptyStateTitle: Ce,
+  emptyStateSubtitle: V = "Here are some things you can try",
+  suggestions: I,
+  onSuggestionClick: me,
+  showRefresh: ye = !0,
   onRefresh: K,
   onRegenerate: X,
-  onFeedback: I,
+  onFeedback: M,
   dislikeTitle: be,
-  dislikeSubtitle: ye,
-  dislikeReasons: me,
-  dislikeNotePlaceholder: ve,
-  dislikeSubmitLabel: ge,
-  isThinking: y = !1,
-  thinkingLabel: G = "Thinking",
-  isStreaming: Te = !1,
-  onStop: z,
+  dislikeSubtitle: ge,
+  dislikeReasons: ve,
+  dislikeNotePlaceholder: Te,
+  dislikeSubmitLabel: Se,
+  isThinking: b = !1,
+  thinkingLabel: D = "Thinking",
+  isStreaming: xe = !1,
+  onStop: G,
   interruptedLabel: J = "This message was interrupted",
-  followUpsLabel: Z = "Follow ups",
-  onToolCtaClick: Se,
-  hasMoreHistory: xe = !1,
-  isLoadingHistory: m = !1,
-  onLoadOlderMessages: q,
-  historyLoadingLabel: Ae = "Loading earlier messages",
+  followUpsLabel: z = "Follow ups",
+  onToolCtaClick: Ae,
+  hasMoreHistory: Ie = !1,
+  isLoadingHistory: g = !1,
+  onLoadOlderMessages: Z,
+  historyLoadingLabel: Me = "Loading earlier messages",
   inputDisabled: d = !1,
-  attachment: a,
-  onAttachmentRemove: Q,
-  errorMessage: Y,
-  width: Me,
-  height: Ie,
-  className: Le,
-  style: Be
+  attachment: s,
+  onAttachmentRemove: q,
+  errorMessage: Q,
+  width: Le,
+  height: Be,
+  className: Re,
+  style: He
 }) => {
-  const [L, ee] = u(""), [Re, te] = u(!1), [B, R] = u(!0), [v, re] = u(null), [s, He] = u({}), [g, H] = u(null), F = p(null), k = p(null), E = p(null), _ = p(null), P = p(0), W = p(null), T = n.filter(
-    (e) => (e.content.length > 0 || e.wasInterrupted) && !Bt(e.content)
-  ), oe = T.length === 0 && !y, h = y || Te, ne = !d && !h && (L.trim().length > 0 || !!a), w = h && !!z, j = T[T.length - 1], N = !h && j?.role === "assistant" ? j.followUps : void 0, $ = !oe && !B;
-  S(() => {
-    B && E.current?.scrollIntoView({ behavior: "smooth" });
-  }, [n, y, B]), S(() => {
-    const e = _.current, o = W.current;
-    !e || o === null || m || (W.current = null, e.scrollTop = e.scrollHeight - o, P.current = e.scrollTop);
-  }, [n, m]);
-  const Fe = () => {
-    const e = _.current;
+  const [L, Y] = p(""), [Fe, ee] = p(!1), [B, R] = p(!0), [v, te] = p(null), [re, Ee] = p({}), [u, H] = p(null), T = h(null), oe = h(!1), w = h(null), F = h(null), E = h(null), _ = h(0), P = h(null), S = n.filter(
+    (e) => (e.content.length > 0 || e.wasInterrupted) && !Rt(e.content)
+  ), ne = S.length === 0 && !b, l = b || xe, ie = !d && !l && (L.trim().length > 0 || !!s), k = l && !!G, W = S[S.length - 1], j = !l && W?.role === "assistant" ? W.followUps : void 0, N = !ne && !B;
+  m(() => {
+    B && F.current?.scrollIntoView({ behavior: "smooth" });
+  }, [n, b, B]), m(() => {
+    const e = E.current, o = P.current;
+    !e || o === null || g || (P.current = null, e.scrollTop = e.scrollHeight - o, _.current = e.scrollTop);
+  }, [n, g]);
+  const _e = () => {
+    const e = E.current;
     if (!e)
       return;
     const o = e.scrollHeight - e.scrollTop - e.clientHeight;
-    e.scrollTop <= jt && xe && !m && q && (W.current = e.scrollHeight - e.scrollTop, q());
-    const c = e.scrollTop < P.current - 1;
-    if (P.current = e.scrollTop, o <= _t) {
+    e.scrollTop <= Nt && Ie && !g && Z && (P.current = e.scrollHeight - e.scrollTop, Z());
+    const a = e.scrollTop < _.current - 1;
+    if (_.current = e.scrollTop, o <= Pt) {
       R(!0);
       return;
     }
-    c && R(!1);
-  }, Ee = () => {
-    R(!0), E.current?.scrollIntoView({ behavior: "smooth" });
+    a && R(!1);
+  }, Pe = () => {
+    R(!0), F.current?.scrollIntoView({ behavior: "smooth" });
   };
-  S(
+  m(
     () => () => {
-      k.current && window.clearTimeout(k.current);
+      w.current && window.clearTimeout(w.current);
     },
     []
   );
-  const _e = async (e) => {
-    await Wt(e.content) && (k.current && window.clearTimeout(k.current), re(e.id), k.current = window.setTimeout(
-      () => re(null),
-      Pt
+  const We = async (e) => {
+    await jt(e.content) && (w.current && window.clearTimeout(w.current), te(e.id), w.current = window.setTimeout(
+      () => te(null),
+      Wt
     ));
-  }, ie = (e, o) => {
-    const c = s[e] === o;
-    if (He((l) => ({
-      ...l,
-      [e]: l[e] === o ? void 0 : o
-    })), c) {
+  }, le = (e, o) => {
+    const a = re[e] === o;
+    if (Ee((c) => ({
+      ...c,
+      [e]: c[e] === o ? void 0 : o
+    })), a) {
       o === "dislike" && H(
-        (l) => l === e ? null : l
+        (c) => c === e ? null : c
       );
       return;
     }
     if (o === "like") {
-      I?.(e, "like");
+      M?.(e, "like");
       return;
     }
-    g && g !== e && I?.(g, "dislike"), H(e);
-  }, le = (e, o) => {
-    H((c) => c === e ? null : c), I?.(e, "dislike", o);
-  }, Pe = () => {
-    d || h || X?.();
-  }, ce = () => {
+    u && u !== e && M?.(u, "dislike"), H(e);
+  }, ce = (e, o) => {
+    H((a) => a === e ? null : a), M?.(e, "dislike", o);
+  }, je = () => {
+    d || l || X?.();
+  }, de = () => {
     const e = L.trim();
-    if (!e && !a || d || h)
+    if (!e && !s || d || l)
       return;
     i(
-      a ? Rt(a, e) : e
-    ), ee(""), Q?.();
-    const o = F.current;
+      s ? Ht(s, e) : e
+    ), Y(""), q?.();
+    const o = T.current;
     o && (o.style.height = "auto");
   };
-  S(() => {
-    a && F.current?.focus();
-  }, [a]);
-  const We = (e) => {
-    ee(e.target.value);
+  m(() => {
+    s && T.current?.focus();
+  }, [s]), m(() => {
+    const e = oe.current && !l;
+    oe.current = l, e && !d && !u && T.current?.focus();
+  }, [l, d, u]);
+  const Ne = (e) => {
+    Y(e.target.value);
     const o = e.target;
     o.style.height = "auto", o.style.height = `${Math.min(
       o.scrollHeight,
-      Et
+      _t
     )}px`;
-  }, je = (e) => {
-    e.key === "Enter" && !e.shiftKey && (e.preventDefault(), ce());
-  }, Ne = (e) => {
-    d || h || (we?.(e), i(e.text));
   }, $e = (e) => {
-    d || h || i(e);
+    e.key === "Enter" && !e.shiftKey && (e.preventDefault(), de());
+  }, Oe = (e) => {
+    d || l || (me?.(e), i(e.text));
+  }, Ue = (e) => {
+    d || l || i(e);
   };
   return /* @__PURE__ */ r(
     ze,
     {
-      className: Le,
-      style: { width: Me, height: Ie, ...Be },
+      className: Re,
+      style: { width: Le, height: Be, ...He },
       role: "dialog",
-      "aria-label": b,
+      "aria-label": y,
       children: [
-        /* @__PURE__ */ r(Je, { children: [
-          /* @__PURE__ */ t(Ze, { children: pe ?? /* @__PURE__ */ t(C, { width: 18, height: 18 }) }),
-          /* @__PURE__ */ r(qe, { children: [
-            /* @__PURE__ */ r(Qe, { children: [
-              /* @__PURE__ */ t(Ke, { children: b }),
-              O && /* @__PURE__ */ t(Ye, { children: O })
+        /* @__PURE__ */ r(Ze, { children: [
+          /* @__PURE__ */ t(qe, { children: we ?? /* @__PURE__ */ t(C, { width: 18, height: 18 }) }),
+          /* @__PURE__ */ r(Qe, { children: [
+            /* @__PURE__ */ r(Ye, { children: [
+              /* @__PURE__ */ t(De, { children: y }),
+              $ && /* @__PURE__ */ t(et, { children: $ })
             ] }),
-            U && /* @__PURE__ */ t(ae, { color: f.content.secondary, children: U })
+            O && /* @__PURE__ */ t(he, { color: f.content.secondary, children: O })
           ] }),
-          /* @__PURE__ */ r(et, { children: [
-            Ce && K && /* @__PURE__ */ t(
-              he,
+          /* @__PURE__ */ r(tt, { children: [
+            ye && K && /* @__PURE__ */ t(
+              ue,
               {
                 type: "button",
                 onClick: K,
                 "aria-label": "Start a new conversation",
-                children: /* @__PURE__ */ t(Ve, { width: 16, height: 16 })
+                children: /* @__PURE__ */ t(Ke, { width: 16, height: 16 })
               }
             ),
             /* @__PURE__ */ t(
-              he,
+              ue,
               {
                 type: "button",
                 onClick: A,
                 "aria-label": "Close copilot",
-                children: /* @__PURE__ */ t(de, { width: 18, height: 18 })
+                children: /* @__PURE__ */ t(se, { width: 18, height: 18 })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ r(tt, { children: [
+        /* @__PURE__ */ r(rt, { children: [
           /* @__PURE__ */ t(
-            rt,
+            ot,
             {
-              ref: _,
-              onScroll: Fe,
+              ref: E,
+              onScroll: _e,
               role: "region",
               "aria-label": "Conversation",
-              children: oe ? /* @__PURE__ */ r(ot, { children: [
-                /* @__PURE__ */ t(nt, { children: /* @__PURE__ */ t(C, { width: 28, height: 28 }) }),
-                /* @__PURE__ */ t(Xe, { style: { fontWeight: 600 }, children: ke || b }),
-                D && /* @__PURE__ */ t(ae, { color: f.content.secondary, children: D }),
-                M && M.length > 0 && /* @__PURE__ */ t(it, { children: M.map((e) => /* @__PURE__ */ r(
-                  lt,
+              children: ne ? /* @__PURE__ */ r(nt, { children: [
+                /* @__PURE__ */ t(it, { children: /* @__PURE__ */ t(C, { width: 28, height: 28 }) }),
+                /* @__PURE__ */ t(Ge, { style: { fontWeight: 600 }, children: Ce || y }),
+                V && /* @__PURE__ */ t(he, { color: f.content.secondary, children: V }),
+                I && I.length > 0 && /* @__PURE__ */ t(lt, { children: I.map((e) => /* @__PURE__ */ r(
+                  ct,
                   {
                     type: "button",
-                    disabled: d || h,
-                    onClick: () => Ne(e),
+                    disabled: d || l,
+                    onClick: () => Oe(e),
                     children: [
                       /* @__PURE__ */ t(C, { width: 14, height: 14 }),
                       e.text
@@ -349,135 +352,123 @@ const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
                   },
                   e.id
                 )) })
-              ] }) : /* @__PURE__ */ r(Oe, { children: [
-                m && /* @__PURE__ */ r(ct, { role: "status", "aria-live": "polite", children: [
-                  /* @__PURE__ */ t(se, { color: f.content.placeholder, size: 4 }),
-                  Ae
+              ] }) : /* @__PURE__ */ r(ae, { children: [
+                g && /* @__PURE__ */ r(dt, { role: "status", "aria-live": "polite", children: [
+                  /* @__PURE__ */ t(pe, { color: f.content.placeholder, size: 4 }),
+                  Me
                 ] }),
-                T.map((e) => {
-                  const o = e.role === "user" ? Nt(e.timestamp) : "";
-                  return /* @__PURE__ */ r(De.Fragment, { children: [
-                    e.content.length > 0 && /* @__PURE__ */ t(dt, { $role: e.role, children: e.role === "assistant" ? /* @__PURE__ */ t(
+                S.map((e) => {
+                  const o = e.role === "user" ? $t(e.timestamp) : "";
+                  return /* @__PURE__ */ r(Xe.Fragment, { children: [
+                    e.content.length > 0 && /* @__PURE__ */ t(at, { $role: e.role, children: e.role === "assistant" ? /* @__PURE__ */ t(
                       "div",
                       {
                         dangerouslySetInnerHTML: {
-                          __html: Ht(e.content)
+                          __html: Ft(e.content)
                         }
                       }
                     ) : /* @__PURE__ */ t("div", { style: { whiteSpace: "pre-wrap" }, children: e.content }) }),
                     e.role === "assistant" && !e.isStreaming && (() => {
-                      const c = Ft(e.toolResults);
-                      return c.length === 0 ? null : /* @__PURE__ */ t(at, { children: c.map((l) => /* @__PURE__ */ t(
+                      const a = Et(e.toolResults);
+                      return a.length === 0 ? null : /* @__PURE__ */ t(st, { children: a.map((c) => /* @__PURE__ */ t(
                         ht,
                         {
-                          href: l.url,
+                          href: c.url,
                           target: "_blank",
                           rel: "noopener noreferrer",
-                          onClick: () => Se?.({
-                            tool: l.tool,
-                            url: l.url
+                          onClick: () => Ae?.({
+                            tool: c.tool,
+                            url: c.url
                           }),
-                          children: l.label
+                          children: c.label
                         },
-                        `${l.tool}-${l.url}`
+                        `${c.tool}-${c.url}`
                       )) });
                     })(),
-                    o && /* @__PURE__ */ t(st, { children: o }),
-                    e.wasInterrupted && J && /* @__PURE__ */ r(ut, { children: [
-                      /* @__PURE__ */ t(ue, { size: 12 }),
+                    o && /* @__PURE__ */ t(ut, { children: o }),
+                    e.wasInterrupted && J && /* @__PURE__ */ r(pt, { children: [
+                      /* @__PURE__ */ t(fe, { size: 12 }),
                       J
                     ] }),
-                    e.role === "assistant" && e.content.length > 0 && !e.isStreaming && /* @__PURE__ */ r(pt, { children: [
+                    e.role === "assistant" && e.content.length > 0 && !e.isStreaming && /* @__PURE__ */ r(ft, { children: [
                       /* @__PURE__ */ t(
                         x,
                         {
                           type: "button",
                           onClick: () => {
-                            _e(e);
+                            We(e);
                           },
                           "data-copied": v === e.id,
                           title: v === e.id ? "Copied" : "Copy",
                           "aria-label": v === e.id ? "Response copied to clipboard" : "Copy response",
-                          children: v === e.id ? /* @__PURE__ */ t(Vt, {}) : /* @__PURE__ */ t(Ut, {})
+                          children: v === e.id ? /* @__PURE__ */ t(Kt, {}) : /* @__PURE__ */ t(Vt, {})
                         }
                       ),
-                      X && e.id === j?.id && /* @__PURE__ */ t(
+                      X && e.id === W?.id && /* @__PURE__ */ t(
                         x,
                         {
                           type: "button",
-                          onClick: Pe,
-                          disabled: d || h,
+                          onClick: je,
+                          disabled: d || l,
                           title: "Regenerate",
                           "aria-label": "Regenerate response",
-                          children: /* @__PURE__ */ t(Dt, {})
+                          children: /* @__PURE__ */ t(Xt, {})
                         }
                       ),
-                      /* @__PURE__ */ t(
-                        x,
-                        {
-                          type: "button",
-                          onClick: () => ie(e.id, "like"),
-                          "data-selected": s[e.id] === "like",
-                          "aria-pressed": s[e.id] === "like",
-                          title: "Good response",
-                          "aria-label": "Good response",
-                          children: /* @__PURE__ */ t(
-                            Kt,
-                            {
-                              filled: s[e.id] === "like"
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ t(
-                        x,
-                        {
-                          type: "button",
-                          onClick: () => ie(e.id, "dislike"),
-                          "data-selected": s[e.id] === "dislike",
-                          "aria-pressed": s[e.id] === "dislike",
-                          title: "Bad response",
-                          "aria-label": "Bad response",
-                          children: /* @__PURE__ */ t(
-                            Xt,
-                            {
-                              filled: s[e.id] === "dislike"
-                            }
-                          )
-                        }
-                      )
+                      !e.isRestored && re[e.id] === void 0 && /* @__PURE__ */ r(ae, { children: [
+                        /* @__PURE__ */ t(
+                          x,
+                          {
+                            type: "button",
+                            onClick: () => le(e.id, "like"),
+                            title: "Good response",
+                            "aria-label": "Good response",
+                            children: /* @__PURE__ */ t(Dt, {})
+                          }
+                        ),
+                        /* @__PURE__ */ t(
+                          x,
+                          {
+                            type: "button",
+                            onClick: () => le(e.id, "dislike"),
+                            title: "Bad response",
+                            "aria-label": "Bad response",
+                            children: /* @__PURE__ */ t(Gt, {})
+                          }
+                        )
+                      ] })
                     ] }),
-                    g === e.id && /* @__PURE__ */ t(
-                      Ge,
+                    u === e.id && /* @__PURE__ */ t(
+                      Je,
                       {
                         title: be,
-                        subtitle: ye ?? `Help us improve ${b}`,
-                        reasons: me,
-                        notePlaceholder: ve,
-                        submitLabel: ge,
-                        onSubmit: (c) => le(e.id, c),
-                        onDismiss: () => le(e.id)
+                        subtitle: ge ?? `Help us improve ${y}`,
+                        reasons: ve,
+                        notePlaceholder: Te,
+                        submitLabel: Se,
+                        onSubmit: (a) => ce(e.id, a),
+                        onDismiss: () => ce(e.id)
                       }
                     )
                   ] }, e.id);
                 }),
-                N && N.length > 0 && /* @__PURE__ */ r(ft, { children: [
-                  Z && /* @__PURE__ */ t(kt, { children: Z }),
-                  N.map((e) => /* @__PURE__ */ r(
-                    wt,
+                j && j.length > 0 && /* @__PURE__ */ r(wt, { children: [
+                  z && /* @__PURE__ */ t(kt, { children: z }),
+                  j.map((e) => /* @__PURE__ */ r(
+                    Ct,
                     {
                       type: "button",
                       disabled: d,
-                      onClick: () => $e(e),
+                      onClick: () => Ue(e),
                       children: [
-                        /* @__PURE__ */ t(Ot, {}),
+                        /* @__PURE__ */ t(Ut, {}),
                         e
                       ]
                     },
                     e
                   ))
                 ] }),
-                y && /* @__PURE__ */ r(Ct, { role: "status", "aria-live": "polite", children: [
+                b && /* @__PURE__ */ r(mt, { role: "status", "aria-live": "polite", children: [
                   /* @__PURE__ */ t(
                     C,
                     {
@@ -486,75 +477,75 @@ const Et = 96, _t = 24, Pt = 1800, Wt = async (n) => {
                       color: f.content.brand
                     }
                   ),
-                  G && /* @__PURE__ */ t(bt, { children: G }),
-                  /* @__PURE__ */ t(se, { color: f.background.brand, size: 5 })
+                  D && /* @__PURE__ */ t(yt, { children: D }),
+                  /* @__PURE__ */ t(pe, { color: f.background.brand, size: 5 })
                 ] }),
-                /* @__PURE__ */ t("div", { ref: E })
+                /* @__PURE__ */ t("div", { ref: F })
               ] })
             }
           ),
-          /* @__PURE__ */ t(yt, { $visible: $, "aria-hidden": "true" }),
+          /* @__PURE__ */ t(bt, { $visible: N, "aria-hidden": "true" }),
           /* @__PURE__ */ t(
-            mt,
+            gt,
             {
               type: "button",
-              $visible: $,
-              onClick: Ee,
-              tabIndex: $ ? 0 : -1,
+              $visible: N,
+              onClick: Pe,
+              tabIndex: N ? 0 : -1,
               "aria-label": "Scroll to the latest message",
-              children: /* @__PURE__ */ t(Ue, { width: 16, height: 16 })
+              children: /* @__PURE__ */ t(Ve, { width: 16, height: 16 })
             }
           )
         ] }),
-        Y && /* @__PURE__ */ t(vt, { role: "alert", children: Y }),
-        /* @__PURE__ */ r(gt, { children: [
-          a && /* @__PURE__ */ r(Tt, { children: [
+        Q && /* @__PURE__ */ t(vt, { role: "alert", children: Q }),
+        /* @__PURE__ */ r(Tt, { children: [
+          s && /* @__PURE__ */ r(St, { children: [
             /* @__PURE__ */ t(C, { width: 14, height: 14, color: f.content.brand }),
-            /* @__PURE__ */ t(St, { title: a, children: a }),
+            /* @__PURE__ */ t(xt, { title: s, children: s }),
             /* @__PURE__ */ t(
-              xt,
+              At,
               {
                 type: "button",
-                onClick: Q,
+                onClick: q,
                 "aria-label": "Remove the selected text",
-                children: /* @__PURE__ */ t(de, { width: 12, height: 12 })
+                children: /* @__PURE__ */ t(se, { width: 12, height: 12 })
               }
             )
           ] }),
-          /* @__PURE__ */ r(At, { $focused: Re, children: [
+          /* @__PURE__ */ r(It, { $focused: Fe, children: [
             /* @__PURE__ */ t(
               Mt,
               {
-                ref: F,
+                ref: T,
                 rows: 1,
                 value: L,
-                placeholder: fe,
+                placeholder: ke,
                 disabled: d,
-                onChange: We,
-                onKeyDown: je,
-                onFocus: () => te(!0),
-                onBlur: () => te(!1)
+                onChange: Ne,
+                onKeyDown: $e,
+                onFocus: () => ee(!0),
+                onBlur: () => ee(!1)
               }
             ),
             /* @__PURE__ */ t(
-              It,
+              Lt,
               {
                 type: "button",
-                $active: w || ne,
-                disabled: !w && !ne,
-                onClick: w ? z : ce,
-                "aria-label": w ? "Stop generating" : "Send message",
-                children: w ? /* @__PURE__ */ t(ue, {}) : /* @__PURE__ */ t($t, {})
+                $active: k || ie,
+                disabled: !k && !ie,
+                onClick: k ? G : de,
+                "aria-label": k ? "Stop generating" : "Send message",
+                children: k ? /* @__PURE__ */ t(fe, {}) : /* @__PURE__ */ t(Ot, {})
               }
             )
           ] })
         ] }),
-        V && /* @__PURE__ */ t(Lt, { children: V })
+        U && /* @__PURE__ */ t(Bt, { children: U })
       ]
     }
   );
 };
 export {
-  dr as CopilotPanel
+  ar as CopilotPanel
 };
 //# sourceMappingURL=CopilotPanel.js.map