@adea-ai/ui 0.120.0 → 0.121.0

package/src/components/conversation/conversation-pane.tsx

@@ -0,0 +1,111 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+export type ConversationPaneProps = ComponentProps<'section'> & {
+  /** Above the transcript: the conversation's identity and its actions. */
+  header?: JSX.Element
+  /** The transcript — typically a `ConversationSurface` with `gutter`. */
+  children: JSX.Element
+  /** Below the transcript: the composer. */
+  composer?: JSX.Element
+  /**
+   * The thread side panel. Its presence opens the second column; at narrow
+   * widths the panel overlays the conversation instead of squeezing it, and
+   * the conversation chrome steps aside — out of the accessibility tree with
+   * it, which is why the overlay hides with `visibility` rather than paint.
+   */
+  thread?: JSX.Element
+  /**
+   * Apply the shared page gutters to the composer, tracking the transcript's
+   * own gutter (`ConversationSurface`'s `gutter`) so the two read as one pane.
+   */
+  gutter?: boolean
+}
+
+/**
+ * ConversationPane.
+ *
+ * The frame a conversation lives in: a header above, the transcript, a composer
+ * below, and — while a thread is open — the thread panel beside all of it.
+ *
+ * The layout earns its place in the library because the thread is where
+ * applications get it wrong. Two impulses both fail: shrinking the transcript
+ * to make room turns a busy thread into a one-word-per-line stripe, and
+ * *hiding* the transcript with `display: none` unmounts it, losing scroll
+ * position and DOM. So the desktop layout gives the thread a fixed column and
+ * leaves the transcript fluid; below the collapse width the panel overlays the
+ * conversation in full and the conversation steps aside invisibly — still
+ * mounted, still in the DOM, gone from the accessibility tree.
+ */
+export function ConversationPane(props: ConversationPaneProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'header',
+    'composer',
+    'thread',
+    'gutter',
+    'children',
+  ])
+  const threadOpen = () => local.thread !== undefined
+
+  return (
+    <section
+      data-slot="conversation-pane"
+      data-conversation-thread-open={threadOpen() || undefined}
+      class={cn(
+        'relative grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)_auto]',
+        threadOpen()
+          ? 'grid-cols-1 md:grid-cols-[minmax(20rem,1fr)_minmax(18rem,22rem)] lg:grid-cols-[minmax(24rem,1fr)_minmax(20rem,26rem)]'
+          : 'grid-cols-1',
+        local.class
+      )}
+      {...rest}
+    >
+      <Show when={local.header}>
+        {(header) => (
+          <div class={cn('col-start-1 row-start-1 min-w-0', threadOpen() && 'max-md:invisible')}>
+            {header()}
+          </div>
+        )}
+      </Show>
+
+      <div
+        class={cn(
+          'col-start-1 row-start-2 flex min-h-0 min-w-0 flex-col',
+          threadOpen() && 'max-md:invisible'
+        )}
+      >
+        {local.children}
+      </div>
+
+      <Show when={local.composer}>
+        {(composer) => (
+          <div
+            class={cn(
+              'col-start-1 row-start-3 min-w-0',
+              local.gutter && 'mx-[clamp(0.8rem,3vw,2.5rem)] mb-[1.15rem] max-[30rem]:mx-2',
+              threadOpen() && 'max-md:invisible'
+            )}
+          >
+            {composer()}
+          </div>
+        )}
+      </Show>
+
+      <Show when={local.thread}>
+        {(thread) => (
+          <div
+            class={cn(
+              'min-h-0 min-w-0',
+              threadOpen() &&
+                'max-md:absolute max-md:inset-0 max-md:z-(--z-docked) max-md:*:border-s-0 md:col-start-2 md:row-span-3 md:row-start-1'
+            )}
+          >
+            {thread()}
+          </div>
+        )}
+      </Show>
+    </section>
+  )
+}

package/src/components/conversation/conversation-surface.tsx

@@ -38,6 +38,12 @@ export type ConversationSurfaceProps = ComponentProps<'div'> & {
   empty?: JSX.Element
   /** A header that scrolls with the transcript, e.g. a day divider or a banner. */
   header?: JSX.Element
+  /**
+   * The shared page gutter: reading padding inside the scroller plus a stable
+   * gutter, so the scrollbar never shifts the text when it appears. The page
+   * frame around the surface is `ConversationPane`'s job.
+   */
+  gutter?: boolean
 }
 
 export function ConversationSurface(props: ConversationSurfaceProps) {
@@ -50,6 +56,7 @@ export function ConversationSurface(props: ConversationSurfaceProps) {
     'onReadingPositionChange',
     'empty',
     'header',
+    'gutter',
     'children',
     'onScroll',
     'ref',
@@ -84,7 +91,11 @@ export function ConversationSurface(props: ConversationSurfaceProps) {
         }}
         onScroll={onScroll}
         tabindex={local.tabindex ?? 0}
-        class="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+        class={cn(
+          'min-h-0 flex-1 overflow-y-auto overscroll-contain',
+          local.gutter &&
+            'px-[clamp(0.8rem,3vw,2.5rem)] pt-[1.35rem] pb-[1.1rem] [scrollbar-gutter:stable] max-[30rem]:px-2'
+        )}
         {...rest}
       >
         <div ref={follow.bindContent} data-slot="conversation-content">

package/src/components/conversation/index.ts

@@ -10,6 +10,13 @@ export {
   type ConversationSurfaceProps,
   type ConversationReadingPosition,
 } from './conversation-surface'
+export { ConversationPane, type ConversationPaneProps } from './conversation-pane'
+export {
+  ComposerMenu,
+  ComposerMenuItem,
+  type ComposerMenuProps,
+  type ComposerMenuItemProps,
+} from './composer-menu'
 export {
   ComposerAttachmentButton,
   ComposerHint,

package/src/components/conversation/message-composer.tsx

@@ -71,6 +71,12 @@ export type MessageComposerProps = Omit<ComponentProps<'form'>, 'onSubmit'> & {
   trailing?: JSX.Element
   /** A menu rendered above the field, e.g. mention suggestions. */
   menu?: JSX.Element
+  /**
+   * Host progress rendered in the composer's own live region, e.g. dictation
+   * state — plain paragraphs are progress, a `role="alert"` paragraph is a
+   * failure. Sending and send-failure copy stays the composer's own.
+   */
+  status?: JSX.Element
   /** The reply target, drawn as a strip above the field. */
   replyTo?: { label: string; onDismiss: () => void }
   /** Ref to the actual message textarea, for host focus and selection behavior. */
@@ -102,6 +108,7 @@ export function MessageComposer(props: MessageComposerProps) {
     'leading',
     'trailing',
     'menu',
+    'status',
     'replyTo',
     'inputRef',
     'inputId',
@@ -281,6 +288,7 @@ export function MessageComposer(props: MessageComposerProps) {
         >
           {pendingLabel()}…
         </Show>
+        <Show when={local.status}>{local.status}</Show>
       </div>
     </form>
   )

package/src/components/ui/kbd/index.ts

@@ -8,3 +8,8 @@ export {
   type KbdChordProps,
   type KbdSize,
 } from './kbd'
+export {
+  platformModifierKey,
+  searchShortcutKeyshortcuts,
+  searchShortcutLabel,
+} from './platform-modifier'

package/src/components/ui/kbd/platform-modifier.ts

@@ -0,0 +1,37 @@
+/**
+ * Which modifier a chord should advertise.
+ *
+ * Every global chord in the product binds `(metaKey || ctrlKey)`, so the
+ * working key is the platform's command modifier wherever the app runs — but
+ * Apple platforms draw it as ⌘ and everyone else spells it Ctrl. A chord
+ * label drawn from anything else (a hardcoded ⌘, say) advertises a key that
+ * does not work as drawn on Windows and Linux.
+ *
+ * These helpers are the one place that decides the glyph, so every surface
+ * that draws or announces a shortcut — rail rows, menus, a pane's search
+ * field — draws the same one. They sit next to the `Kbd` caps because the
+ * glyph is a property of the drawing, not of the feature that shows it: a
+ * spelled-out `Ctrl` needs one cap per word (a `KbdGroup`), while `⌘K` can
+ * ride `KbdChord`'s one-cap-per-character split.
+ */
+
+/** The modifier glyph the running OS renders for Meta: ⌘ on Apple platforms, Ctrl elsewhere. */
+export function platformModifierKey(platform?: string): '⌘' | 'Ctrl' {
+  // The guard keeps server renders honest: no navigator means no Apple
+  // platform string, so they fall back to the spelled-out modifier.
+  const browserPlatform = platform ?? (typeof navigator === 'undefined' ? '' : navigator.platform)
+  return /Mac|iPhone|iPad|iPod/i.test(browserPlatform) ? '⌘' : 'Ctrl'
+}
+
+/** The workspace search chord label as the rail's hover text draws it: the
+ *  platform modifier plus K (`⌘K`, or `Ctrl+K` where ⌘ does not exist). */
+export function searchShortcutLabel(platform?: string): string {
+  return platformModifierKey(platform) === '⌘' ? '⌘K' : 'Ctrl+K'
+}
+
+/**
+ * The `aria-keyshortcuts` for the search chord. The binding accepts Meta and
+ * Ctrl alike, so the announced shortcuts name both: a hardcoded `Meta+K`
+ * would promise a key the row does not keep on non-Apple platforms.
+ */
+export const searchShortcutKeyshortcuts = 'Meta+K Control+K'