@withpotter/components 0.13.0-next.101

package/dist/help/assistant-chat.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help/assistant-chat.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport Link from 'next/link';\nimport { ArrowUp, LifeBuoy } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { AutoGrowTextarea } from '@withpotter/ui-kit/auto-grow-textarea';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { useCurrentTemplate } from '@withpotter/lib/template-context';\nimport { resolveEnabledBehaviors } from '@withpotter/lib/resolve-enabled-behaviors';\nimport { resolveHelpTopics, type HelpTopic } from '@withpotter/lib/help-topics';\nimport { SUPPORT_NAME } from '@withpotter/lib/support';\nimport { SecondaryShell } from '@withpotter/components/shell/secondary-shell';\nimport { ChatFrame } from './case-chat-panel';\nimport { replyTo, startingQuestions, type AssistantReply } from './assistant-reply';\n\n/**\n * The support helper: ask in your own words, get the help topic that answers it, and reach a person from\n * the same place when it does not. It answers from the Help topics and searches them the way that tab\n * does; there is no AI behind it, so what it says is always something we wrote.\n */\nexport function AssistantChat({\n  seed,\n  onClose,\n  onStartCase,\n  onRaiseDispute,\n}: {\n  seed: string;\n  onClose: () => void;\n  /** Opens a case with the question already written. */\n  onStartCase: (question: string) => void;\n  onRaiseDispute: () => void;\n}) {\n  const { tenant } = useAuth();\n  const { template } = useCurrentTemplate(tenant?.templateId);\n  const topics = useMemo(\n    () =>\n      resolveHelpTopics(\n        resolveEnabledBehaviors(\n          tenant?.settings as Record<string, unknown> | undefined,\n          template,\n        ),\n      ),\n    [tenant?.settings, template],\n  );\n\n  // Only the questions are kept. A reply is worked out when it is drawn, so a question that arrived\n  // with the panel (`seed`) is answered as soon as the topics have resolved with the business.\n  const [asked, setAsked] = useState<string[]>(() => (seed.trim() ? [seed.trim()] : []));\n  const [draft, setDraft] = useState('');\n\n  const ask = (text: string) => {\n    const question = text.trim();\n    if (!question) return;\n    setAsked((current) => [...current, question]);\n    setDraft('');\n  };\n\n  return (\n    <SecondaryShell title={`Ask ${SUPPORT_NAME}`} onClose={onClose} flush>\n      <ChatFrame\n        thread={\n          <div className=\"space-y-3\">\n            <HelperBubble>\n              <p>\n                Hi, I can point you to the answer. Ask in your own words, or pick a\n                question. If I can’t help, I’ll open a case with the team.\n              </p>\n              {asked.length === 0 && (\n                <div className=\"mt-3 flex flex-wrap gap-2\">\n                  {startingQuestions(topics).map((question) => (\n                    <button\n                      key={question}\n                      type=\"button\"\n                      onClick={() => ask(question)}\n                      className=\"rounded-full border border-[var(--border-default)] px-3 py-1 text-left text-sm text-[var(--text-secondary)] hover:bg-[var(--interactive-active)]\"\n                    >\n                      {question}\n                    </button>\n                  ))}\n                </div>\n              )}\n            </HelperBubble>\n            {asked.map((question, index) => (\n              <div key={index} className=\"space-y-3\">\n                <YouBubble>{question}</YouBubble>\n                <ReplyBubble\n                  reply={replyTo(topics, question)}\n                  question={question}\n                  onAsk={ask}\n                  onStartCase={onStartCase}\n                  onRaiseDispute={onRaiseDispute}\n                />\n              </div>\n            ))}\n          </div>\n        }\n        composer={\n          <form\n            className=\"flex items-end gap-2\"\n            onSubmit={(event) => {\n              event.preventDefault();\n              ask(draft);\n            }}\n          >\n            <AutoGrowTextarea\n              value={draft}\n              onChange={(event) => setDraft(event.target.value)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter' && !event.shiftKey) {\n                  event.preventDefault();\n                  ask(draft);\n                }\n              }}\n              placeholder=\"Ask a question\"\n              rows={1}\n              className=\"min-h-9 flex-1 resize-none bg-transparent text-sm outline-none\"\n              aria-label=\"Ask a question\"\n            />\n            <Button type=\"submit\" size=\"icon\" disabled={!draft.trim()} aria-label=\"Send\">\n              <ArrowUp />\n            </Button>\n          </form>\n        }\n      />\n    </SecondaryShell>\n  );\n}\n\nfunction YouBubble({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"ml-auto max-w-[85%] rounded-2xl rounded-br-md bg-[var(--bg-muted)] px-3 py-2 text-sm text-ink\">\n      {children}\n    </div>\n  );\n}\n\nfunction HelperBubble({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"max-w-[92%] rounded-2xl rounded-bl-md border border-[var(--border-subtle)] px-3 py-2 text-sm text-[var(--text-secondary)]\">\n      {children}\n    </div>\n  );\n}\n\nfunction TopicAnswer({ topic }: { topic: HelpTopic }) {\n  return (\n    <div>\n      <p className=\"font-medium text-ink\">{topic.question}</p>\n      <p className=\"mt-1\">{topic.answer}</p>\n      {topic.steps && topic.steps.length > 0 && (\n        <ol className=\"mt-2 list-decimal space-y-1 pl-5\">\n          {topic.steps.map((step) => (\n            <li key={step}>{step}</li>\n          ))}\n        </ol>\n      )}\n      {topic.action && (\n        <Link\n          href={topic.action.href}\n          className=\"mt-2 inline-block font-medium text-[var(--brand-600)] underline-offset-2 hover:underline\"\n        >\n          {topic.action.label}\n        </Link>\n      )}\n    </div>\n  );\n}\n\nfunction ReplyBubble({\n  reply,\n  question,\n  onAsk,\n  onStartCase,\n  onRaiseDispute,\n}: {\n  reply: AssistantReply;\n  question: string;\n  onAsk: (text: string) => void;\n  onStartCase: (question: string) => void;\n  onRaiseDispute: () => void;\n}) {\n  const person = (\n    <Button\n      variant=\"secondary\"\n      className=\"mt-3\"\n      onClick={() => onStartCase(question)}\n    >\n      <LifeBuoy />\n      Talk to a person\n    </Button>\n  );\n\n  if (reply.kind === 'dispute') {\n    return (\n      <HelperBubble>\n        <p>That sounds like a dispute. Raise it and the team is told straight away.</p>\n        <Button className=\"mt-3\" onClick={onRaiseDispute}>\n          Raise a dispute\n        </Button>\n      </HelperBubble>\n    );\n  }\n\n  if (reply.kind === 'person') {\n    return (\n      <HelperBubble>\n        <p>Of course. I’ll open a case with what you wrote, and the team replies here and by email.</p>\n        {person}\n      </HelperBubble>\n    );\n  }\n\n  if (reply.kind === 'none') {\n    return (\n      <HelperBubble>\n        <p>I don’t have an answer for that one. The team can help.</p>\n        {person}\n      </HelperBubble>\n    );\n  }\n\n  return (\n    <HelperBubble>\n      <TopicAnswer topic={reply.best} />\n      {reply.related.length > 0 && (\n        <div className=\"mt-3\">\n          <p className=\"text-xs text-[var(--text-tertiary)]\">Related</p>\n          <div className=\"mt-1 flex flex-wrap gap-2\">\n            {reply.related.map((topic) => (\n              <button\n                key={topic.id}\n                type=\"button\"\n                onClick={() => onAsk(topic.question)}\n                className=\"rounded-full border border-[var(--border-default)] px-3 py-1 text-left text-sm hover:bg-[var(--interactive-active)]\"\n              >\n                {topic.question}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n      <p className=\"mt-3 text-xs text-[var(--text-tertiary)]\">Not what you needed?</p>\n      {person}\n    </HelperBubble>\n  );\n}\n"],"mappings":";AA+DY,SACE,KADF;AA7DZ,SAAS,SAAS,gBAAgB;AAClC,OAAO,UAAU;AACjB,SAAS,SAAS,gBAAgB;AAClC,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,eAAe;AACxB,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,yBAAyC;AAClD,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,SAAS,yBAA8C;AAOzD,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,EAAE,OAAO,IAAI,QAAQ;AAC3B,QAAM,EAAE,SAAS,IAAI,mBAAmB,QAAQ,UAAU;AAC1D,QAAM,SAAS;AAAA,IACb,MACE;AAAA,MACE;AAAA,QACE,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,IACF,CAAC,QAAQ,UAAU,QAAQ;AAAA,EAC7B;AAIA,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAmB,MAAO,KAAK,KAAK,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,CAAE;AACrF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AAErC,QAAM,MAAM,CAAC,SAAiB;AAC5B,UAAM,WAAW,KAAK,KAAK;AAC3B,QAAI,CAAC,SAAU;AACf,aAAS,CAAC,YAAY,CAAC,GAAG,SAAS,QAAQ,CAAC;AAC5C,aAAS,EAAE;AAAA,EACb;AAEA,SACE,oBAAC,kBAAe,OAAO,OAAO,YAAY,IAAI,SAAkB,OAAK,MACnE;AAAA,IAAC;AAAA;AAAA,MACC,QACE,qBAAC,SAAI,WAAU,aACb;AAAA,6BAAC,gBACC;AAAA,8BAAC,OAAE,sJAGH;AAAA,UACC,MAAM,WAAW,KAChB,oBAAC,SAAI,WAAU,6BACZ,4BAAkB,MAAM,EAAE,IAAI,CAAC,aAC9B;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,SAAS,MAAM,IAAI,QAAQ;AAAA,cAC3B,WAAU;AAAA,cAET;AAAA;AAAA,YALI;AAAA,UAMP,CACD,GACH;AAAA,WAEJ;AAAA,QACC,MAAM,IAAI,CAAC,UAAU,UACpB,qBAAC,SAAgB,WAAU,aACzB;AAAA,8BAAC,aAAW,oBAAS;AAAA,UACrB;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,QAAQ,QAAQ,QAAQ;AAAA,cAC/B;AAAA,cACA,OAAO;AAAA,cACP;AAAA,cACA;AAAA;AAAA,UACF;AAAA,aARQ,KASV,CACD;AAAA,SACH;AAAA,MAEF,UACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,UAAU,CAAC,UAAU;AACnB,kBAAM,eAAe;AACrB,gBAAI,KAAK;AAAA,UACX;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,gBAChD,WAAW,CAAC,UAAU;AACpB,sBAAI,MAAM,QAAQ,WAAW,CAAC,MAAM,UAAU;AAC5C,0BAAM,eAAe;AACrB,wBAAI,KAAK;AAAA,kBACX;AAAA,gBACF;AAAA,gBACA,aAAY;AAAA,gBACZ,MAAM;AAAA,gBACN,WAAU;AAAA,gBACV,cAAW;AAAA;AAAA,YACb;AAAA,YACA,oBAAC,UAAO,MAAK,UAAS,MAAK,QAAO,UAAU,CAAC,MAAM,KAAK,GAAG,cAAW,QACpE,8BAAC,WAAQ,GACX;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,SAAS,UAAU,EAAE,SAAS,GAAkC;AAC9D,SACE,oBAAC,SAAI,WAAU,iGACZ,UACH;AAEJ;AAEA,SAAS,aAAa,EAAE,SAAS,GAAkC;AACjE,SACE,oBAAC,SAAI,WAAU,6HACZ,UACH;AAEJ;AAEA,SAAS,YAAY,EAAE,MAAM,GAAyB;AACpD,SACE,qBAAC,SACC;AAAA,wBAAC,OAAE,WAAU,wBAAwB,gBAAM,UAAS;AAAA,IACpD,oBAAC,OAAE,WAAU,QAAQ,gBAAM,QAAO;AAAA,IACjC,MAAM,SAAS,MAAM,MAAM,SAAS,KACnC,oBAAC,QAAG,WAAU,oCACX,gBAAM,MAAM,IAAI,CAAC,SAChB,oBAAC,QAAe,kBAAP,IAAY,CACtB,GACH;AAAA,IAED,MAAM,UACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM,OAAO;AAAA,QACnB,WAAU;AAAA,QAET,gBAAM,OAAO;AAAA;AAAA,IAChB;AAAA,KAEJ;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,SAAS,MAAM,YAAY,QAAQ;AAAA,MAEnC;AAAA,4BAAC,YAAS;AAAA,QAAE;AAAA;AAAA;AAAA,EAEd;AAGF,MAAI,MAAM,SAAS,WAAW;AAC5B,WACE,qBAAC,gBACC;AAAA,0BAAC,OAAE,sFAAwE;AAAA,MAC3E,oBAAC,UAAO,WAAU,QAAO,SAAS,gBAAgB,6BAElD;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,MAAM,SAAS,UAAU;AAC3B,WACE,qBAAC,gBACC;AAAA,0BAAC,OAAE,2GAAwF;AAAA,MAC1F;AAAA,OACH;AAAA,EAEJ;AAEA,MAAI,MAAM,SAAS,QAAQ;AACzB,WACE,qBAAC,gBACC;AAAA,0BAAC,OAAE,0EAAuD;AAAA,MACzD;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,qBAAC,gBACC;AAAA,wBAAC,eAAY,OAAO,MAAM,MAAM;AAAA,IAC/B,MAAM,QAAQ,SAAS,KACtB,qBAAC,SAAI,WAAU,QACb;AAAA,0BAAC,OAAE,WAAU,uCAAsC,qBAAO;AAAA,MAC1D,oBAAC,SAAI,WAAU,6BACZ,gBAAM,QAAQ,IAAI,CAAC,UAClB;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,MAAM,MAAM,QAAQ;AAAA,UACnC,WAAU;AAAA,UAET,gBAAM;AAAA;AAAA,QALF,MAAM;AAAA,MAMb,CACD,GACH;AAAA,OACF;AAAA,IAEF,oBAAC,OAAE,WAAU,4CAA2C,kCAAoB;AAAA,IAC3E;AAAA,KACH;AAEJ;","names":[]}

package/dist/help/assistant-reply.d.ts

@@ -0,0 +1,21 @@
+import { type HelpTopic } from '@withpotter/lib/help-topics';
+/**
+ * What the support helper says back. No AI behind it: the answer is the help topics' own, found by the
+ * same search the Help topics tab uses, and anything it cannot answer goes to a person with the
+ * question already written.
+ */
+export type AssistantReply = {
+    kind: 'answer';
+    best: HelpTopic;
+    related: HelpTopic[];
+} | {
+    kind: 'dispute';
+} | {
+    kind: 'person';
+} | {
+    kind: 'none';
+};
+/** Answers a question from the help topics, or says who should. */
+export declare function replyTo(topics: HelpTopic[], question: string): AssistantReply;
+/** A few questions to start from, so the first message is a tap and not a blank box. */
+export declare function startingQuestions(topics: HelpTopic[], count?: number): string[];

package/dist/help/assistant-reply.js

@@ -0,0 +1,19 @@
+import { searchHelpTopics } from "@withpotter/lib/help-topics";
+const PERSON = /\b(human|person|agent|someone|somebody|speak|talk to|call me|contact (support|us)|customer (care|service)|support team)\b/i;
+const DISPUTE = /\b(disputes?|chargebacks?|charged twice|double charge|wrongly charged|unauthori[sz]ed|fraud)\b/i;
+function replyTo(topics, question) {
+  const text = question.trim();
+  if (PERSON.test(text)) return { kind: "person" };
+  if (DISPUTE.test(text)) return { kind: "dispute" };
+  const found = searchHelpTopics(topics, text);
+  if (found.length === 0 || found.length === topics.length) return { kind: "none" };
+  return { kind: "answer", best: found[0], related: found.slice(1, 3) };
+}
+function startingQuestions(topics, count = 4) {
+  return topics.slice(0, count).map((topic) => topic.question);
+}
+export {
+  replyTo,
+  startingQuestions
+};
+//# sourceMappingURL=assistant-reply.js.map

package/dist/help/assistant-reply.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help/assistant-reply.ts"],"sourcesContent":["import { searchHelpTopics, type HelpTopic } from '@withpotter/lib/help-topics';\n\n/**\n * What the support helper says back. No AI behind it: the answer is the help topics' own, found by the\n * same search the Help topics tab uses, and anything it cannot answer goes to a person with the\n * question already written.\n */\nexport type AssistantReply =\n  | { kind: 'answer'; best: HelpTopic; related: HelpTopic[] }\n  | { kind: 'dispute' }\n  | { kind: 'person' }\n  | { kind: 'none' };\n\nconst PERSON = /\\b(human|person|agent|someone|somebody|speak|talk to|call me|contact (support|us)|customer (care|service)|support team)\\b/i;\nconst DISPUTE = /\\b(disputes?|chargebacks?|charged twice|double charge|wrongly charged|unauthori[sz]ed|fraud)\\b/i;\n\n/** Answers a question from the help topics, or says who should. */\nexport function replyTo(topics: HelpTopic[], question: string): AssistantReply {\n  const text = question.trim();\n\n  if (PERSON.test(text)) return { kind: 'person' };\n\n  if (DISPUTE.test(text)) return { kind: 'dispute' };\n\n  // A search that matches everything (no usable words) is no answer.\n  const found = searchHelpTopics(topics, text);\n\n  if (found.length === 0 || found.length === topics.length) return { kind: 'none' };\n\n  return { kind: 'answer', best: found[0], related: found.slice(1, 3) };\n}\n\n/** A few questions to start from, so the first message is a tap and not a blank box. */\nexport function startingQuestions(topics: HelpTopic[], count = 4): string[] {\n  return topics.slice(0, count).map((topic) => topic.question);\n}\n"],"mappings":"AAAA,SAAS,wBAAwC;AAajD,MAAM,SAAS;AACf,MAAM,UAAU;AAGT,SAAS,QAAQ,QAAqB,UAAkC;AAC7E,QAAM,OAAO,SAAS,KAAK;AAE3B,MAAI,OAAO,KAAK,IAAI,EAAG,QAAO,EAAE,MAAM,SAAS;AAE/C,MAAI,QAAQ,KAAK,IAAI,EAAG,QAAO,EAAE,MAAM,UAAU;AAGjD,QAAM,QAAQ,iBAAiB,QAAQ,IAAI;AAE3C,MAAI,MAAM,WAAW,KAAK,MAAM,WAAW,OAAO,OAAQ,QAAO,EAAE,MAAM,OAAO;AAEhF,SAAO,EAAE,MAAM,UAAU,MAAM,MAAM,CAAC,GAAG,SAAS,MAAM,MAAM,GAAG,CAAC,EAAE;AACtE;AAGO,SAAS,kBAAkB,QAAqB,QAAQ,GAAa;AAC1E,SAAO,OAAO,MAAM,GAAG,KAAK,EAAE,IAAI,CAAC,UAAU,MAAM,QAAQ;AAC7D;","names":[]}

package/dist/help/case-chat-panel.d.ts

@@ -0,0 +1,34 @@
+/** What the right-hand shell is showing. */
+export type CasePanel = {
+    kind: 'new';
+    seed: string;
+} | {
+    kind: 'case';
+    id: string;
+} | {
+    kind: 'assistant';
+    seed: string;
+};
+/**
+ * The conversation, in the second content shell.
+ *
+ * Starting a case and replying to one are the same act in the same place: a
+ * thread with a box at the foot. It used to be a dialog for the first and a
+ * whole page for the second, so the two did not look like one conversation, and
+ * reading a reply meant leaving the cases you were looking at. Here the shell
+ * beside the page holds the thread, the list stays where it was, and "start a
+ * case" is just a thread that has no messages yet.
+ *
+ * The shell is the one Automations draws its flow in (`SecondaryShell`), so a
+ * phone, which has one column, gets the same thing inline.
+ */
+export declare function CaseChatPanel({ panel, onClose, onOpenCase, }: {
+    panel: CasePanel;
+    onClose: () => void;
+    onOpenCase: (id: string) => void;
+}): import("react").JSX.Element | null;
+/** The scroll area and the box under it, sized to the shell. */
+export declare function ChatFrame({ thread, composer, }: {
+    thread: React.ReactNode;
+    composer: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/help/case-chat-panel.js

@@ -0,0 +1,233 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { MessageSquarePlus } from "lucide-react";
+import { StateView } from "@withpotter/ui-kit";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { merchantNotificationsApi } from "@withpotter/lib/api/merchant-notifications";
+import {
+  serviceOperationsApi
+} from "@withpotter/lib/service-operations-api";
+import { subjectFrom } from "@withpotter/lib/support-case-subject";
+import {
+  DISPUTE_PLACEHOLDER,
+  DISPUTE_TITLE,
+  disputeSeed,
+  disputeSubject,
+  isUntouchedDispute
+} from "./dispute-case";
+import { SecondaryShell } from "@withpotter/components/shell/secondary-shell";
+import {
+  CaseComposer,
+  useCaseComposer
+} from "@withpotter/components/support/case-composer";
+import { CaseMessage } from "@withpotter/components/help/case-message";
+import { SupportStatus } from "@withpotter/components/support/support-case-ui";
+function CaseChatPanel({
+  panel,
+  onClose,
+  onOpenCase
+}) {
+  if (panel.kind === "assistant") return null;
+  return panel.kind === "new" ? /* @__PURE__ */ jsx(NewCaseChat, { seed: panel.seed, onClose, onOpenCase }) : /* @__PURE__ */ jsx(CaseThreadChat, { caseId: panel.id, onClose });
+}
+function ChatFrame({
+  thread,
+  composer
+}) {
+  const scroller = useRef(null);
+  useEffect(() => {
+    const el = scroller.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scroller,
+        className: "min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain p-4",
+        children: thread
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-[var(--border-subtle)] p-3", children: composer })
+  ] });
+}
+function NewCaseChat({
+  seed,
+  onClose,
+  onOpenCase
+}) {
+  const { tenant } = useAuth();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const composer = useCaseComposer();
+  const [message, setMessage] = useState(seed);
+  const dispute = seed === disputeSeed();
+  const rawSubject = subjectFrom(message, composer.hasAttachment);
+  const subject = dispute && rawSubject ? disputeSubject(rawSubject) : rawSubject;
+  const ready = subject.length >= 3 && !(dispute && isUntouchedDispute(message)) && (message.trim().length > 0 || composer.hasAttachment);
+  const create = useMutation({
+    mutationFn: async () => {
+      const attachments = await composer.collect();
+      if (attachments === null) throw new Error("attachment-upload-failed");
+      return serviceOperationsApi.create(tenant.slug, {
+        subject,
+        // A voice note IS the message when nothing was typed, and the API needs
+        // a body for the first message either way.
+        message: message.trim() || "Voice note.",
+        attachments
+      });
+    },
+    onSuccess: async (created) => {
+      composer.reset();
+      await queryClient.invalidateQueries({ queryKey: ["support-cases"] });
+      toast({
+        title: dispute ? "Dispute raised" : "Case opened",
+        description: "We reply here and by email."
+      });
+      onOpenCase(created.id);
+    },
+    onError: (error) => {
+      if (error.message === "attachment-upload-failed") return;
+      toast({ title: "That did not send", variant: "destructive" });
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    SecondaryShell,
+    {
+      title: dispute ? DISPUTE_TITLE : "New case",
+      onClose,
+      flush: true,
+      children: /* @__PURE__ */ jsx(
+        ChatFrame,
+        {
+          thread: /* @__PURE__ */ jsx("div", { className: "grid h-full place-items-center px-6 text-center", children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "mx-auto grid size-10 place-items-center rounded-xl bg-[var(--bg-muted)] text-[var(--text-secondary)]", children: /* @__PURE__ */ jsx(MessageSquarePlus, { className: "size-5" }) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-medium text-ink", children: dispute ? "What is the dispute about?" : "What is going on?" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--text-tertiary)]", children: dispute ? "Fill in what you know: the transaction reference, the amount and the date. A screenshot of the receipt helps. The support team is told at once, and we reply here and by email." : "Say what you were doing and what you expected. A screenshot or a voice note helps. We reply here and by email." })
+          ] }) }),
+          composer: /* @__PURE__ */ jsx(
+            CaseComposer,
+            {
+              composer,
+              value: message,
+              onValueChange: setMessage,
+              onSend: () => ready && create.mutate(),
+              placeholder: dispute ? DISPUTE_PLACEHOLDER : "What happened?",
+              busy: create.isPending,
+              minRows: dispute ? 6 : 3
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function CaseThreadChat({
+  caseId,
+  onClose
+}) {
+  const { tenant } = useAuth();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const composer = useCaseComposer();
+  const [message, setMessage] = useState("");
+  const slug = tenant?.slug;
+  const serviceCase = useQuery({
+    queryKey: ["support-case", slug, caseId],
+    queryFn: () => serviceOperationsApi.get(slug, caseId),
+    enabled: Boolean(slug),
+    // A reply from support should land while the thread is open, not on the
+    // next time somebody remembers to look.
+    refetchInterval: 2e4
+  });
+  const record = serviceCase.data;
+  const recordId = record?.id;
+  const recordUpdated = record?.updatedAt;
+  useEffect(() => {
+    if (!slug || !recordId) return;
+    const cached = queryClient.getQueryData([
+      "merchant-notifications"
+    ]);
+    const ids = (cached?.notifications ?? []).filter((n) => !n.readAt && n.link === `/dashboard/support/${recordId}`).map((n) => n.id);
+    if (ids.length === 0) return;
+    void merchantNotificationsApi.markManyRead(slug, ids).catch(() => null).then(
+      () => queryClient.invalidateQueries({ queryKey: ["merchant-notifications"] })
+    );
+  }, [slug, recordId, recordUpdated, queryClient]);
+  const reply = useMutation({
+    mutationFn: async () => {
+      const attachments = await composer.collect();
+      if (attachments === null) throw new Error("attachment-upload-failed");
+      return serviceOperationsApi.reply(
+        slug,
+        caseId,
+        message.trim() || "Voice note.",
+        attachments
+      );
+    },
+    onSuccess: async () => {
+      setMessage("");
+      composer.reset();
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["support-case"] }),
+        queryClient.invalidateQueries({ queryKey: ["support-cases"] })
+      ]);
+    },
+    onError: (error) => {
+      if (error.message === "attachment-upload-failed") return;
+      toast({ title: "That did not send", variant: "destructive" });
+    }
+  });
+  if (!record) {
+    return /* @__PURE__ */ jsx(SecondaryShell, { title: "Case", onClose, flush: true, children: /* @__PURE__ */ jsx("div", { className: "grid h-full place-items-center p-6", children: /* @__PURE__ */ jsx(
+      StateView,
+      {
+        kind: serviceCase.isError ? "error" : serviceCase.isLoading ? "loading" : "empty",
+        title: serviceCase.isError ? "This case could not be loaded." : "Loading",
+        action: serviceCase.isError ? {
+          label: "Try again",
+          onClick: () => void serviceCase.refetch()
+        } : void 0
+      }
+    ) }) });
+  }
+  const closed = record.status === "closed";
+  return /* @__PURE__ */ jsx(
+    SecondaryShell,
+    {
+      title: record.subject,
+      actions: /* @__PURE__ */ jsx(SupportStatus, { status: record.status }),
+      onClose,
+      flush: true,
+      children: /* @__PURE__ */ jsx(
+        ChatFrame,
+        {
+          thread: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: record.reference }),
+            (record.messages ?? []).map((item) => /* @__PURE__ */ jsx(CaseMessage, { message: item }, item.id))
+          ] }),
+          composer: /* @__PURE__ */ jsx(
+            CaseComposer,
+            {
+              composer,
+              value: message,
+              onValueChange: setMessage,
+              onSend: () => reply.mutate(),
+              placeholder: closed ? "This case is closed." : "Write a reply\u2026",
+              disabled: closed,
+              busy: reply.isPending
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  CaseChatPanel,
+  ChatFrame
+};
+//# sourceMappingURL=case-chat-panel.js.map

package/dist/help/case-chat-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help/case-chat-panel.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';\nimport { MessageSquarePlus } from 'lucide-react';\nimport { StateView } from '@withpotter/ui-kit';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { merchantNotificationsApi } from '@withpotter/lib/api/merchant-notifications';\nimport type { MerchantNotificationList } from '@withpotter/lib/api/types';\nimport {\n  serviceOperationsApi,\n  type ServiceCase,\n} from '@withpotter/lib/service-operations-api';\nimport { subjectFrom } from '@withpotter/lib/support-case-subject';\nimport {\n  DISPUTE_PLACEHOLDER,\n  DISPUTE_TITLE,\n  disputeSeed,\n  disputeSubject,\n  isUntouchedDispute,\n} from './dispute-case';\nimport { SecondaryShell } from '@withpotter/components/shell/secondary-shell';\nimport {\n  CaseComposer,\n  useCaseComposer,\n} from '@withpotter/components/support/case-composer';\nimport { CaseMessage } from '@withpotter/components/help/case-message';\nimport { SupportStatus } from '@withpotter/components/support/support-case-ui';\n\n/** What the right-hand shell is showing. */\nexport type CasePanel =\n  | { kind: 'new'; seed: string }\n  | { kind: 'case'; id: string }\n  | { kind: 'assistant'; seed: string };\n\n/**\n * The conversation, in the second content shell.\n *\n * Starting a case and replying to one are the same act in the same place: a\n * thread with a box at the foot. It used to be a dialog for the first and a\n * whole page for the second, so the two did not look like one conversation, and\n * reading a reply meant leaving the cases you were looking at. Here the shell\n * beside the page holds the thread, the list stays where it was, and \"start a\n * case\" is just a thread that has no messages yet.\n *\n * The shell is the one Automations draws its flow in (`SecondaryShell`), so a\n * phone, which has one column, gets the same thing inline.\n */\nexport function CaseChatPanel({\n  panel,\n  onClose,\n  onOpenCase,\n}: {\n  panel: CasePanel;\n  onClose: () => void;\n  onOpenCase: (id: string) => void;\n}) {\n  if (panel.kind === 'assistant') return null;\n\n  return panel.kind === 'new' ? (\n    <NewCaseChat seed={panel.seed} onClose={onClose} onOpenCase={onOpenCase} />\n  ) : (\n    <CaseThreadChat caseId={panel.id} onClose={onClose} />\n  );\n}\n\n/** The scroll area and the box under it, sized to the shell. */\nexport function ChatFrame({\n  thread,\n  composer,\n}: {\n  thread: React.ReactNode;\n  composer: React.ReactNode;\n}) {\n  const scroller = useRef<HTMLDivElement>(null);\n  // Keep the newest message in view as the thread grows.\n  useEffect(() => {\n    const el = scroller.current;\n    if (el) el.scrollTop = el.scrollHeight;\n  });\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <div\n        ref={scroller}\n        className=\"min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain p-4\"\n      >\n        {thread}\n      </div>\n      <div className=\"shrink-0 border-t border-[var(--border-subtle)] p-3\">\n        {composer}\n      </div>\n    </div>\n  );\n}\n\nfunction NewCaseChat({\n  seed,\n  onClose,\n  onOpenCase,\n}: {\n  seed: string;\n  onClose: () => void;\n  onOpenCase: (id: string) => void;\n}) {\n  const { tenant } = useAuth();\n  const { toast } = useToast();\n  const queryClient = useQueryClient();\n  const composer = useCaseComposer();\n  const [message, setMessage] = useState(seed);\n\n  // A dispute is a case that opens from the dispute seed and is listed as \"Dispute: ...\".\n  const dispute = seed === disputeSeed();\n  const rawSubject = subjectFrom(message, composer.hasAttachment);\n  const subject = dispute && rawSubject ? disputeSubject(rawSubject) : rawSubject;\n  const ready =\n    subject.length >= 3 &&\n    !(dispute && isUntouchedDispute(message)) &&\n    (message.trim().length > 0 || composer.hasAttachment);\n\n  const create = useMutation({\n    mutationFn: async () => {\n      const attachments = await composer.collect();\n      // Null means an upload failed and said so. Filing the case anyway would\n      // drop the thing they chose to record.\n      if (attachments === null) throw new Error('attachment-upload-failed');\n      return serviceOperationsApi.create(tenant!.slug, {\n        subject,\n        // A voice note IS the message when nothing was typed, and the API needs\n        // a body for the first message either way.\n        message: message.trim() || 'Voice note.',\n        attachments,\n      });\n    },\n    onSuccess: async (created: ServiceCase) => {\n      composer.reset();\n      await queryClient.invalidateQueries({ queryKey: ['support-cases'] });\n      toast({\n        title: dispute ? 'Dispute raised' : 'Case opened',\n        description: 'We reply here and by email.',\n      });\n      onOpenCase(created.id);\n    },\n    onError: (error: Error) => {\n      if (error.message === 'attachment-upload-failed') return;\n      toast({ title: 'That did not send', variant: 'destructive' });\n    },\n  });\n\n  return (\n    <SecondaryShell\n      title={dispute ? DISPUTE_TITLE : 'New case'}\n      onClose={onClose}\n      flush\n    >\n      <ChatFrame\n        thread={\n          <div className=\"grid h-full place-items-center px-6 text-center\">\n            <div>\n              <span className=\"mx-auto grid size-10 place-items-center rounded-xl bg-[var(--bg-muted)] text-[var(--text-secondary)]\">\n                <MessageSquarePlus className=\"size-5\" />\n              </span>\n              <p className=\"mt-3 text-sm font-medium text-ink\">\n                {dispute ? 'What is the dispute about?' : 'What is going on?'}\n              </p>\n              <p className=\"mt-1 text-sm text-[var(--text-tertiary)]\">\n                {dispute\n                  ? 'Fill in what you know: the transaction reference, the amount and the date. A screenshot of the receipt helps. The support team is told at once, and we reply here and by email.'\n                  : 'Say what you were doing and what you expected. A screenshot or a voice note helps. We reply here and by email.'}\n              </p>\n            </div>\n          </div>\n        }\n        composer={\n          <CaseComposer\n            composer={composer}\n            value={message}\n            onValueChange={setMessage}\n            onSend={() => ready && create.mutate()}\n            placeholder={dispute ? DISPUTE_PLACEHOLDER : 'What happened?'}\n            busy={create.isPending}\n            minRows={dispute ? 6 : 3}\n          />\n        }\n      />\n    </SecondaryShell>\n  );\n}\n\nfunction CaseThreadChat({\n  caseId,\n  onClose,\n}: {\n  caseId: string;\n  onClose: () => void;\n}) {\n  const { tenant } = useAuth();\n  const { toast } = useToast();\n  const queryClient = useQueryClient();\n  const composer = useCaseComposer();\n  const [message, setMessage] = useState('');\n  const slug = tenant?.slug;\n\n  const serviceCase = useQuery({\n    queryKey: ['support-case', slug, caseId],\n    queryFn: () => serviceOperationsApi.get(slug!, caseId),\n    enabled: Boolean(slug),\n    // A reply from support should land while the thread is open, not on the\n    // next time somebody remembers to look.\n    refetchInterval: 20_000,\n  });\n  const record = serviceCase.data;\n\n  /**\n   * Opening a case reads its notifications.\n   *\n   * The rail marks a notification read when you arrive at the page its link\n   * names, and a case now opens in a panel on the Support center, so the link\n   * (`/dashboard/support/<id>`) is never a path you are at. Reading is done here,\n   * for that case's rows only, or the dot on the bell would never clear.\n   */\n  const recordId = record?.id;\n  const recordUpdated = record?.updatedAt;\n  useEffect(() => {\n    if (!slug || !recordId) return;\n    const cached = queryClient.getQueryData<MerchantNotificationList>([\n      'merchant-notifications',\n    ]);\n    const ids = (cached?.notifications ?? [])\n      .filter((n) => !n.readAt && n.link === `/dashboard/support/${recordId}`)\n      .map((n) => n.id);\n    if (ids.length === 0) return;\n    void merchantNotificationsApi\n      .markManyRead(slug, ids)\n      .catch(() => null)\n      .then(() =>\n        queryClient.invalidateQueries({ queryKey: ['merchant-notifications'] }),\n      );\n  }, [slug, recordId, recordUpdated, queryClient]);\n\n  const reply = useMutation({\n    mutationFn: async () => {\n      const attachments = await composer.collect();\n      if (attachments === null) throw new Error('attachment-upload-failed');\n      return serviceOperationsApi.reply(\n        slug!,\n        caseId,\n        message.trim() || 'Voice note.',\n        attachments,\n      );\n    },\n    onSuccess: async () => {\n      setMessage('');\n      composer.reset();\n      await Promise.all([\n        queryClient.invalidateQueries({ queryKey: ['support-case'] }),\n        queryClient.invalidateQueries({ queryKey: ['support-cases'] }),\n      ]);\n    },\n    onError: (error: Error) => {\n      if (error.message === 'attachment-upload-failed') return;\n      toast({ title: 'That did not send', variant: 'destructive' });\n    },\n  });\n\n  if (!record) {\n    return (\n      <SecondaryShell title=\"Case\" onClose={onClose} flush>\n        <div className=\"grid h-full place-items-center p-6\">\n          <StateView\n            kind={\n              serviceCase.isError\n                ? 'error'\n                : serviceCase.isLoading\n                  ? 'loading'\n                  : 'empty'\n            }\n            title={\n              serviceCase.isError ? 'This case could not be loaded.' : 'Loading'\n            }\n            action={\n              serviceCase.isError\n                ? {\n                    label: 'Try again',\n                    onClick: () => void serviceCase.refetch(),\n                  }\n                : undefined\n            }\n          />\n        </div>\n      </SecondaryShell>\n    );\n  }\n\n  const closed = record.status === 'closed';\n\n  return (\n    <SecondaryShell\n      title={record.subject}\n      actions={<SupportStatus status={record.status} />}\n      onClose={onClose}\n      flush\n    >\n      <ChatFrame\n        thread={\n          <>\n            <p className=\"text-xs text-[var(--text-tertiary)]\">\n              {record.reference}\n            </p>\n            {(record.messages ?? []).map((item) => (\n              <CaseMessage key={item.id} message={item} />\n            ))}\n          </>\n        }\n        composer={\n          <CaseComposer\n            composer={composer}\n            value={message}\n            onValueChange={setMessage}\n            onSend={() => reply.mutate()}\n            placeholder={closed ? 'This case is closed.' : 'Write a reply…'}\n            disabled={closed}\n            busy={reply.isPending}\n          />\n        }\n      />\n    </SecondaryShell>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/help/case-message.d.ts

@@ -0,0 +1,12 @@
+import type { ServiceCaseMessage } from '@withpotter/lib/service-operations-api';
+/**
+ * One message.
+ *
+ * Ours sits in a plain card and theirs in a recessed well, rather than the
+ * chat-bubble left/right split: a support thread is read top to bottom as a
+ * record of what was said, and alternating sides makes a long case harder to
+ * scan than a single column with an author on each entry.
+ */
+export declare function CaseMessage({ message }: {
+    message: ServiceCaseMessage;
+}): import("react").JSX.Element;

package/dist/help/case-message.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Paperclip } from "lucide-react";
+import { Card } from "@withpotter/ui-kit";
+import { formatSupportDate } from "@withpotter/components/support/support-case-ui";
+import { TranscriptPlayer } from "@withpotter/ui-kit/transcript-player";
+import { SUPPORT_NAME } from "@withpotter/lib/support";
+function CaseMessage({ message }) {
+  const fromPotter = message.authorType === "platform_admin";
+  const isSystem = message.authorType === "system";
+  return /* @__PURE__ */ jsxs(Card, { padding: "sm", className: fromPotter ? "surface-inset" : void 0, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-ink", children: isSystem ? SUPPORT_NAME : fromPotter ? `${SUPPORT_NAME} support` : "You" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)]", children: formatSupportDate(message.createdAt) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 whitespace-pre-wrap text-sm text-[var(--text-secondary)]", children: message.body }),
+    message.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-2", children: message.attachments.map((attachment) => /* @__PURE__ */ jsx(Attachment, { attachment }, attachment.url)) })
+  ] });
+}
+function secondsFromName(name) {
+  const match = /\((\d+)s\)/.exec(name);
+  return match ? Number(match[1]) : 0;
+}
+function Attachment({ attachment }) {
+  if (attachment.mimeType.startsWith("audio/")) {
+    return /* @__PURE__ */ jsx(
+      TranscriptPlayer,
+      {
+        url: attachment.url,
+        seconds: secondsFromName(attachment.name),
+        className: "w-full"
+      }
+    );
+  }
+  if (attachment.mimeType.startsWith("image/")) {
+    return /* @__PURE__ */ jsx("a", { href: attachment.url, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: attachment.url,
+        alt: attachment.name,
+        className: "max-h-64 rounded-lg border border-line"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: attachment.url,
+      target: "_blank",
+      rel: "noreferrer",
+      className: "inline-flex items-center gap-2 text-sm text-brand-500",
+      children: [
+        /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }),
+        attachment.name
+      ]
+    }
+  );
+}
+export {
+  CaseMessage
+};
+//# sourceMappingURL=case-message.js.map

package/dist/help/case-message.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help/case-message.tsx"],"sourcesContent":["'use client';\n\nimport { Paperclip } from 'lucide-react';\nimport { Card } from '@withpotter/ui-kit';\nimport type {\n  ServiceCaseAttachment,\n  ServiceCaseMessage,\n} from '@withpotter/lib/service-operations-api';\nimport { formatSupportDate } from '@withpotter/components/support/support-case-ui';\nimport { TranscriptPlayer } from '@withpotter/ui-kit/transcript-player';\nimport { SUPPORT_NAME } from '@withpotter/lib/support';\n\n/**\n * One message.\n *\n * Ours sits in a plain card and theirs in a recessed well, rather than the\n * chat-bubble left/right split: a support thread is read top to bottom as a\n * record of what was said, and alternating sides makes a long case harder to\n * scan than a single column with an author on each entry.\n */\nexport function CaseMessage({ message }: { message: ServiceCaseMessage }) {\n  const fromPotter = message.authorType === 'platform_admin';\n  const isSystem = message.authorType === 'system';\n\n  return (\n    <Card padding=\"sm\" className={fromPotter ? 'surface-inset' : undefined}>\n      <div className=\"flex items-baseline justify-between gap-3\">\n        <span className=\"text-sm font-medium text-ink\">\n          {isSystem ? SUPPORT_NAME : fromPotter ? `${SUPPORT_NAME} support` : 'You'}\n        </span>\n        <span className=\"text-xs text-[var(--text-tertiary)]\">\n          {formatSupportDate(message.createdAt)}\n        </span>\n      </div>\n      <p className=\"mt-2 whitespace-pre-wrap text-sm text-[var(--text-secondary)]\">\n        {message.body}\n      </p>\n      {message.attachments.length > 0 && (\n        <div className=\"mt-3 space-y-2\">\n          {message.attachments.map((attachment) => (\n            <Attachment key={attachment.url} attachment={attachment} />\n          ))}\n        </div>\n      )}\n    </Card>\n  );\n}\n\n/**\n * An attachment, played rather than linked where it can be.\n *\n * A voice note behind a download link is a voice note nobody hears — the point\n * of recording it was that speaking was easier than typing, and making the\n * other side download a file to find out what was said undoes that.\n */\n/**\n * `Voice note (14s)` → 14.\n *\n * The length is in the attachment's NAME because that is where the uploader\n * put it, and it is the only place it survives: a webm blob commonly reports\n * `Infinity` for duration until it has been seeked, so reading it off the\n * element would show a clip with no length on first paint.\n */\nfunction secondsFromName(name: string): number {\n  const match = /\\((\\d+)s\\)/.exec(name);\n  return match ? Number(match[1]) : 0;\n}\n\nfunction Attachment({ attachment }: { attachment: ServiceCaseAttachment }) {\n  if (attachment.mimeType.startsWith('audio/')) {\n    // The same player the composer records into, rather than the browser's own\n    // grey bar. A clip read back has no peaks and no transcript, so it draws a\n    // plain seekable track — but it is recognisably the same object the\n    // merchant attached, which the native control never was.\n    return (\n      <TranscriptPlayer\n        url={attachment.url}\n        seconds={secondsFromName(attachment.name)}\n        className=\"w-full\"\n      />\n    );\n  }\n\n  if (attachment.mimeType.startsWith('image/')) {\n    return (\n      <a href={attachment.url} target=\"_blank\" rel=\"noreferrer\">\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={attachment.url}\n          alt={attachment.name}\n          className=\"max-h-64 rounded-lg border border-line\"\n        />\n      </a>\n    );\n  }\n\n  return (\n    <a\n      href={attachment.url}\n      target=\"_blank\"\n      rel=\"noreferrer\"\n      className=\"inline-flex items-center gap-2 text-sm text-brand-500\"\n    >\n      <Paperclip className=\"size-4\" />\n      {attachment.name}\n    </a>\n  );\n}\n"],"mappings":";AA0BM,SACE,KADF;AAxBN,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAKrB,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAUtB,SAAS,YAAY,EAAE,QAAQ,GAAoC;AACxE,QAAM,aAAa,QAAQ,eAAe;AAC1C,QAAM,WAAW,QAAQ,eAAe;AAExC,SACE,qBAAC,QAAK,SAAQ,MAAK,WAAW,aAAa,kBAAkB,QAC3D;AAAA,yBAAC,SAAI,WAAU,6CACb;AAAA,0BAAC,UAAK,WAAU,gCACb,qBAAW,eAAe,aAAa,GAAG,YAAY,aAAa,OACtE;AAAA,MACA,oBAAC,UAAK,WAAU,uCACb,4BAAkB,QAAQ,SAAS,GACtC;AAAA,OACF;AAAA,IACA,oBAAC,OAAE,WAAU,iEACV,kBAAQ,MACX;AAAA,IACC,QAAQ,YAAY,SAAS,KAC5B,oBAAC,SAAI,WAAU,kBACZ,kBAAQ,YAAY,IAAI,CAAC,eACxB,oBAAC,cAAgC,cAAhB,WAAW,GAA6B,CAC1D,GACH;AAAA,KAEJ;AAEJ;AAiBA,SAAS,gBAAgB,MAAsB;AAC7C,QAAM,QAAQ,aAAa,KAAK,IAAI;AACpC,SAAO,QAAQ,OAAO,MAAM,CAAC,CAAC,IAAI;AACpC;AAEA,SAAS,WAAW,EAAE,WAAW,GAA0C;AACzE,MAAI,WAAW,SAAS,WAAW,QAAQ,GAAG;AAK5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,WAAW;AAAA,QAChB,SAAS,gBAAgB,WAAW,IAAI;AAAA,QACxC,WAAU;AAAA;AAAA,IACZ;AAAA,EAEJ;AAEA,MAAI,WAAW,SAAS,WAAW,QAAQ,GAAG;AAC5C,WACE,oBAAC,OAAE,MAAM,WAAW,KAAK,QAAO,UAAS,KAAI,cAE3C;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,WAAW;AAAA,QAChB,KAAK,WAAW;AAAA,QAChB,WAAU;AAAA;AAAA,IACZ,GACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,WAAW;AAAA,MACjB,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,WAAU;AAAA,MAEV;AAAA,4BAAC,aAAU,WAAU,UAAS;AAAA,QAC7B,WAAW;AAAA;AAAA;AAAA,EACd;AAEJ;","names":[]}

package/dist/help/dispute-case.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Raising a dispute is opening a support case that starts "Dispute:", seeded with what the
+ * team needs to look it up. Support's inbox (the box's staff address) receives it like any case,
+ * and the first line becomes the row title they triage by.
+ */
+export declare const DISPUTE_TITLE = "Raise a dispute";
+export declare const DISPUTE_PLACEHOLDER = "Say what the dispute is about. Add the transaction reference, the amount and the date if you have them.";
+/** The first line is the case title, so it names the dispute; the rest asks for what the team looks up. */
+export declare function disputeSeed(): string;
+/** True when the form is the untouched seed: nothing has been said yet. */
+export declare function isUntouchedDispute(message: string): boolean;
+/** True when the first line already says it is a dispute, so the title a case is listed under says so. */
+export declare function startsAsDispute(message: string): boolean;
+/** A dispute's list title always says so, even if the merchant rewrote the first line. */
+export declare function disputeSubject(subject: string): string;

package/dist/help/dispute-case.js

@@ -0,0 +1,30 @@
+const DISPUTE_TITLE = "Raise a dispute";
+const DISPUTE_PLACEHOLDER = "Say what the dispute is about. Add the transaction reference, the amount and the date if you have them.";
+function disputeSeed() {
+  return [
+    "Dispute: ",
+    "",
+    "Transaction reference:",
+    "Amount:",
+    "Date:",
+    "What happened:"
+  ].join("\n");
+}
+function isUntouchedDispute(message) {
+  return message.trim() === disputeSeed().trim();
+}
+function startsAsDispute(message) {
+  return /^\s*dispute\b/i.test(message);
+}
+function disputeSubject(subject) {
+  return startsAsDispute(subject) ? subject : `Dispute: ${subject}`.slice(0, 240);
+}
+export {
+  DISPUTE_PLACEHOLDER,
+  DISPUTE_TITLE,
+  disputeSeed,
+  disputeSubject,
+  isUntouchedDispute,
+  startsAsDispute
+};
+//# sourceMappingURL=dispute-case.js.map

package/dist/help/dispute-case.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help/dispute-case.ts"],"sourcesContent":["/**\n * Raising a dispute is opening a support case that starts \"Dispute:\", seeded with what the\n * team needs to look it up. Support's inbox (the box's staff address) receives it like any case,\n * and the first line becomes the row title they triage by.\n */\nexport const DISPUTE_TITLE = 'Raise a dispute';\n\nexport const DISPUTE_PLACEHOLDER =\n  'Say what the dispute is about. Add the transaction reference, the amount and the date if you have them.';\n\n/** The first line is the case title, so it names the dispute; the rest asks for what the team looks up. */\nexport function disputeSeed(): string {\n  return [\n    'Dispute: ',\n    '',\n    'Transaction reference:',\n    'Amount:',\n    'Date:',\n    'What happened:',\n  ].join('\\n');\n}\n\n/** True when the form is the untouched seed: nothing has been said yet. */\nexport function isUntouchedDispute(message: string): boolean {\n  return message.trim() === disputeSeed().trim();\n}\n\n/** True when the first line already says it is a dispute, so the title a case is listed under says so. */\nexport function startsAsDispute(message: string): boolean {\n  return /^\\s*dispute\\b/i.test(message);\n}\n\n/** A dispute's list title always says so, even if the merchant rewrote the first line. */\nexport function disputeSubject(subject: string): string {\n  return startsAsDispute(subject) ? subject : `Dispute: ${subject}`.slice(0, 240);\n}\n"],"mappings":"AAKO,MAAM,gBAAgB;AAEtB,MAAM,sBACX;AAGK,SAAS,cAAsB;AACpC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,KAAK,IAAI;AACb;AAGO,SAAS,mBAAmB,SAA0B;AAC3D,SAAO,QAAQ,KAAK,MAAM,YAAY,EAAE,KAAK;AAC/C;AAGO,SAAS,gBAAgB,SAA0B;AACxD,SAAO,iBAAiB,KAAK,OAAO;AACtC;AAGO,SAAS,eAAe,SAAyB;AACtD,SAAO,gBAAgB,OAAO,IAAI,UAAU,YAAY,OAAO,GAAG,MAAM,GAAG,GAAG;AAChF;","names":[]}

package/dist/help/help-area-tile.d.ts

@@ -0,0 +1,36 @@
+import type { HelpGroup } from '@withpotter/lib/help-topics';
+/**
+ * An area of the business, as an object you can point at.
+ *
+ * Two densities, and the same element in both. Nothing is unmounted between
+ * them, so `layout` morphs the tile rather than swapping one component for
+ * another, and the object you clicked visibly becomes the thing you are now
+ * reading under.
+ *
+ *   gallery  the first view. Large object, label beneath, no body copy at all.
+ *            Its job is to be recognised before it is read.
+ *   strip    once an area is chosen. The grid collapses to one row of pills so
+ *            the answers sit near the top of the screen instead of below two
+ *            rows of artwork, and switching areas is still one click.
+ *
+ * The strip exists because of a measurement, not a preference: at 1024px the
+ * gallery is about 470px tall, so on a laptop the questions you just asked for
+ * opened below the fold and the click read as nothing having happened.
+ *
+ * Selection is drawn differently per density, because the same treatment does
+ * not work at both sizes. On a large saturated colour field a fill fights the
+ * art and a border is invisible against seven different hues, so it is a ring
+ * on the page's own ink, outside the tile. On a pill the field is only 26px,
+ * the label carries the meaning, and a wash behind the whole pill is what reads.
+ *
+ * Motion is on the object, never on the tile. A card that scales on hover at
+ * grid density reads as the whole page twitching; a single drawn object that
+ * leans is the thing under the cursor answering.
+ */
+export declare function HelpAreaTile({ group, selected, compact, onSelect, }: {
+    group: HelpGroup;
+    selected: boolean;
+    /** Strip density. True whenever any area is open, not just this one. */
+    compact: boolean;
+    onSelect: () => void;
+}): import("react").JSX.Element;