spaps-issue-reporting-react 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.1.3] - 2026-04-20
+
+- Changed: publish the page-first report flow package metadata and align README metadata with the current package version.
+
 ## [0.1.1] - 2026-04-05
 
 - Docs: align package README metadata with published version.

package/README.md

@@ -10,7 +10,7 @@ Examples in this README use placeholder IDs and app labels. Replace them with va
 npm install spaps-issue-reporting-react react react-dom @tanstack/react-query
 ```
 
-This package targets `Node.js >=18` and React 18+.
+This package targets `Node.js >=18` and React 18+. Voice input uses the package's `@elevenlabs/react` dependency and a SPAPS-minted single-use token.
 
 ## When It Fits
 
@@ -43,8 +43,9 @@ export function AppShell() {
         isEligible={true}
         principalId="user_123"
         reporterRoleHint="staff"
-        allowTenantScope
         defaultScope="mine"
+        inputModes={["text", "voice"]}
+        defaultInputMode="text"
       >
         <IssueReportingPageConfig createMode="surface_preferred" />
 
@@ -69,17 +70,63 @@ export function AppShell() {
 ## What Your App Still Owns
 
 - A client with `issueReporting.getStatus`, `list`, `get`, `create`, `update`, and `reply`.
+- A client with `issueReporting.createVoiceToken` when `inputModes` includes `voice`.
 - Any auth and token refresh behavior needed by that client.
 - Eligibility rules such as feature flags, account state, or role checks.
 - The current principal ID and optional role hint passed into the provider.
-- Whether users can switch between `mine` and `tenant` queue scope.
+- Whether users can switch between `mine` and a custom tenant queue scope. The stock SPAPS API
+  supports `mine` only; use `allowTenantScope` only with a client that implements tenant reads.
 - Whether a page defaults to `general_page`, `surface_required`, or `surface_preferred` reporting.
+- Whether the app allows `["text"]`, `["voice"]`, or `["text", "voice"]` report input.
 - Styling integration if your build strips package utility classes.
 - Any app-specific copy overrides.
 - Origin registration on the owning SPAPS application if the browser calls SPAPS directly with a publishable key.
 
 For direct browser integrations, `allowed_origins` is stored on the SPAPS `applications` row that owns the publishable key. It is not configured on this package. If multiple hostnames share one SPAPS application, put all of them on that row. Updating `allowed_origins` does not require restarting SPAPS.
 
+## Voice Input
+
+Voice mode is opt-in per app. Configure the owning SPAPS application with either:
+
+```json
+{
+  "issue_reporting_input_modes": ["text", "voice"]
+}
+```
+
+or:
+
+```json
+{
+  "issue_reporting": {
+    "input_modes": ["voice"]
+  }
+}
+```
+
+The SPAPS server also needs `ELEVENLABS_API_KEY`. The browser calls your normal SPAPS client, which mints a short-lived Scribe token through `issueReporting.createVoiceToken()`. The committed transcript is submitted as the issue `note`; raw audio is not stored by this package.
+
+```tsx
+<IssueReportingProvider
+  client={spaps}
+  isEligible={true}
+  inputModes={["voice"]}
+  defaultInputMode="voice"
+  voice={{
+    modelId: "scribe_v2_realtime",
+    microphone: {
+      echoCancellation: true,
+      noiseSuppression: true,
+      autoGainControl: true,
+    },
+  }}
+>
+  <FloatingIssueReportButton />
+</IssueReportingProvider>
+```
+
+When text and voice are both enabled, the modal keeps the textarea available and lets the user append a committed transcript into the editable note.
+
 ## Exported Surface
 
 | Export | Purpose |
@@ -130,12 +177,21 @@ Render `IssueReportingPageConfig` with `createMode="surface_required"` inside th
 
 ### Tenant scope never appears
 
-Set `allowTenantScope={true}`. The provider defaults to `mine`.
+The stock SPAPS API supports `mine` only. Set `allowTenantScope={true}` only when your client
+implements tenant-scoped `getStatus` and `list` calls.
 
 ### Styles look unformatted
 
 Include the package in your Tailwind or CSS-content scan, or override the rendered classes in your host app.
 
+### Voice controls do not appear
+
+Pass `inputModes={["voice"]}` or `inputModes={["text", "voice"]}` to the provider, and enable `voice` in the owning SPAPS application's issue-reporting settings.
+
+### Voice starts with a token error
+
+Confirm that the SPAPS server has `ELEVENLABS_API_KEY` set and that the current user is authenticated and eligible for issue reporting.
+
 ## Limitations
 
 - This package assumes React Query is already part of the host app.
@@ -175,7 +231,7 @@ No. This package is UI only. If your browser app calls SPAPS directly with a pub
 ## Metadata
 
 - `package_name`: `spaps-issue-reporting-react`
-- `latest_version`: `0.1.1`
+- `latest_version`: `0.1.3`
 - `minimum_runtime`: `Node.js >=18.0.0`
 - `api_base_url`: `https://api.sweetpotato.dev`
 

package/dist/index.d.mts

@@ -2,11 +2,24 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import * as spaps_types from 'spaps-types';
-import { IssueReportScope, IssueReportStatusResult, IssueReportStatus, IssueReportListResult, IssueReport, CreateIssueReportRequest, UpdateIssueReportRequest, ReplyIssueReportRequest } from 'spaps-types';
+import { IssueReportScope, IssueReportStatusResult, IssueReportStatus, IssueReportListResult, IssueReport, CreateIssueReportRequest, UpdateIssueReportRequest, ReplyIssueReportRequest, IssueReportingVoiceTokenResult, IssueReportingInputMode, IssueReportingVoiceProvider } from 'spaps-types';
 export { CreateIssueReportRequest, IssueReport, IssueReportListResult, IssueReportScope, IssueReportStatus, IssueReportStatusResult, ReplyIssueReportRequest, UpdateIssueReportRequest } from 'spaps-types';
 import * as _tanstack_query_core from '@tanstack/query-core';
 import * as _tanstack_react_query from '@tanstack/react-query';
 
+interface IssueReportingVoiceMicrophoneConfig {
+    deviceId?: string;
+    echoCancellation?: boolean;
+    noiseSuppression?: boolean;
+    autoGainControl?: boolean;
+    channelCount?: number;
+}
+interface IssueReportingVoiceConfig {
+    provider?: IssueReportingVoiceProvider;
+    modelId?: string;
+    requireMicrophonePermission?: boolean;
+    microphone?: IssueReportingVoiceMicrophoneConfig;
+}
 interface IssueReportingClient {
     issueReporting: {
         getStatus: (params?: {
@@ -22,6 +35,7 @@ interface IssueReportingClient {
         create: (payload: CreateIssueReportRequest) => Promise<IssueReport>;
         update: (issueReportId: string, payload: UpdateIssueReportRequest) => Promise<IssueReport>;
         reply: (issueReportId: string, payload: ReplyIssueReportRequest) => Promise<IssueReport>;
+        createVoiceToken?: () => Promise<IssueReportingVoiceTokenResult>;
     };
 }
 interface ReportableTargetDescriptor {
@@ -89,6 +103,9 @@ interface IssueReportingProviderProps {
     defaultScope?: IssueReportScope;
     allowTenantScope?: boolean;
     defaultCreateMode?: IssueReportingCreateMode;
+    inputModes?: IssueReportingInputMode[];
+    defaultInputMode?: IssueReportingInputMode;
+    voice?: IssueReportingVoiceConfig;
     copy?: Partial<IssueReportingCopy>;
     children: ReactNode;
 }
@@ -149,6 +166,11 @@ type IssueReportingContextValue = {
     setScope: (scope: IssueReportScope) => void;
     allowTenantScope: boolean;
     createMode: IssueReportingCreateMode;
+    inputModes: IssueReportingInputMode[];
+    defaultInputMode: IssueReportingInputMode;
+    voice: Required<Pick<IssueReportingVoiceConfig, "provider" | "modelId" | "requireMicrophonePermission">> & {
+        microphone?: IssueReportingVoiceConfig["microphone"];
+    };
 };
 declare const defaultIssueReportingCopy: IssueReportingCopy;
 declare const issueReportingKeys: {
@@ -362,7 +384,7 @@ declare function useIssueReportingMutations(): {
         reporterRoleHint?: string;
     }, unknown>;
 };
-declare function IssueReportingProvider({ client, isEligible, reporterRoleHint, principalId, getPageUrl, defaultScope, allowTenantScope, defaultCreateMode, copy, children, }: IssueReportingProviderProps): react_jsx_runtime.JSX.Element;
+declare function IssueReportingProvider({ client, isEligible, reporterRoleHint, principalId, getPageUrl, defaultScope, allowTenantScope, defaultCreateMode, inputModes, defaultInputMode, voice, copy, children, }: IssueReportingProviderProps): react_jsx_runtime.JSX.Element;
 
 interface ReportModeContextValue {
     isReportMode: boolean;

package/dist/index.d.ts

@@ -2,11 +2,24 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import * as spaps_types from 'spaps-types';
-import { IssueReportScope, IssueReportStatusResult, IssueReportStatus, IssueReportListResult, IssueReport, CreateIssueReportRequest, UpdateIssueReportRequest, ReplyIssueReportRequest } from 'spaps-types';
+import { IssueReportScope, IssueReportStatusResult, IssueReportStatus, IssueReportListResult, IssueReport, CreateIssueReportRequest, UpdateIssueReportRequest, ReplyIssueReportRequest, IssueReportingVoiceTokenResult, IssueReportingInputMode, IssueReportingVoiceProvider } from 'spaps-types';
 export { CreateIssueReportRequest, IssueReport, IssueReportListResult, IssueReportScope, IssueReportStatus, IssueReportStatusResult, ReplyIssueReportRequest, UpdateIssueReportRequest } from 'spaps-types';
 import * as _tanstack_query_core from '@tanstack/query-core';
 import * as _tanstack_react_query from '@tanstack/react-query';
 
+interface IssueReportingVoiceMicrophoneConfig {
+    deviceId?: string;
+    echoCancellation?: boolean;
+    noiseSuppression?: boolean;
+    autoGainControl?: boolean;
+    channelCount?: number;
+}
+interface IssueReportingVoiceConfig {
+    provider?: IssueReportingVoiceProvider;
+    modelId?: string;
+    requireMicrophonePermission?: boolean;
+    microphone?: IssueReportingVoiceMicrophoneConfig;
+}
 interface IssueReportingClient {
     issueReporting: {
         getStatus: (params?: {
@@ -22,6 +35,7 @@ interface IssueReportingClient {
         create: (payload: CreateIssueReportRequest) => Promise<IssueReport>;
         update: (issueReportId: string, payload: UpdateIssueReportRequest) => Promise<IssueReport>;
         reply: (issueReportId: string, payload: ReplyIssueReportRequest) => Promise<IssueReport>;
+        createVoiceToken?: () => Promise<IssueReportingVoiceTokenResult>;
     };
 }
 interface ReportableTargetDescriptor {
@@ -89,6 +103,9 @@ interface IssueReportingProviderProps {
     defaultScope?: IssueReportScope;
     allowTenantScope?: boolean;
     defaultCreateMode?: IssueReportingCreateMode;
+    inputModes?: IssueReportingInputMode[];
+    defaultInputMode?: IssueReportingInputMode;
+    voice?: IssueReportingVoiceConfig;
     copy?: Partial<IssueReportingCopy>;
     children: ReactNode;
 }
@@ -149,6 +166,11 @@ type IssueReportingContextValue = {
     setScope: (scope: IssueReportScope) => void;
     allowTenantScope: boolean;
     createMode: IssueReportingCreateMode;
+    inputModes: IssueReportingInputMode[];
+    defaultInputMode: IssueReportingInputMode;
+    voice: Required<Pick<IssueReportingVoiceConfig, "provider" | "modelId" | "requireMicrophonePermission">> & {
+        microphone?: IssueReportingVoiceConfig["microphone"];
+    };
 };
 declare const defaultIssueReportingCopy: IssueReportingCopy;
 declare const issueReportingKeys: {
@@ -362,7 +384,7 @@ declare function useIssueReportingMutations(): {
         reporterRoleHint?: string;
     }, unknown>;
 };
-declare function IssueReportingProvider({ client, isEligible, reporterRoleHint, principalId, getPageUrl, defaultScope, allowTenantScope, defaultCreateMode, copy, children, }: IssueReportingProviderProps): react_jsx_runtime.JSX.Element;
+declare function IssueReportingProvider({ client, isEligible, reporterRoleHint, principalId, getPageUrl, defaultScope, allowTenantScope, defaultCreateMode, inputModes, defaultInputMode, voice, copy, children, }: IssueReportingProviderProps): react_jsx_runtime.JSX.Element;
 
 interface ReportModeContextValue {
     isReportMode: boolean;