@bikdotai/bik-component-library 0.0.868-beta.9 → 0.0.869-beta.0

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

@@ -0,0 +1,560 @@
+import { jsxs as r, jsx as t, Fragment as Oe } from "react/jsx-runtime";
+import Ue 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 { 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) => {
+  try {
+    if (navigator.clipboard?.writeText)
+      return await navigator.clipboard.writeText(n), !0;
+  } catch {
+  }
+  try {
+    const i = document.createElement("textarea");
+    i.value = n, i.setAttribute("readonly", ""), i.style.position = "fixed", i.style.top = "-1000px", i.style.opacity = "0", document.body.appendChild(i), i.select();
+    const A = document.execCommand("copy");
+    return document.body.removeChild(i), A;
+  } catch {
+    return !1;
+  }
+}, jt = 48, Nt = (n) => {
+  if (!n || !Number.isFinite(n))
+    return "";
+  const i = new Date(n);
+  return Number.isNaN(i.getTime()) ? "" : i.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}, $t = () => /* @__PURE__ */ r(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "16",
+    height: "16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t("path", { d: "M12 19V5" }),
+      /* @__PURE__ */ t("path", { d: "M6 11l6-6 6 6" })
+    ]
+  }
+), Ot = () => /* @__PURE__ */ r(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ t("path", { d: "M13 6l6 6-6 6" })
+    ]
+  }
+), ue = ({ size: n = 16 }) => /* @__PURE__ */ t(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: n,
+    height: n,
+    fill: "currentColor",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ t("rect", { x: "7", y: "7", width: "10", height: "10", rx: "2" })
+  }
+), Ut = () => /* @__PURE__ */ r(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.8",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
+      /* @__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(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ t("path", { d: "M5 13l4 4L19 7" })
+  }
+), Dt = () => /* @__PURE__ */ r(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.8",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t("path", { d: "M20 12a8 8 0 1 1-2.34-5.66" }),
+      /* @__PURE__ */ t("path", { d: "M20 4v4h-4" })
+    ]
+  }
+), Kt = ({ filled: n = !1 }) => /* @__PURE__ */ r(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: n ? "currentColor" : "none",
+    stroke: "currentColor",
+    strokeWidth: "1.8",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t("path", { d: "M7 10v11H4a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h3Z" }),
+      /* @__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(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: n ? "currentColor" : "none",
+    stroke: "currentColor",
+    strokeWidth: "1.8",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t("path", { d: "M7 14V3H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3Z" }),
+      /* @__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 = ({
+  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,
+  onRefresh: K,
+  onRegenerate: X,
+  onFeedback: I,
+  dislikeTitle: be,
+  dislikeSubtitle: ye,
+  dislikeReasons: me,
+  dislikeNotePlaceholder: ve,
+  dislikeSubmitLabel: ge,
+  isThinking: y = !1,
+  thinkingLabel: G = "Thinking",
+  isStreaming: Te = !1,
+  onStop: z,
+  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",
+  inputDisabled: d = !1,
+  attachment: a,
+  onAttachmentRemove: Q,
+  errorMessage: Y,
+  width: Me,
+  height: Ie,
+  className: Le,
+  style: Be
+}) => {
+  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;
+    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) {
+      R(!0);
+      return;
+    }
+    c && R(!1);
+  }, Ee = () => {
+    R(!0), E.current?.scrollIntoView({ behavior: "smooth" });
+  };
+  S(
+    () => () => {
+      k.current && window.clearTimeout(k.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
+    ));
+  }, ie = (e, o) => {
+    const c = s[e] === o;
+    if (He((l) => ({
+      ...l,
+      [e]: l[e] === o ? void 0 : o
+    })), c) {
+      o === "dislike" && H(
+        (l) => l === e ? null : l
+      );
+      return;
+    }
+    if (o === "like") {
+      I?.(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 = () => {
+    const e = L.trim();
+    if (!e && !a || d || h)
+      return;
+    i(
+      a ? Rt(a, e) : e
+    ), ee(""), Q?.();
+    const o = F.current;
+    o && (o.style.height = "auto");
+  };
+  S(() => {
+    a && F.current?.focus();
+  }, [a]);
+  const We = (e) => {
+    ee(e.target.value);
+    const o = e.target;
+    o.style.height = "auto", o.style.height = `${Math.min(
+      o.scrollHeight,
+      Et
+    )}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);
+  };
+  return /* @__PURE__ */ r(
+    ze,
+    {
+      className: Le,
+      style: { width: Me, height: Ie, ...Be },
+      role: "dialog",
+      "aria-label": b,
+      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 })
+            ] }),
+            U && /* @__PURE__ */ t(ae, { color: f.content.secondary, children: U })
+          ] }),
+          /* @__PURE__ */ r(et, { children: [
+            Ce && K && /* @__PURE__ */ t(
+              he,
+              {
+                type: "button",
+                onClick: K,
+                "aria-label": "Start a new conversation",
+                children: /* @__PURE__ */ t(Ve, { width: 16, height: 16 })
+              }
+            ),
+            /* @__PURE__ */ t(
+              he,
+              {
+                type: "button",
+                onClick: A,
+                "aria-label": "Close copilot",
+                children: /* @__PURE__ */ t(de, { width: 18, height: 18 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r(tt, { children: [
+          /* @__PURE__ */ t(
+            rt,
+            {
+              ref: _,
+              onScroll: Fe,
+              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,
+                  {
+                    type: "button",
+                    disabled: d || h,
+                    onClick: () => Ne(e),
+                    children: [
+                      /* @__PURE__ */ t(C, { width: 14, height: 14 }),
+                      e.text
+                    ]
+                  },
+                  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
+                ] }),
+                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(
+                      "div",
+                      {
+                        dangerouslySetInnerHTML: {
+                          __html: Ht(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(
+                        ht,
+                        {
+                          href: l.url,
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          onClick: () => Se?.({
+                            tool: l.tool,
+                            url: l.url
+                          }),
+                          children: l.label
+                        },
+                        `${l.tool}-${l.url}`
+                      )) });
+                    })(),
+                    o && /* @__PURE__ */ t(st, { children: o }),
+                    e.wasInterrupted && J && /* @__PURE__ */ r(ut, { children: [
+                      /* @__PURE__ */ t(ue, { size: 12 }),
+                      J
+                    ] }),
+                    e.role === "assistant" && e.content.length > 0 && !e.isStreaming && /* @__PURE__ */ r(pt, { children: [
+                      /* @__PURE__ */ t(
+                        x,
+                        {
+                          type: "button",
+                          onClick: () => {
+                            _e(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, {})
+                        }
+                      ),
+                      X && e.id === j?.id && /* @__PURE__ */ t(
+                        x,
+                        {
+                          type: "button",
+                          onClick: Pe,
+                          disabled: d || h,
+                          title: "Regenerate",
+                          "aria-label": "Regenerate response",
+                          children: /* @__PURE__ */ t(Dt, {})
+                        }
+                      ),
+                      /* @__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"
+                            }
+                          )
+                        }
+                      )
+                    ] }),
+                    g === e.id && /* @__PURE__ */ t(
+                      Ge,
+                      {
+                        title: be,
+                        subtitle: ye ?? `Help us improve ${b}`,
+                        reasons: me,
+                        notePlaceholder: ve,
+                        submitLabel: ge,
+                        onSubmit: (c) => le(e.id, c),
+                        onDismiss: () => le(e.id)
+                      }
+                    )
+                  ] }, e.id);
+                }),
+                N && N.length > 0 && /* @__PURE__ */ r(ft, { children: [
+                  Z && /* @__PURE__ */ t(kt, { children: Z }),
+                  N.map((e) => /* @__PURE__ */ r(
+                    wt,
+                    {
+                      type: "button",
+                      disabled: d,
+                      onClick: () => $e(e),
+                      children: [
+                        /* @__PURE__ */ t(Ot, {}),
+                        e
+                      ]
+                    },
+                    e
+                  ))
+                ] }),
+                y && /* @__PURE__ */ r(Ct, { role: "status", "aria-live": "polite", children: [
+                  /* @__PURE__ */ t(
+                    C,
+                    {
+                      width: 14,
+                      height: 14,
+                      color: f.content.brand
+                    }
+                  ),
+                  G && /* @__PURE__ */ t(bt, { children: G }),
+                  /* @__PURE__ */ t(se, { color: f.background.brand, size: 5 })
+                ] }),
+                /* @__PURE__ */ t("div", { ref: E })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ t(yt, { $visible: $, "aria-hidden": "true" }),
+          /* @__PURE__ */ t(
+            mt,
+            {
+              type: "button",
+              $visible: $,
+              onClick: Ee,
+              tabIndex: $ ? 0 : -1,
+              "aria-label": "Scroll to the latest message",
+              children: /* @__PURE__ */ t(Ue, { width: 16, height: 16 })
+            }
+          )
+        ] }),
+        Y && /* @__PURE__ */ t(vt, { role: "alert", children: Y }),
+        /* @__PURE__ */ r(gt, { children: [
+          a && /* @__PURE__ */ r(Tt, { children: [
+            /* @__PURE__ */ t(C, { width: 14, height: 14, color: f.content.brand }),
+            /* @__PURE__ */ t(St, { title: a, children: a }),
+            /* @__PURE__ */ t(
+              xt,
+              {
+                type: "button",
+                onClick: Q,
+                "aria-label": "Remove the selected text",
+                children: /* @__PURE__ */ t(de, { width: 12, height: 12 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r(At, { $focused: Re, children: [
+            /* @__PURE__ */ t(
+              Mt,
+              {
+                ref: F,
+                rows: 1,
+                value: L,
+                placeholder: fe,
+                disabled: d,
+                onChange: We,
+                onKeyDown: je,
+                onFocus: () => te(!0),
+                onBlur: () => te(!1)
+              }
+            ),
+            /* @__PURE__ */ t(
+              It,
+              {
+                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, {})
+              }
+            )
+          ] })
+        ] }),
+        V && /* @__PURE__ */ t(Lt, { children: V })
+      ]
+    }
+  );
+};
+export {
+  dr as CopilotPanel
+};
+//# sourceMappingURL=CopilotPanel.js.map