@kitn.ai/ui 0.18.1 → 0.19.0

package/src/components/composer.tsx

@@ -855,6 +855,10 @@ export function Composer(props: ComposerProps): JSX.Element {
         .kai-composer-pill-glyph svg { width: 1em; height: 1em; display: block; }
         /* The editable is the containing block for the placeholder pseudo-element. */
         [data-kai-composer-editable] { position: relative; }
+        /* While a pill is arrow-selected the pill IS the selection, so hide the text
+           caret so a blinking cursor doesn't sit beside the highlight box. Returns
+           the moment the pill selection clears (arrow off, type, click, backspace). */
+        [data-kai-composer-editable][data-pill-selected] { caret-color: transparent; }
         /* Placeholder via pseudo-element — exempt from axe color-contrast like a
            native <textarea> placeholder. position:absolute (with auto offsets =
            its static text-origin spot) takes it OUT of flow, so the caret sits at
@@ -874,6 +878,7 @@ export function Composer(props: ComposerProps): JSX.Element {
         <div
           ref={(el) => { editable = el; props.editableRef?.(el); }}
           data-kai-composer-editable
+          data-pill-selected={selectedPill() ? '' : undefined}
           data-placeholder={props.placeholder ?? ''}
           contentEditable={props.disabled ? false : ('plaintext-only' as unknown as boolean)}
           role="textbox"

package/src/components/thread.tsx

@@ -0,0 +1,177 @@
+import { For, Show, onMount, type JSX } from 'solid-js';
+import { ChatConfig, useChatConfig } from '../primitives/chat-config';
+import { ChatContainer, ChatContainerContent, ChatContainerScrollAnchor } from './chat-container';
+import { Message, MessageAvatar, MessageBody } from './message';
+import { createMessageFeedback, type MessageActionDetail } from '../primitives/message-feedback';
+import { ScrollButton } from './scroll-button';
+import { Loader } from './loader';
+import type { ChatMessage } from '../elements/chat-types';
+import type { ProseSize } from '../primitives/chat-config';
+
+/** Imperative handle exposed via `controllerRef` — the thread's scroll control,
+ *  forwarded onto `<kai-thread>` as the `scrollToBottom()` instance method. */
+export interface ThreadController {
+  /** Scroll the message list to the bottom (default `'smooth'`). */
+  scrollToBottom(behavior?: ScrollBehavior): void;
+}
+
+export interface ThreadProps {
+  /** Extra classes for the thread root (e.g. `rounded-xl`). */
+  class?: string;
+  /** The full message thread to render, newest last. Each entry carries its role,
+   *  content, and optional reasoning/tools/attachments/actions/avatar. A new array
+   *  reference per streaming chunk re-renders (mutating in place does not). */
+  messages: ChatMessage[];
+  /** Show a typing indicator on the pending assistant turn — use while awaiting
+   *  the assistant's reply. */
+  loading?: boolean;
+  /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`).
+   *  Defaults to `'sm'`. */
+  proseSize?: ProseSize;
+  /** Shiki theme name for syntax-highlighted code blocks (e.g.
+   *  `'github-dark-dimmed'`). */
+  codeTheme?: string;
+  /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain
+   *  `<pre>` blocks (lighter, no highlighter load). Default true. */
+  codeHighlight?: boolean;
+  /** Whether each message's action bar is always visible (`'always'`, default) or
+   *  only revealed on hover of that message row (`'hover'`). */
+  actionsReveal?: 'always' | 'hover';
+  /** Show the scroll-to-bottom button inside the scroll area. Default true. */
+  scrollButton?: boolean;
+  /** Custom zero-state shown while the thread is empty. A sensible default renders
+   *  when omitted (the `<kai-thread>` facade wires this to `slot="empty"`). */
+  empty?: JSX.Element;
+  /** Fired when a message's action button is clicked (copy / vote / regenerate /
+   *  edit / custom). The facade re-dispatches this as `kai-message-action`. */
+  onMessageAction?: (detail: MessageActionDetail) => void;
+  /** Receive the imperative controller once mounted — the `<kai-thread>` facade
+   *  forwards `scrollToBottom` onto the host. */
+  controllerRef?: (controller: ThreadController) => void;
+}
+
+/** Built-in zero-state, shown when the thread is empty and no `empty` is supplied. */
+function DefaultEmpty() {
+  return (
+    <div class="flex min-h-[10rem] flex-1 flex-col items-center justify-center gap-1 py-12 text-center">
+      <p class="text-sm font-medium text-foreground">No messages yet</p>
+      <p class="text-xs text-muted-foreground">
+        Messages will appear here as the conversation starts.
+      </p>
+    </div>
+  );
+}
+
+/**
+ * `Thread` — the message-list slice of a chat, as a standalone composable: the
+ * scrolling list of messages + per-message rendering (markdown, code highlight,
+ * reasoning + tool panels, avatars, and the action row), stick-to-bottom scroll
+ * with a scroll-to-bottom button, an optional typing indicator, and an empty
+ * state. No composer, header, suggestions, or sidebar — those are sibling/preset
+ * concerns. This is the source of truth behind the `<kai-thread>` facade; it is
+ * composed from the same internal pieces `ChatThread` uses for its message list.
+ */
+export function Thread(props: ThreadProps) {
+  const outer = useChatConfig();
+  const reveal = () => (props.actionsReveal === 'hover' ? 'hover' : 'always');
+  // Feedback (copy + vote) state lives ABOVE the per-message <For>, so streaming
+  // re-renders (a fresh `messages` array ref per chunk) don't wipe it. The
+  // copy/feedback toasts scope to this thread's root so they appear in-thread
+  // rather than at the page top.
+  let rootEl: HTMLElement | undefined;
+  const feedback = createMessageFeedback({
+    emit: (detail) => props.onMessageAction?.(detail),
+    target: () => rootEl,
+  });
+  const showScrollButton = () => props.scrollButton !== false;
+  const showEmpty = () => props.messages.length === 0 && !props.loading;
+
+  // Hand the imperative controller to the facade once mounted (rootEl is set).
+  onMount(() => {
+    props.controllerRef?.({
+      scrollToBottom: (behavior) => {
+        const vp = rootEl?.querySelector<HTMLElement>('.overflow-y-auto');
+        vp?.scrollTo({ top: vp.scrollHeight, behavior: behavior ?? 'smooth' });
+      },
+    });
+  });
+
+  return (
+    <ChatConfig
+      proseSize={props.proseSize}
+      codeTheme={props.codeTheme}
+      codeHighlight={props.codeHighlight !== false}
+      portalMount={outer.portalMount()}
+    >
+      <div
+        ref={(e) => (rootEl = e as HTMLElement)}
+        class={`relative flex h-full min-h-0 flex-col bg-background ${props.class ?? ''}`}
+      >
+        <ChatContainer class="h-full px-4 py-3">
+          <ChatContainerContent class="mx-auto w-full max-w-3xl space-y-4">
+            {/* Zero-state: the consumer owns WHAT it looks like (`empty`); the
+                component owns WHEN it shows (empty + not loading). */}
+            <Show when={showEmpty()}>
+              <Show when={props.empty} fallback={<DefaultEmpty />}>
+                {props.empty}
+              </Show>
+            </Show>
+            <For each={props.messages}>
+              {(m) => {
+                const body = (
+                  <MessageBody
+                    content={m.content}
+                    reasoning={m.reasoning}
+                    tools={m.tools}
+                    attachments={m.attachments}
+                    isUser={m.role === 'user'}
+                    markdown={m.role === 'assistant'}
+                    actions={m.actions}
+                    actionsReveal={reveal()}
+                    activeFeedback={feedback.resolveFeedback(m)}
+                    copied={feedback.isCopied(m.id)}
+                    onAction={(action) => feedback.handleAction(m, action)}
+                  />
+                );
+                const rowGroup = reveal() === 'hover' ? 'group ' : '';
+                return (
+                  <Show
+                    when={m.avatar}
+                    fallback={
+                      <Message class={`${rowGroup}${m.role === 'user' ? 'flex-col items-end' : 'flex-col items-start'}`}>
+                        {body}
+                      </Message>
+                    }
+                  >
+                    {(av) => (
+                      <Message class={rowGroup}>
+                        <MessageAvatar src={av().src ?? ''} alt={av().alt ?? ''} fallback={av().fallback} />
+                        <div class={`flex min-w-0 flex-1 flex-col ${m.role === 'user' ? 'items-end' : 'items-start'}`}>
+                          {body}
+                        </div>
+                      </Message>
+                    )}
+                  </Show>
+                );
+              }}
+            </For>
+            {/* Typing indicator on the pending assistant turn. */}
+            <Show when={props.loading}>
+              <Message class="flex-col items-start">
+                <div class="rounded-lg px-1 py-2">
+                  <Loader variant="typing" />
+                </div>
+              </Message>
+            </Show>
+            <ChatContainerScrollAnchor />
+          </ChatContainerContent>
+          <Show when={showScrollButton()}>
+            <div class="absolute bottom-4 left-1/2 flex w-full max-w-3xl -translate-x-1/2 justify-center px-5">
+              <ScrollButton class="shadow-sm" />
+            </div>
+          </Show>
+        </ChatContainer>
+      </div>
+    </ChatConfig>
+  );
+}

package/src/elements/chat-workspace.tsx

@@ -266,7 +266,7 @@ defineWebComponent<Props, Events>('kai-workspace', {
               </Show>
             </div>
           </ResizablePanel>
-          <ResizableHandle withHandle />
+          <ResizableHandle />
           <ResizablePanel>{mainRegion}</ResizablePanel>
         </ResizablePanelGroup>
       </Show>