@sansavision/yousaid-react

React components and hooks for YouSaid: a feedback launcher, the end user's live inbox of replies, and lifecycle receipts. Requires React 19 or later.

npm install @sansavision/yousaid-react @sansavision/yousaid-server

@sansavision/yousaid (the framework-free client) is installed with it. @sansavision/yousaid-server runs on your server only and signs the end user's identity.

1. Mint an identity token on your server

import { createYouSaidIdentityToken } from "@sansavision/yousaid-server";

export async function GET(request: Request) {
  const user = await currentUser(request);
  const token = await createYouSaidIdentityToken(
    { sub: user.id, org_id: "org_...", product_id: "prd_...", email: user.email },
    process.env.YOUSAID_SIGNING_SECRET!,
    { keyId: process.env.YOUSAID_KEY_ID! },
  );
  return new Response(token, { headers: { "cache-control": "no-store" } });
}

2. Wrap your app in the provider

"use client";
import { YouSaidProvider, YouSaidLauncher, Inbox } from "@sansavision/yousaid-react";

// A function, not a string: every write consumes the token's nonce.
const getToken = () => fetch("/api/yousaid-token").then((response) => response.text());

export function Feedback() {
  return (
    <YouSaidProvider token={getToken}>
      <YouSaidLauncher label="Talk to us" appVersion="4.2.0" />
      <Inbox title="Replies" />
    </YouSaidProvider>
  );
}

YouSaidProvider takes the same options as YouSaidClient (token, endpoint, fetch). Keep the token function stable (define it outside the component or wrap it in useCallback) so the client is not recreated on every render.

Components and hooks

| Export | What it does | | --- | --- | | YouSaidProvider | Creates one YouSaidClient for the tree. | | useYouSaid() | Returns that client, for example to call sendSignal or confirmRelease from your own UI. Throws outside the provider. | | YouSaidLauncher | A floating "Talk to us" button and form: message kind, attachments and an opt-in diagnostics checkbox. Props: label, defaultView, appVersion, featureFlags, breadcrumbs, verifyInstall (default true). | | Inbox | The signed-in end user's replies, live over Server-Sent Events, with unread counts and mark-read. Props: title, emptyMessage, onOpen(item). | | useInbox({ live, limit }) | The same data headless: { items, unread, loading, connected, error, refresh, markRead }. | | LifecycleReceipt | A role="status" receipt that tells the user where their report is. Props: title, state. |

import { LifecycleReceipt, useInbox, useYouSaid } from "@sansavision/yousaid-react";

function ReleaseQuestion({ releaseId }: { releaseId: string }) {
  const client = useYouSaid();
  return <button onClick={() => void client.confirmRelease(releaseId, "resolved")}>It works now</button>;
}

function UnreadBadge() {
  const { unread } = useInbox({ live: true });
  return unread ? <span aria-label={`${unread} unread replies`}>{unread}</span> : null;
}

<LifecycleReceipt title="Report received" state="The team is looking at it." />;

Send AppHelm context with a signal through useYouSaid().sendSignal({ ..., context: { apphelm: { workspaceId, externalUserId } } }). See the @sansavision/yousaid README for the field rules.

Server rendering

Every component renders on the server without touching window; the network work starts in effects after hydration. The modules carry "use client".

Stability

Version 0.2.0 marks these exports as stable under semantic versioning: YouSaidProvider, useYouSaid, YouSaidLauncher, Inbox, useInbox and LifecycleReceipt.

Everything else is experimental and tagged @experimental in the type declarations: YouSaidRooms and every Rooms component and hook, agent and approval cards, moderation, the Proof widgets (ProofWall, ProofCarousel, ProofCard, ProofBadge, ProofMap, ProofMarquee, ProofVideoBubble, ProofLogoStrip), ProofPrompt and the proof hooks, and the map helpers. Experimental APIs can change in any minor release.

Licence

UNLICENSED. All rights reserved, Sansa Group AB. Licence terms are pending owner and legal review; see LICENSE.

Documentation: https://yousaid.dev/docs/sdk