@surf-kit/agent 0.1.1 → 0.2.0

package/dist/confidence/index.js

@@ -0,0 +1,222 @@
+// src/confidence/ConfidenceBadge/ConfidenceBadge.tsx
+import { Badge } from "@surf-kit/core";
+import { jsx } from "react/jsx-runtime";
+var intentMap = {
+  high: "success",
+  medium: "warning",
+  low: "error"
+};
+var labelMap = {
+  high: "High confidence",
+  medium: "Medium confidence",
+  low: "Low confidence"
+};
+function ConfidenceBadge({ confidence, className }) {
+  const level = confidence.overall;
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      intent: intentMap[level],
+      size: "sm",
+      role: "status",
+      "aria-label": labelMap[level],
+      className,
+      children: level.charAt(0).toUpperCase() + level.slice(1)
+    }
+  );
+}
+
+// src/confidence/ConfidenceBreakdown/ConfidenceBreakdown.tsx
+import { useState } from "react";
+
+// src/confidence/ConfidenceMeter/ConfidenceMeter.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function getBarColor(value) {
+  if (value >= 0.8) return "bg-green-500";
+  if (value >= 0.5) return "bg-yellow-500";
+  return "bg-red-500";
+}
+function ConfidenceMeter({ value, label, className }) {
+  const clamped = Math.max(0, Math.min(1, value));
+  const pct = Math.round(clamped * 100);
+  return /* @__PURE__ */ jsxs("div", { className, "data-testid": "confidence-meter", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+      /* @__PURE__ */ jsx2("span", { className: "text-xs font-medium text-text-secondary", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-secondary", children: [
+        pct,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "h-2 w-full rounded-full bg-surface-secondary overflow-hidden",
+        role: "progressbar",
+        "aria-valuenow": pct,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": `${label}: ${pct}%`,
+        children: /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: `h-full rounded-full transition-all duration-300 ${getBarColor(clamped)}`,
+            style: { width: `${pct}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/confidence/ConfidenceBreakdown/ConfidenceBreakdown.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var dimensions = [
+  { key: "retrieval_quality", label: "Retrieval Quality" },
+  { key: "source_authority", label: "Source Authority" },
+  { key: "answer_groundedness", label: "Answer Groundedness" },
+  { key: "recency", label: "Recency" }
+];
+function ConfidenceBreakdown({
+  confidence,
+  expandable = true,
+  defaultExpanded = false,
+  className
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const isExpanded = expandable ? expanded : true;
+  return /* @__PURE__ */ jsxs2("div", { className: `rounded-xl border border-border bg-surface ${className ?? ""}`, "data-testid": "confidence-breakdown", children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full items-center justify-between px-4 py-3 text-left",
+        onClick: () => expandable && setExpanded((prev) => !prev),
+        "aria-expanded": isExpanded,
+        disabled: !expandable,
+        children: [
+          /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium text-text-primary", children: "Confidence" }),
+          /* @__PURE__ */ jsx3(ConfidenceBadge, { confidence })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "border-t border-border px-4 py-3 space-y-3 animate-in fade-in slide-in-from-top-1 duration-200",
+        "data-testid": "confidence-breakdown-details",
+        children: [
+          dimensions.map((dim) => /* @__PURE__ */ jsx3(
+            ConfidenceMeter,
+            {
+              value: confidence[dim.key],
+              label: dim.label
+            },
+            dim.key
+          )),
+          confidence.reasoning && /* @__PURE__ */ jsx3("p", { className: "text-xs text-text-secondary mt-2", children: confidence.reasoning })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/confidence/VerificationBadge/VerificationBadge.tsx
+import { Badge as Badge2 } from "@surf-kit/core";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var config = {
+  passed: {
+    intent: "success",
+    label: "Verified",
+    icon: "\u2713",
+    ariaLabel: "Verification passed"
+  },
+  flagged: {
+    intent: "warning",
+    label: "Flagged",
+    icon: "\u26A0",
+    ariaLabel: "Verification flagged"
+  },
+  failed: {
+    intent: "error",
+    label: "Failed",
+    icon: "\u2717",
+    ariaLabel: "Verification failed"
+  }
+};
+function VerificationBadge({ verification, className }) {
+  const { intent, label, icon, ariaLabel } = config[verification.status];
+  return /* @__PURE__ */ jsxs3(
+    Badge2,
+    {
+      intent,
+      size: "sm",
+      role: "status",
+      "aria-label": ariaLabel,
+      className,
+      children: [
+        /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "mr-1", children: icon }),
+        label
+      ]
+    }
+  );
+}
+
+// src/confidence/VerificationDetail/VerificationDetail.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function VerificationDetail({
+  verification,
+  expandable = true,
+  defaultExpanded = false,
+  className
+}) {
+  const [expanded, setExpanded] = useState2(defaultExpanded);
+  const isExpanded = expandable ? expanded : true;
+  return /* @__PURE__ */ jsxs4("div", { className: `rounded-xl border border-border bg-surface ${className ?? ""}`, "data-testid": "verification-detail", children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full items-center justify-between px-4 py-3 text-left",
+        onClick: () => expandable && setExpanded((prev) => !prev),
+        "aria-expanded": isExpanded,
+        disabled: !expandable,
+        children: [
+          /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium text-text-primary", children: "Verification" }),
+          /* @__PURE__ */ jsx5(VerificationBadge, { verification })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: "border-t border-border px-4 py-3 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200",
+        "data-testid": "verification-detail-content",
+        children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex gap-4 text-xs text-text-secondary", children: [
+            /* @__PURE__ */ jsxs4("span", { "data-testid": "claims-checked", children: [
+              "Claims checked: ",
+              /* @__PURE__ */ jsx5("strong", { className: "text-text-primary", children: verification.claims_checked })
+            ] }),
+            /* @__PURE__ */ jsxs4("span", { "data-testid": "claims-verified", children: [
+              "Claims verified: ",
+              /* @__PURE__ */ jsx5("strong", { className: "text-text-primary", children: verification.claims_verified })
+            ] })
+          ] }),
+          verification.flags.length > 0 && /* @__PURE__ */ jsx5("ul", { className: "mt-2 space-y-1", "data-testid": "verification-flags", children: verification.flags.map((flag, i) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start gap-2 text-xs text-text-secondary", children: [
+            /* @__PURE__ */ jsx5("span", { className: "text-yellow-500 shrink-0", "aria-hidden": "true", children: "\u26A0" }),
+            flag
+          ] }, i)) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ConfidenceBadge,
+  ConfidenceBreakdown,
+  ConfidenceMeter,
+  VerificationBadge,
+  VerificationDetail
+};
+//# sourceMappingURL=index.js.map

package/dist/confidence/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/confidence/ConfidenceBadge/ConfidenceBadge.tsx","../../src/confidence/ConfidenceBreakdown/ConfidenceBreakdown.tsx","../../src/confidence/ConfidenceMeter/ConfidenceMeter.tsx","../../src/confidence/VerificationBadge/VerificationBadge.tsx","../../src/confidence/VerificationDetail/VerificationDetail.tsx"],"sourcesContent":["import React from 'react'\nimport { Badge } from '@surf-kit/core'\nimport type { ConfidenceBreakdown } from '../../types/agent'\n\nexport type ConfidenceBadgeProps = {\n  confidence: ConfidenceBreakdown\n  className?: string\n}\n\nconst intentMap = {\n  high: 'success',\n  medium: 'warning',\n  low: 'error',\n} as const\n\nconst labelMap = {\n  high: 'High confidence',\n  medium: 'Medium confidence',\n  low: 'Low confidence',\n} as const\n\nfunction ConfidenceBadge({ confidence, className }: ConfidenceBadgeProps) {\n  const level = confidence.overall\n\n  return (\n    <Badge\n      intent={intentMap[level]}\n      size=\"sm\"\n      role=\"status\"\n      aria-label={labelMap[level]}\n      className={className}\n    >\n      {level.charAt(0).toUpperCase() + level.slice(1)}\n    </Badge>\n  )\n}\n\nexport { ConfidenceBadge }\n","import React, { useState } from 'react'\nimport type { ConfidenceBreakdown as ConfidenceBreakdownType } from '../../types/agent'\nimport { ConfidenceBadge } from '../ConfidenceBadge'\nimport { ConfidenceMeter } from '../ConfidenceMeter'\n\nexport type ConfidenceBreakdownProps = {\n  confidence: ConfidenceBreakdownType\n  expandable?: boolean\n  defaultExpanded?: boolean\n  className?: string\n}\n\nconst dimensions: { key: keyof Pick<ConfidenceBreakdownType, 'retrieval_quality' | 'source_authority' | 'answer_groundedness' | 'recency'>; label: string }[] = [\n  { key: 'retrieval_quality', label: 'Retrieval Quality' },\n  { key: 'source_authority', label: 'Source Authority' },\n  { key: 'answer_groundedness', label: 'Answer Groundedness' },\n  { key: 'recency', label: 'Recency' },\n]\n\nfunction ConfidenceBreakdown({\n  confidence,\n  expandable = true,\n  defaultExpanded = false,\n  className,\n}: ConfidenceBreakdownProps) {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n\n  const isExpanded = expandable ? expanded : true\n\n  return (\n    <div className={`rounded-xl border border-border bg-surface ${className ?? ''}`} data-testid=\"confidence-breakdown\">\n      <button\n        type=\"button\"\n        className=\"flex w-full items-center justify-between px-4 py-3 text-left\"\n        onClick={() => expandable && setExpanded((prev) => !prev)}\n        aria-expanded={isExpanded}\n        disabled={!expandable}\n      >\n        <span className=\"text-sm font-medium text-text-primary\">Confidence</span>\n        <ConfidenceBadge confidence={confidence} />\n      </button>\n\n      {isExpanded && (\n        <div\n          className=\"border-t border-border px-4 py-3 space-y-3 animate-in fade-in slide-in-from-top-1 duration-200\"\n          data-testid=\"confidence-breakdown-details\"\n        >\n          {dimensions.map((dim) => (\n            <ConfidenceMeter\n              key={dim.key}\n              value={confidence[dim.key]}\n              label={dim.label}\n            />\n          ))}\n          {confidence.reasoning && (\n            <p className=\"text-xs text-text-secondary mt-2\">{confidence.reasoning}</p>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { ConfidenceBreakdown }\n","import React from 'react'\n\nexport type ConfidenceMeterProps = {\n  value: number // 0-1\n  label: string\n  className?: string\n}\n\nfunction getBarColor(value: number): string {\n  if (value >= 0.8) return 'bg-green-500'\n  if (value >= 0.5) return 'bg-yellow-500'\n  return 'bg-red-500'\n}\n\nfunction ConfidenceMeter({ value, label, className }: ConfidenceMeterProps) {\n  const clamped = Math.max(0, Math.min(1, value))\n  const pct = Math.round(clamped * 100)\n\n  return (\n    <div className={className} data-testid=\"confidence-meter\">\n      <div className=\"flex items-center justify-between mb-1\">\n        <span className=\"text-xs font-medium text-text-secondary\">{label}</span>\n        <span className=\"text-xs text-text-secondary\">{pct}%</span>\n      </div>\n      <div\n        className=\"h-2 w-full rounded-full bg-surface-secondary overflow-hidden\"\n        role=\"progressbar\"\n        aria-valuenow={pct}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={`${label}: ${pct}%`}\n      >\n        <div\n          className={`h-full rounded-full transition-all duration-300 ${getBarColor(clamped)}`}\n          style={{ width: `${pct}%` }}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport { ConfidenceMeter }\n","import React from 'react'\nimport { Badge } from '@surf-kit/core'\nimport type { VerificationResult } from '../../types/agent'\n\nexport type VerificationBadgeProps = {\n  verification: VerificationResult\n  className?: string\n}\n\nconst config = {\n  passed: {\n    intent: 'success' as const,\n    label: 'Verified',\n    icon: '\\u2713',\n    ariaLabel: 'Verification passed',\n  },\n  flagged: {\n    intent: 'warning' as const,\n    label: 'Flagged',\n    icon: '\\u26A0',\n    ariaLabel: 'Verification flagged',\n  },\n  failed: {\n    intent: 'error' as const,\n    label: 'Failed',\n    icon: '\\u2717',\n    ariaLabel: 'Verification failed',\n  },\n} as const\n\nfunction VerificationBadge({ verification, className }: VerificationBadgeProps) {\n  const { intent, label, icon, ariaLabel } = config[verification.status]\n\n  return (\n    <Badge\n      intent={intent}\n      size=\"sm\"\n      role=\"status\"\n      aria-label={ariaLabel}\n      className={className}\n    >\n      <span aria-hidden=\"true\" className=\"mr-1\">{icon}</span>\n      {label}\n    </Badge>\n  )\n}\n\nexport { VerificationBadge }\n","import React, { useState } from 'react'\nimport type { VerificationResult } from '../../types/agent'\nimport { VerificationBadge } from '../VerificationBadge'\n\nexport type VerificationDetailProps = {\n  verification: VerificationResult\n  expandable?: boolean\n  defaultExpanded?: boolean\n  className?: string\n}\n\nfunction VerificationDetail({\n  verification,\n  expandable = true,\n  defaultExpanded = false,\n  className,\n}: VerificationDetailProps) {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n\n  const isExpanded = expandable ? expanded : true\n\n  return (\n    <div className={`rounded-xl border border-border bg-surface ${className ?? ''}`} data-testid=\"verification-detail\">\n      <button\n        type=\"button\"\n        className=\"flex w-full items-center justify-between px-4 py-3 text-left\"\n        onClick={() => expandable && setExpanded((prev) => !prev)}\n        aria-expanded={isExpanded}\n        disabled={!expandable}\n      >\n        <span className=\"text-sm font-medium text-text-primary\">Verification</span>\n        <VerificationBadge verification={verification} />\n      </button>\n\n      {isExpanded && (\n        <div\n          className=\"border-t border-border px-4 py-3 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200\"\n          data-testid=\"verification-detail-content\"\n        >\n          <div className=\"flex gap-4 text-xs text-text-secondary\">\n            <span data-testid=\"claims-checked\">\n              Claims checked: <strong className=\"text-text-primary\">{verification.claims_checked}</strong>\n            </span>\n            <span data-testid=\"claims-verified\">\n              Claims verified: <strong className=\"text-text-primary\">{verification.claims_verified}</strong>\n            </span>\n          </div>\n\n          {verification.flags.length > 0 && (\n            <ul className=\"mt-2 space-y-1\" data-testid=\"verification-flags\">\n              {verification.flags.map((flag, i) => (\n                <li key={i} className=\"flex items-start gap-2 text-xs text-text-secondary\">\n                  <span className=\"text-yellow-500 shrink-0\" aria-hidden=\"true\">{'\\u26A0'}</span>\n                  {flag}\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { VerificationDetail }\n"],"mappings":"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","names":["jsx","jsx","jsxs","Badge","jsx","jsxs","useState","jsx","jsxs","useState"]}

package/dist/feedback/index.cjs

@@ -0,0 +1,186 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/feedback/index.ts
+var feedback_exports = {};
+__export(feedback_exports, {
+  FeedbackConfirmation: () => FeedbackConfirmation,
+  FeedbackDialog: () => FeedbackDialog,
+  ThumbsFeedback: () => ThumbsFeedback
+});
+module.exports = __toCommonJS(feedback_exports);
+
+// src/feedback/ThumbsFeedback/ThumbsFeedback.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ThumbsFeedback({
+  messageId,
+  onFeedback,
+  state = null,
+  onNegative,
+  className
+}) {
+  const [selected, setSelected] = (0, import_react.useState)(state);
+  const handleClick = (rating) => {
+    setSelected(rating);
+    onFeedback(messageId, rating);
+    if (rating === "negative" && onNegative) {
+      onNegative();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `inline-flex items-center gap-0.5 ${className ?? ""}`,
+      role: "group",
+      "aria-label": "Rate this response",
+      "data-testid": "thumbs-feedback",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleClick("positive"),
+            "aria-label": "Thumbs up",
+            "aria-pressed": selected === "positive",
+            className: `p-1.5 rounded-md transition-colors duration-200 ${selected === "positive" ? "text-brand-cyan bg-brand-cyan/15" : "text-brand-cream/30 hover:text-brand-cyan hover:bg-brand-cyan/10"}`,
+            "data-testid": "thumbs-up",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 10v12" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleClick("negative"),
+            "aria-label": "Thumbs down",
+            "aria-pressed": selected === "negative",
+            className: `p-1.5 rounded-md transition-colors duration-200 ${selected === "negative" ? "text-brand-watermelon bg-brand-watermelon/15" : "text-brand-cream/30 hover:text-brand-watermelon hover:bg-brand-watermelon/10"}`,
+            "data-testid": "thumbs-down",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 14V2" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z" })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/feedback/FeedbackDialog/FeedbackDialog.tsx
+var import_react2 = require("react");
+var import_core = require("@surf-kit/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function FeedbackDialog({ isOpen, onClose, onSubmit, className }) {
+  const [comment, setComment] = (0, import_react2.useState)("");
+  const handleSubmit = () => {
+    onSubmit(comment);
+    setComment("");
+    onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_core.Dialog,
+    {
+      isOpen,
+      onClose,
+      title: "Share your feedback",
+      size: "sm",
+      className,
+      footer: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core.Button, { intent: "ghost", onPress: onClose, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core.Button, { intent: "primary", onPress: handleSubmit, isDisabled: comment.trim().length === 0, children: "Submit" })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_core.TextArea,
+        {
+          label: "What could be improved?",
+          value: comment,
+          onChange: setComment,
+          placeholder: "Tell us what went wrong or how this response could be better...",
+          rows: 4,
+          "data-testid": "feedback-textarea"
+        }
+      )
+    }
+  );
+}
+
+// src/feedback/FeedbackConfirmation/FeedbackConfirmation.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FeedbackConfirmation({ variant = "inline", className }) {
+  if (variant === "toast") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        role: "status",
+        className: `fixed bottom-4 right-4 bg-surface border border-border rounded-lg px-4 py-3 shadow-lg text-sm text-text-primary ${className ?? ""}`,
+        "data-testid": "feedback-confirmation",
+        children: "Thanks for your feedback"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      role: "status",
+      className: `text-sm text-text-secondary ${className ?? ""}`,
+      "data-testid": "feedback-confirmation",
+      children: "Thanks for your feedback"
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FeedbackConfirmation,
+  FeedbackDialog,
+  ThumbsFeedback
+});
+//# sourceMappingURL=index.cjs.map

package/dist/feedback/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/index.ts","../../src/feedback/ThumbsFeedback/ThumbsFeedback.tsx","../../src/feedback/FeedbackDialog/FeedbackDialog.tsx","../../src/feedback/FeedbackConfirmation/FeedbackConfirmation.tsx"],"sourcesContent":["export { ThumbsFeedback } from './ThumbsFeedback'\nexport type { ThumbsFeedbackProps, FeedbackRating } from './ThumbsFeedback'\n\nexport { FeedbackDialog } from './FeedbackDialog'\nexport type { FeedbackDialogProps } from './FeedbackDialog'\n\nexport { FeedbackConfirmation } from './FeedbackConfirmation'\nexport type { FeedbackConfirmationProps } from './FeedbackConfirmation'\n","import React, { useState } from 'react'\n\ntype FeedbackRating = 'positive' | 'negative'\n\ntype ThumbsFeedbackProps = {\n  messageId: string\n  onFeedback: (messageId: string, rating: FeedbackRating, comment?: string) => void\n  state?: FeedbackRating | null\n  onNegative?: () => void\n  className?: string\n}\n\nfunction ThumbsFeedback({\n  messageId,\n  onFeedback,\n  state = null,\n  onNegative,\n  className,\n}: ThumbsFeedbackProps) {\n  const [selected, setSelected] = useState<FeedbackRating | null>(state)\n\n  const handleClick = (rating: FeedbackRating) => {\n    setSelected(rating)\n    onFeedback(messageId, rating)\n    if (rating === 'negative' && onNegative) {\n      onNegative()\n    }\n  }\n\n  return (\n    <div\n      className={`inline-flex items-center gap-0.5 ${className ?? ''}`}\n      role=\"group\"\n      aria-label=\"Rate this response\"\n      data-testid=\"thumbs-feedback\"\n    >\n      <button\n        type=\"button\"\n        onClick={() => handleClick('positive')}\n        aria-label=\"Thumbs up\"\n        aria-pressed={selected === 'positive'}\n        className={`p-1.5 rounded-md transition-colors duration-200 ${\n          selected === 'positive'\n            ? 'text-brand-cyan bg-brand-cyan/15'\n            : 'text-brand-cream/30 hover:text-brand-cyan hover:bg-brand-cyan/10'\n        }`}\n        data-testid=\"thumbs-up\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M7 10v12\" />\n          <path d=\"M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        onClick={() => handleClick('negative')}\n        aria-label=\"Thumbs down\"\n        aria-pressed={selected === 'negative'}\n        className={`p-1.5 rounded-md transition-colors duration-200 ${\n          selected === 'negative'\n            ? 'text-brand-watermelon bg-brand-watermelon/15'\n            : 'text-brand-cream/30 hover:text-brand-watermelon hover:bg-brand-watermelon/10'\n        }`}\n        data-testid=\"thumbs-down\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M17 14V2\" />\n          <path d=\"M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z\" />\n        </svg>\n      </button>\n    </div>\n  )\n}\n\nexport { ThumbsFeedback }\nexport type { ThumbsFeedbackProps, FeedbackRating }\n","import React, { useState } from 'react'\nimport { Dialog, Button, TextArea } from '@surf-kit/core'\n\ntype FeedbackDialogProps = {\n  isOpen: boolean\n  onClose: () => void\n  onSubmit: (comment: string) => void\n  className?: string\n}\n\nfunction FeedbackDialog({ isOpen, onClose, onSubmit, className }: FeedbackDialogProps) {\n  const [comment, setComment] = useState('')\n\n  const handleSubmit = () => {\n    onSubmit(comment)\n    setComment('')\n    onClose()\n  }\n\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onClose={onClose}\n      title=\"Share your feedback\"\n      size=\"sm\"\n      className={className}\n      footer={\n        <>\n          <Button intent=\"ghost\" onPress={onClose}>\n            Cancel\n          </Button>\n          <Button intent=\"primary\" onPress={handleSubmit} isDisabled={comment.trim().length === 0}>\n            Submit\n          </Button>\n        </>\n      }\n    >\n      <TextArea\n        label=\"What could be improved?\"\n        value={comment}\n        onChange={setComment}\n        placeholder=\"Tell us what went wrong or how this response could be better...\"\n        rows={4}\n        data-testid=\"feedback-textarea\"\n      />\n    </Dialog>\n  )\n}\n\nexport { FeedbackDialog }\nexport type { FeedbackDialogProps }\n","import React from 'react'\n\ntype FeedbackConfirmationProps = {\n  variant?: 'inline' | 'toast'\n  className?: string\n}\n\nfunction FeedbackConfirmation({ variant = 'inline', className }: FeedbackConfirmationProps) {\n  if (variant === 'toast') {\n    return (\n      <div\n        role=\"status\"\n        className={`fixed bottom-4 right-4 bg-surface border border-border rounded-lg px-4 py-3 shadow-lg text-sm text-text-primary ${className ?? ''}`}\n        data-testid=\"feedback-confirmation\"\n      >\n        Thanks for your feedback\n      </div>\n    )\n  }\n\n  return (\n    <span\n      role=\"status\"\n      className={`text-sm text-text-secondary ${className ?? ''}`}\n      data-testid=\"feedback-confirmation\"\n    >\n      Thanks for your feedback\n    </span>\n  )\n}\n\nexport { FeedbackConfirmation }\nexport type { FeedbackConfirmationProps }\n"],"mappings":"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","names":["import_react","import_jsx_runtime","import_jsx_runtime"]}

package/dist/feedback/index.d.cts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type FeedbackRating = 'positive' | 'negative';
+type ThumbsFeedbackProps = {
+    messageId: string;
+    onFeedback: (messageId: string, rating: FeedbackRating, comment?: string) => void;
+    state?: FeedbackRating | null;
+    onNegative?: () => void;
+    className?: string;
+};
+declare function ThumbsFeedback({ messageId, onFeedback, state, onNegative, className, }: ThumbsFeedbackProps): react_jsx_runtime.JSX.Element;
+
+type FeedbackDialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (comment: string) => void;
+    className?: string;
+};
+declare function FeedbackDialog({ isOpen, onClose, onSubmit, className }: FeedbackDialogProps): react_jsx_runtime.JSX.Element;
+
+type FeedbackConfirmationProps = {
+    variant?: 'inline' | 'toast';
+    className?: string;
+};
+declare function FeedbackConfirmation({ variant, className }: FeedbackConfirmationProps): react_jsx_runtime.JSX.Element;
+
+export { FeedbackConfirmation, type FeedbackConfirmationProps, FeedbackDialog, type FeedbackDialogProps, type FeedbackRating, ThumbsFeedback, type ThumbsFeedbackProps };

package/dist/feedback/index.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type FeedbackRating = 'positive' | 'negative';
+type ThumbsFeedbackProps = {
+    messageId: string;
+    onFeedback: (messageId: string, rating: FeedbackRating, comment?: string) => void;
+    state?: FeedbackRating | null;
+    onNegative?: () => void;
+    className?: string;
+};
+declare function ThumbsFeedback({ messageId, onFeedback, state, onNegative, className, }: ThumbsFeedbackProps): react_jsx_runtime.JSX.Element;
+
+type FeedbackDialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (comment: string) => void;
+    className?: string;
+};
+declare function FeedbackDialog({ isOpen, onClose, onSubmit, className }: FeedbackDialogProps): react_jsx_runtime.JSX.Element;
+
+type FeedbackConfirmationProps = {
+    variant?: 'inline' | 'toast';
+    className?: string;
+};
+declare function FeedbackConfirmation({ variant, className }: FeedbackConfirmationProps): react_jsx_runtime.JSX.Element;
+
+export { FeedbackConfirmation, type FeedbackConfirmationProps, FeedbackDialog, type FeedbackDialogProps, type FeedbackRating, ThumbsFeedback, type ThumbsFeedbackProps };

package/dist/feedback/index.js

@@ -0,0 +1,157 @@
+// src/feedback/ThumbsFeedback/ThumbsFeedback.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ThumbsFeedback({
+  messageId,
+  onFeedback,
+  state = null,
+  onNegative,
+  className
+}) {
+  const [selected, setSelected] = useState(state);
+  const handleClick = (rating) => {
+    setSelected(rating);
+    onFeedback(messageId, rating);
+    if (rating === "negative" && onNegative) {
+      onNegative();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `inline-flex items-center gap-0.5 ${className ?? ""}`,
+      role: "group",
+      "aria-label": "Rate this response",
+      "data-testid": "thumbs-feedback",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleClick("positive"),
+            "aria-label": "Thumbs up",
+            "aria-pressed": selected === "positive",
+            className: `p-1.5 rounded-md transition-colors duration-200 ${selected === "positive" ? "text-brand-cyan bg-brand-cyan/15" : "text-brand-cream/30 hover:text-brand-cyan hover:bg-brand-cyan/10"}`,
+            "data-testid": "thumbs-up",
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M7 10v12" }),
+                  /* @__PURE__ */ jsx("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleClick("negative"),
+            "aria-label": "Thumbs down",
+            "aria-pressed": selected === "negative",
+            className: `p-1.5 rounded-md transition-colors duration-200 ${selected === "negative" ? "text-brand-watermelon bg-brand-watermelon/15" : "text-brand-cream/30 hover:text-brand-watermelon hover:bg-brand-watermelon/10"}`,
+            "data-testid": "thumbs-down",
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M17 14V2" }),
+                  /* @__PURE__ */ jsx("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z" })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/feedback/FeedbackDialog/FeedbackDialog.tsx
+import { useState as useState2 } from "react";
+import { Dialog, Button, TextArea } from "@surf-kit/core";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function FeedbackDialog({ isOpen, onClose, onSubmit, className }) {
+  const [comment, setComment] = useState2("");
+  const handleSubmit = () => {
+    onSubmit(comment);
+    setComment("");
+    onClose();
+  };
+  return /* @__PURE__ */ jsx2(
+    Dialog,
+    {
+      isOpen,
+      onClose,
+      title: "Share your feedback",
+      size: "sm",
+      className,
+      footer: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(Button, { intent: "ghost", onPress: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx2(Button, { intent: "primary", onPress: handleSubmit, isDisabled: comment.trim().length === 0, children: "Submit" })
+      ] }),
+      children: /* @__PURE__ */ jsx2(
+        TextArea,
+        {
+          label: "What could be improved?",
+          value: comment,
+          onChange: setComment,
+          placeholder: "Tell us what went wrong or how this response could be better...",
+          rows: 4,
+          "data-testid": "feedback-textarea"
+        }
+      )
+    }
+  );
+}
+
+// src/feedback/FeedbackConfirmation/FeedbackConfirmation.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function FeedbackConfirmation({ variant = "inline", className }) {
+  if (variant === "toast") {
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        role: "status",
+        className: `fixed bottom-4 right-4 bg-surface border border-border rounded-lg px-4 py-3 shadow-lg text-sm text-text-primary ${className ?? ""}`,
+        "data-testid": "feedback-confirmation",
+        children: "Thanks for your feedback"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      role: "status",
+      className: `text-sm text-text-secondary ${className ?? ""}`,
+      "data-testid": "feedback-confirmation",
+      children: "Thanks for your feedback"
+    }
+  );
+}
+export {
+  FeedbackConfirmation,
+  FeedbackDialog,
+  ThumbsFeedback
+};
+//# sourceMappingURL=index.js.map