@omniloy/sofia-sdk 1.0.3 → 1.0.5

package/dist/react/index.css

@@ -646,6 +646,74 @@
   color: var(--color-gray-600, #4b5563);
 }
 
+/* Connection status pill - inline banner replacing toasts.
+   Three states: reconnecting (neutral), disconnected (red), restored (dark). */
+.omniscribe_connection-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 9999px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-weight: 500;
+  margin-inline: 8px;
+}
+
+.omniscribe_connection-pill-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.omniscribe_connection-pill-icon--spin {
+  animation: omniscribe-connection-spin 1s linear infinite;
+}
+
+@keyframes omniscribe-connection-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.omniscribe_connection-pill--reconnecting {
+  background-color: var(--color-gray-50, #f9fafb);
+  border: 1px solid var(--color-gray-200, #e5e7eb);
+  color: var(--color-gray-700, #374151);
+}
+
+.omniscribe_connection-pill--disconnected {
+  background-color: #fdecec;
+  border: 1px solid #f8c7c7;
+  color: #b42318;
+  padding-right: 4px;
+}
+
+.omniscribe_connection-pill--restored {
+  background-color: #1f2937;
+  border: 1px solid #1f2937;
+  color: #ffffff;
+}
+
+.omniscribe_connection-pill-retry {
+  border-radius: 9999px !important;
+  gap: 4px;
+  padding-block: 3px !important;
+  padding-inline: 8px !important;
+  height: auto !important;
+  background-color: #d92d20 !important;
+  color: #ffffff !important;
+  border: none !important;
+  margin-left: 2px;
+}
+
+.omniscribe_connection-pill-retry:hover:not(:disabled) {
+  background-color: #b42318 !important;
+}
+
 /* Generate Report Button - Figma style */
 .omniscribe_transcribe-generate-btn {
   border-radius: 12px !important;
@@ -900,6 +968,236 @@
     background-color: color-mix(in oklab, var(--report) 60%, transparent);
   }
 }
+.omniscribe_modal-overlay {
+  position: absolute;
+  background-color: color-mix(in oklab, var(--black) 50%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 50;
+  height: 100vh;
+  width: 100vw;
+  right: 0;
+  bottom: calc(var(--spacing) * -5.2);
+}
+
+.omniscribe_modal-container {
+  position: relative;
+  background-color: var(--white);
+  z-index: 100;
+  border-radius: 12px;
+  border: solid 1px var(--light-border);
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  padding: calc(var(--spacing) * 5);
+  transition-duration: 300ms;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  max-width: 90vw;
+  max-height: 90vh;
+}
+.omniscribe_modal-container-scroll {
+  overflow: auto;
+}
+
+.omniscribe_modal-container-show {
+  opacity: 100%;
+}
+
+.omniscribe_modal-container-hide {
+  opacity: 0%;
+}
+
+.omniscribe_modal-subcontainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.omniscribe_modal-title-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: calc(var(--spacing) * 2);
+}
+
+.omniscribe_modal-title {
+  font-size: var(--text-3xl); /* 1.875rem = 30px */
+  line-height: var(--text-xl--line-height);
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+}
+
+.omniscribe_modal-button {
+  border: none;
+  background: transparent;
+  line-height: var(--text-2xl--line-height);
+  cursor: pointer;
+  color: var(--black);
+}
+
+@media (min-width: 768px) {
+  .omniscribe_modal-container {
+    max-width: 60vw;
+  }
+}
+
+/* Large screens: desktop */
+@media (min-width: 1024px) {
+  .omniscribe_modal-container {
+    max-width: 50vw;
+  }
+}
+
+/* Very large screens: large desktop and ultra-wide */
+@media (min-width: 1440px) {
+  .omniscribe_modal-container {
+    max-width: 40vw;
+  }
+}
+
+/* Intermediate breakpoint: large tablets */
+@media (min-width: 640px) and (max-width: 767px) {
+  .omniscribe_modal-container {
+    max-width: 70vw;
+  }
+}
+/* The shared Modal overlay uses position: absolute anchored to its
+   nearest positioned ancestor — which in our case is the chat footer,
+   not the widget root. That puts the modal at the bottom of the widget.
+   Override to position: fixed so the overlay covers the full viewport
+   and the modal truly centers regardless of where in the React tree it
+   was rendered. */
+.omniscribe_modal-overlay:has(.omniscribe_audio-cuts-modal) {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.omniscribe_audio-cuts-modal {
+  width: 480px;
+  max-width: 90vw;
+  padding: 24px !important;
+}
+
+/* Override Modal's giant default h2 size for this dialog. */
+.omniscribe_audio-cuts-modal .omniscribe_modal-title-container {
+  margin-bottom: 16px;
+  align-items: flex-start;
+}
+
+.omniscribe_audio-cuts-modal .omniscribe_modal-title {
+  font-size: 18px;
+  line-height: 1.3;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--color-gray-900, #0f172a);
+}
+
+.omniscribe_audio-cuts-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Summary card: warning icon + paragraph in a soft container. */
+.omniscribe_audio-cuts-summary {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.omniscribe_audio-cuts-summary-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 9999px;
+  background-color: #fef3c7;
+  color: #b45309;
+}
+
+.omniscribe_audio-cuts-summary-text {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-gray-800, #1f2937);
+  flex: 1;
+}
+
+/* Cut list: rounded gray container, clock icon per row, no bullets. */
+.omniscribe_audio-cuts-list {
+  margin: 0;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background-color: var(--color-gray-50, #f9fafb);
+  border: 1px solid var(--color-gray-200, #e5e7eb);
+  list-style: none;
+  max-height: 240px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.omniscribe_audio-cuts-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--color-gray-700, #374151);
+  font-variant-numeric: tabular-nums;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.omniscribe_audio-cuts-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-gray-500, #6b7280);
+}
+
+/* Action row: right-aligned, secondary as text-link, primary as blue pill. */
+.omniscribe_audio-cuts-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16px;
+  margin-top: 4px;
+}
+
+.omniscribe_audio-cuts-secondary {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 8px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-gray-700, #374151);
+  border-radius: 9999px;
+  transition: background-color 0.15s ease;
+}
+
+.omniscribe_audio-cuts-secondary:hover {
+  background-color: var(--color-gray-100, #f3f4f6);
+  color: var(--color-gray-900, #0f172a);
+}
+
+.omniscribe_audio-cuts-primary {
+  border-radius: 9999px !important;
+  gap: 8px;
+  padding-block: 10px !important;
+  padding-inline: 18px !important;
+  height: auto !important;
+  font-weight: 600;
+}
 /* Draggable Collapsed Container */
 .omniscribe_draggable-collapsed {
   position: fixed;
@@ -3755,6 +4053,34 @@
   line-height: 1.7 !important;
 }
 
+/* Audio-loss divider rendered between segments where a recording cut
+   occurred. Visually separates captured speech from the gap so the doctor
+   can spot lost portions while reviewing the transcription. */
+.omniscribe_transcription-panel-cut {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-block: 10px;
+  padding-inline: 4px;
+}
+
+.omniscribe_transcription-panel-cut-line {
+  flex: 1;
+  height: 1px;
+  background-color: #fed7aa;
+}
+
+.omniscribe_transcription-panel-cut-label {
+  flex-shrink: 0;
+  padding: 2px 10px;
+  border-radius: 9999px;
+  background-color: #fff7ed;
+  border: 1px solid #fed7aa;
+  color: #c2410c;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
 /* Scrollbar styles */
 .omniscribe_transcription-panel-content::-webkit-scrollbar {
   width: 6px;
@@ -3927,29 +4253,42 @@
   cursor: pointer;
   display: inline-block;
 }
-.omniscribe_toast-container {
+.omniscribe_toast-stack {
   position: fixed;
-  bottom: calc(var(--spacing) * 5);
-  top: calc(var(--spacing) * -30);
+  top: calc(var(--spacing) * 4);
+  right: calc(var(--spacing) * 4);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 2);
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.omniscribe_toast-item {
   border-radius: var(--radius);
   padding: calc(var(--spacing) * 4);
-  height: fit-content;
-  transition-duration: 500ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   width: calc(var(--spacing) * 120);
+  display: flex;
+  align-items: flex-start;
+  transition:
+    transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: auto;
 }
 
-.omniscribe_toast-container-danger {
+.omniscribe_toast-item-danger {
   background-color: var(--color-red-500);
 }
-.omniscribe_toast-container-black {
+.omniscribe_toast-item-black {
   background-color: var(--black);
 }
-.omniscribe_toast-container-show {
-  right: calc(var(--spacing) * 10);
+.omniscribe_toast-item-show {
+  transform: translateX(0);
+  opacity: 1;
 }
-.omniscribe_toast-container-hide {
-  right: -100%;
+.omniscribe_toast-item-hide {
+  transform: translateX(120%);
+  opacity: 0;
 }
 .omniscribe_toast-subcontainer {
   transition-property: opacity;
@@ -3958,6 +4297,7 @@
   display: flex;
   flex-direction: column;
   color: var(--white);
+  flex: 1;
 }
 .omniscribe_toast-title {
   font-size: 18px;
@@ -3966,6 +4306,19 @@
 .omniscribe_toast-msg {
   font-size: 16px;
 }
+.omniscribe_toast-close {
+  background: none;
+  border: none;
+  color: var(--white);
+  font-size: 18px;
+  cursor: pointer;
+  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
+  align-self: flex-start;
+  opacity: 0.8;
+}
+.omniscribe_toast-close:hover {
+  opacity: 1;
+}
 .omniscribe_select-container {
   position: relative;
   width: 100%;

package/dist/react/index.d.ts

@@ -3,7 +3,7 @@ import { JSX } from 'react/jsx-runtime';
 import * as React_2 from 'react';
 import { VariantProps } from 'class-variance-authority';
 
-export declare function Button({ className, variant, size, asChild, isDisabled, isLoading, text, whitespace, rounded, ...props }: ButtonProps): JSX.Element;
+export declare function Button({ className, variant, size, asChild, isDisabled, isLoading, text, whitespace, rounded, type, ...props }: ButtonProps): JSX.Element;
 
 declare type ButtonProps = React_2.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
@@ -143,7 +143,23 @@ declare type TDayData = {
     patientId: string;
     doctorId: string;
     date: string;
-    report: object;
+    report: object | undefined;
+    /** Last incremental extraction result (not the final report).
+     * Used as previous_extraction context when Generate fallback is triggered. */
+    lastExtraction?: object;
+    /** Auto-generated report sitting in storage waiting for the user to
+     *  click Generate. Cleared (set to undefined) once the user consumes it
+     *  via deliverReport, at which point the same payload is promoted to
+     *  the `report` field. Stored separately so a reload doesn't make the
+     *  UI think the user has already consumed it (which would switch the
+     *  button to Regenerate). */
+    autoPendingReport?: object;
+    /** ISO timestamp set when the user clicks Generate. Cleared once the
+     *  report is delivered. Persisted so a page reload mid-generation can
+     *  restore the loading-state UI ("Generating..." while waiting for
+     *  pendingReport / storage / API to resolve) without the user needing
+     *  to click again. */
+    pendingClickAt?: string;
     transcript: TProcessedSegment[];
     transcriptionId?: string;
     clinicalNoteId?: string;
@@ -170,9 +186,8 @@ declare type TProcessedSegment = {
 declare type TRenderReport = (report: object, selected: string) => React_2.JSX.Element[] | React_2.JSX.Element;
 
 declare type TSegmentText = {
-    speaker: string;
+    speaker?: string;
     text: string;
-    speaker_id: string;
 }[];
 
 export declare type TToastState = {