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

package/dist/esm/components/bik-copilot/CopilotFeedbackModal.styled.js

@@ -0,0 +1,122 @@
+import r from "styled-components";
+import { COLORS as o } from "../../constants/Theme.js";
+const a = r.div`
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	width: 220px;
+	padding: 14px;
+	background: ${o.surface.standard};
+	border: 1px solid ${o.stroke.primary};
+	border-radius: 12px;
+	box-shadow: 0 12px 32px rgba(40, 3, 78, 0.16);
+`, i = r.div`
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 8px;
+`, d = r.div`
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+`, s = r.span`
+	font-family: Inter;
+	font-size: 13px;
+	font-weight: 600;
+	line-height: 18px;
+	color: ${o.content.primary};
+`, p = r.span`
+	font-family: Inter;
+	font-size: 11px;
+	line-height: 16px;
+	color: ${o.content.placeholder};
+`, c = r.button`
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	flex-shrink: 0;
+	padding: 0;
+	border: none;
+	border-radius: 4px;
+	background: transparent;
+	color: ${o.content.placeholder};
+	cursor: pointer;
+	transition: background 0.15s ease, color 0.15s ease;
+
+	&:hover {
+		background: ${o.surface.hovered};
+		color: ${o.content.primary};
+	}
+`, l = r.div`
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+`, x = r.button`
+	padding: 4px 8px;
+	border-radius: 6px;
+	border: 1px solid
+		${({ $selected: e }) => e ? o.stroke.brand : o.stroke.primary};
+	background: ${({ $selected: e }) => e ? o.background.brandVeryLight : o.surface.standard};
+	color: ${({ $selected: e }) => e ? o.content.brand : o.content.secondary};
+	font-family: Inter;
+	font-size: 11px;
+	line-height: 16px;
+	text-align: left;
+	cursor: pointer;
+	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+
+	&:hover {
+		background: ${({ $selected: e }) => e ? o.background.brandVeryLight : o.surface.hovered};
+	}
+`, b = r.textarea`
+	min-height: 64px;
+	padding: 8px;
+	border: 1px solid ${o.stroke.primary};
+	border-radius: 8px;
+	background: ${o.surface.standard};
+	color: ${o.content.primary};
+	font-family: Inter;
+	font-size: 11px;
+	line-height: 16px;
+	resize: none;
+	outline: none;
+
+	&::placeholder {
+		color: ${o.content.placeholder};
+	}
+
+	&:focus {
+		border-color: ${o.stroke.brand};
+	}
+`, u = r.button`
+	padding: 8px;
+	border: none;
+	border-radius: 8px;
+	background: ${o.background.brand};
+	color: ${o.content.primaryInverse};
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 16px;
+	cursor: pointer;
+	transition: background 0.15s ease;
+
+	&:hover {
+		background: ${o.background.brandHovered};
+	}
+`;
+export {
+  a as ModalCard,
+  c as ModalClose,
+  i as ModalHeader,
+  d as ModalHeading,
+  p as ModalSubtitle,
+  s as ModalTitle,
+  b as NoteInput,
+  x as ReasonChip,
+  l as ReasonList,
+  u as SubmitButton
+};
+//# sourceMappingURL=CopilotFeedbackModal.styled.js.map

package/dist/esm/components/bik-copilot/CopilotFeedbackModal.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopilotFeedbackModal.styled.js","sources":["../../../../src/components/bik-copilot/CopilotFeedbackModal.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const ModalCard = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n\twidth: 220px;\n\tpadding: 14px;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 12px;\n\tbox-shadow: 0 12px 32px rgba(40, 3, 78, 0.16);\n`;\n\nexport const ModalHeader = styled.div`\n\tdisplay: flex;\n\talign-items: flex-start;\n\tjustify-content: space-between;\n\tgap: 8px;\n`;\n\nexport const ModalHeading = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n`;\n\nexport const ModalTitle = styled.span`\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tfont-weight: 600;\n\tline-height: 18px;\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const ModalSubtitle = styled.span`\n\tfont-family: Inter;\n\tfont-size: 11px;\n\tline-height: 16px;\n\tcolor: ${COLORS.content.placeholder};\n`;\n\nexport const ModalClose = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 20px;\n\theight: 20px;\n\tflex-shrink: 0;\n\tpadding: 0;\n\tborder: none;\n\tborder-radius: 4px;\n\tbackground: transparent;\n\tcolor: ${COLORS.content.placeholder};\n\tcursor: pointer;\n\ttransition: background 0.15s ease, color 0.15s ease;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.hovered};\n\t\tcolor: ${COLORS.content.primary};\n\t}\n`;\n\nexport const ReasonList = styled.div`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 6px;\n`;\n\n/* A toggle, not a radio: more than one thing can be wrong with one reply. */\nexport const ReasonChip = styled.button<{ $selected: boolean }>`\n\tpadding: 4px 8px;\n\tborder-radius: 6px;\n\tborder: 1px solid\n\t\t${({ $selected }) =>\n\t\t\t$selected ? COLORS.stroke.brand : COLORS.stroke.primary};\n\tbackground: ${({ $selected }) =>\n\t\t$selected ? COLORS.background.brandVeryLight : COLORS.surface.standard};\n\tcolor: ${({ $selected }) =>\n\t\t$selected ? COLORS.content.brand : COLORS.content.secondary};\n\tfont-family: Inter;\n\tfont-size: 11px;\n\tline-height: 16px;\n\ttext-align: left;\n\tcursor: pointer;\n\ttransition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n\n\t&:hover {\n\t\tbackground: ${({ $selected }) =>\n\t\t\t$selected ? COLORS.background.brandVeryLight : COLORS.surface.hovered};\n\t}\n`;\n\nexport const NoteInput = styled.textarea`\n\tmin-height: 64px;\n\tpadding: 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tbackground: ${COLORS.surface.standard};\n\tcolor: ${COLORS.content.primary};\n\tfont-family: Inter;\n\tfont-size: 11px;\n\tline-height: 16px;\n\tresize: none;\n\toutline: none;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n\n\t&:focus {\n\t\tborder-color: ${COLORS.stroke.brand};\n\t}\n`;\n\nexport const SubmitButton = styled.button`\n\tpadding: 8px;\n\tborder: none;\n\tborder-radius: 8px;\n\tbackground: ${COLORS.background.brand};\n\tcolor: ${COLORS.content.primaryInverse};\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\tline-height: 16px;\n\tcursor: pointer;\n\ttransition: background 0.15s ease;\n\n\t&:hover {\n\t\tbackground: ${COLORS.background.brandHovered};\n\t}\n`;\n"],"names":["ModalCard","styled","COLORS","ModalHeader","ModalHeading","ModalTitle","ModalSubtitle","ModalClose","ReasonList","ReasonChip","$selected","NoteInput","SubmitButton"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMjBC,EAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA,GAK7BC,IAAcF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOrBG,IAAeH,EAAO;AAAA;AAAA;AAAA;AAAA,GAMtBI,IAAaJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKvBC,EAAO,QAAQ,OAAO;AAAA,GAGnBI,IAAgBL,EAAO;AAAA;AAAA;AAAA;AAAA,UAI1BC,EAAO,QAAQ,WAAW;AAAA,GAGvBK,IAAaN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAWvBC,EAAO,QAAQ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKpBA,EAAO,QAAQ,OAAO;AAAA,WAC3BA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAIpBM,IAAaP,EAAO;AAAA;AAAA;AAAA;AAAA,GAOpBQ,IAAaR,EAAO;AAAA;AAAA;AAAA;AAAA,IAI7B,CAAC,EAAE,WAAAS,EAAA,MACJA,IAAYR,EAAO,OAAO,QAAQA,EAAO,OAAO,OAAO;AAAA,eAC3C,CAAC,EAAE,WAAAQ,EAAA,MAChBA,IAAYR,EAAO,WAAW,iBAAiBA,EAAO,QAAQ,QAAQ;AAAA,UAC9D,CAAC,EAAE,WAAAQ,EAAA,MACXA,IAAYR,EAAO,QAAQ,QAAQA,EAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS7C,CAAC,EAAE,WAAAQ,EAAA,MAChBA,IAAYR,EAAO,WAAW,iBAAiBA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAI3DS,IAAYV,EAAO;AAAA;AAAA;AAAA,qBAGXC,EAAO,OAAO,OAAO;AAAA;AAAA,eAE3BA,EAAO,QAAQ,QAAQ;AAAA,UAC5BA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQrBA,EAAO,QAAQ,WAAW;AAAA;AAAA;AAAA;AAAA,kBAInBA,EAAO,OAAO,KAAK;AAAA;AAAA,GAIxBU,IAAeX,EAAO;AAAA;AAAA;AAAA;AAAA,eAIpBC,EAAO,WAAW,KAAK;AAAA,UAC5BA,EAAO,QAAQ,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASvBA,EAAO,WAAW,YAAY;AAAA;AAAA;"}

package/dist/esm/components/bik-copilot/CopilotPanel.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { CopilotPanelProps } from './model';
+/**
+ * Chat panel used by the copilot. Fully presentational: it renders the
+ * transcript it is given and reports user intent through callbacks, so it works
+ * against any backend.
+ */
+export declare const CopilotPanel: React.FC<CopilotPanelProps>;
+export default CopilotPanel;

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

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