@kitn.ai/ui 0.28.0 → 0.30.0

package/src/components/model-switcher.tsx

@@ -1,132 +0,0 @@
-import { splitProps, For, Show, createSignal } from 'solid-js';
-import { cn } from '../utils/cn';
-import { Dropdown, DropdownTrigger, DropdownContent, DropdownRadioItem, type DropdownController } from '../ui/dropdown';
-import { Button } from '../ui/button';
-import type { ModelOption } from '../types';
-
-export interface ModelSwitcherProps {
-  models: ModelOption[];
-  currentModelId: string;
-  onModelChange: (modelId: string) => void;
-  class?: string;
-  /** Initial open state of the dropdown (uncontrolled seed). */
-  defaultOpen?: boolean;
-  /** Disable the trigger — click/keyboard no longer open the dropdown. */
-  disabled?: boolean;
-  /** Receive the dropdown's open controller (forwarded from the inner Dropdown). */
-  controllerRef?: (api: DropdownController) => void;
-}
-
-const Chevron = (props: { class?: string }) => (
-  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class={props.class}>
-    <polyline points="6 9 12 15 18 9" />
-  </svg>
-);
-
-/**
- * One selectable model.
- *
- * A single-select list of models IS a radio group, so this routes through
- * `DropdownRadioItem` (`role="menuitemradio"` + `aria-checked`) rather than
- * hand-rolling those attributes onto a plain `DropdownItem`. Being the current
- * model used to render as `font-medium` and nothing else — invisible to a screen
- * reader. `kai-menu` already renders its radio items this way.
- *
- * `DropdownRadioItem` deliberately does NOT close the menu on activation (it is
- * built for groups the consumer keeps mutating), so `onSelect` closes it here to
- * preserve the pick-and-close behaviour `DropdownItem` used to provide.
- */
-function ModelRow(props: {
-  model: ModelOption;
-  currentModelId: string;
-  onModelChange: (id: string) => void;
-  onClose: () => void;
-}) {
-  const subtitle = () => props.model.description ?? props.model.provider;
-  const checked = () => props.model.id === props.currentModelId;
-  return (
-    <DropdownRadioItem
-      checked={checked()}
-      onSelect={() => { props.onModelChange(props.model.id); props.onClose(); }}
-    >
-      <div class="flex flex-col">
-        <span class={cn('text-body', checked() && 'font-medium text-foreground')}>{props.model.name}</span>
-        <Show when={subtitle()}><span class="text-caption text-muted-foreground">{subtitle()}</span></Show>
-      </div>
-    </DropdownRadioItem>
-  );
-}
-
-export function ModelSwitcher(props: ModelSwitcherProps) {
-  const [local] = splitProps(props, ['models', 'currentModelId', 'onModelChange', 'class', 'defaultOpen', 'disabled', 'controllerRef']);
-  const currentModel = () => local.models.find((m) => m.id === local.currentModelId);
-
-  // The rows are DropdownRadioItems, which stay open by design, so the switcher
-  // needs its own handle on the dropdown to close after a pick. Tapping
-  // `controllerRef` keeps that inside this component — the dropdown's own context
-  // is module-private — and the consumer's `controllerRef` is still called, so
-  // this is invisible from the outside.
-  let controller: DropdownController | undefined;
-  const closeMenu = () => controller?.setOpen(false);
-
-  // Ungrouped models list first; grouped models collect under their group name,
-  // preserving first-seen group order.
-  const ungrouped = () => local.models.filter((m) => !m.group);
-  const groups = () => {
-    const order: string[] = [];
-    const byGroup = new Map<string, ModelOption[]>();
-    for (const m of local.models) {
-      if (!m.group) continue;
-      if (!byGroup.has(m.group)) { byGroup.set(m.group, []); order.push(m.group); }
-      byGroup.get(m.group)!.push(m);
-    }
-    return order.map((name) => ({ name, models: byGroup.get(name)! }));
-  };
-
-  return (
-    <Show when={local.models.length > 1}>
-      <Dropdown
-        defaultOpen={local.defaultOpen}
-        disabled={local.disabled}
-        controllerRef={(api) => { controller = api; local.controllerRef?.(api); }}
-      >
-        <DropdownTrigger as={(triggerProps: any) => (
-          <Button variant="ghost" size="sm" class={cn('gap-1 text-meta text-muted-foreground', local.class)} {...triggerProps}>
-            {currentModel()?.name ?? local.currentModelId}
-            <Chevron />
-          </Button>
-        )} />
-        <DropdownContent>
-          <For each={ungrouped()}>
-            {(model) => <ModelRow model={model} currentModelId={local.currentModelId} onModelChange={local.onModelChange} onClose={closeMenu} />}
-          </For>
-          <For each={groups()}>
-            {(group) => {
-              const [open, setOpen] = createSignal(false);
-              return (
-                <div>
-                  <button
-                    type="button"
-                    aria-expanded={open()}
-                    onClick={() => setOpen(!open())}
-                    class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-body outline-none transition-colors hover:bg-muted focus:bg-muted"
-                  >
-                    {group.name}
-                    <Chevron class={cn('transition-transform', open() && 'rotate-180')} />
-                  </button>
-                  <Show when={open()}>
-                    <div class="pl-2">
-                      <For each={group.models}>
-                        {(model) => <ModelRow model={model} currentModelId={local.currentModelId} onModelChange={local.onModelChange} onClose={closeMenu} />}
-                      </For>
-                    </div>
-                  </Show>
-                </div>
-              );
-            }}
-          </For>
-        </DropdownContent>
-      </Dropdown>
-    </Show>
-  );
-}

package/src/components/prompt-input.tsx

@@ -1,188 +0,0 @@
-import { type JSX, splitProps, createSignal, createContext, useContext } from 'solid-js';
-import { cn } from '../utils/cn';
-import { useChatConfig, textClass } from '../primitives/chat-config';
-import { Composer, type TriggerDef, type ComposerChange } from './composer';
-import type { ComposerDoc } from '../primitives/composer-model';
-
-// --- Context ---
-
-interface PromptInputContextType {
-  isLoading: boolean;
-  // A string (controlled text) or a ComposerDoc (a seed that pre-populates pills).
-  value: () => string | ComposerDoc;
-  setValue: (value: string) => void;
-  maxHeight: number | string;
-  onSubmit?: () => void;
-  disabled?: boolean;
-  textareaRef: HTMLElement | undefined;
-  setTextareaRef: (el: HTMLElement) => void;
-}
-
-const PromptInputContext = createContext<PromptInputContextType>();
-
-function usePromptInput() {
-  const ctx = useContext(PromptInputContext);
-  if (!ctx) throw new Error('PromptInput subcomponents must be used within PromptInput');
-  return ctx;
-}
-
-// --- PromptInput (Root) ---
-
-export interface PromptInputProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  isLoading?: boolean;
-  /** String = controlled text; ComposerDoc = a seed that pre-populates pills. */
-  value?: string | ComposerDoc;
-  onValueChange?: (value: string) => void;
-  maxHeight?: number | string;
-  onSubmit?: () => void;
-  children: JSX.Element;
-  disabled?: boolean;
-}
-
-function PromptInput(props: PromptInputProps) {
-  const [local, rest] = splitProps(props, [
-    'isLoading', 'value', 'onValueChange', 'maxHeight', 'onSubmit',
-    'children', 'disabled', 'class', 'onClick',
-  ]);
-
-  const [internalValue, setInternalValue] = createSignal<string | ComposerDoc>(local.value ?? '');
-  let textareaRef: HTMLElement | undefined;
-
-  const handleChange = (newValue: string) => {
-    setInternalValue(newValue);
-    local.onValueChange?.(newValue);
-  };
-
-  const handleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (e) => {
-    if (!local.disabled) textareaRef?.focus();
-    if (typeof local.onClick === 'function') {
-      (local.onClick as (e: MouseEvent & { currentTarget: HTMLDivElement }) => void)(e);
-    }
-  };
-
-  return (
-    <PromptInputContext.Provider
-      value={{
-        isLoading: local.isLoading ?? false,
-        value: () => local.value ?? internalValue(),
-        setValue: local.onValueChange ?? handleChange,
-        maxHeight: local.maxHeight ?? 240,
-        onSubmit: local.onSubmit,
-        get disabled() { return local.disabled; },
-        get textareaRef() { return textareaRef; },
-        setTextareaRef: (el) => { textareaRef = el; },
-      }}
-    >
-      <div
-        data-prompt-input
-        onClick={handleClick}
-        class={cn(
-          // The inner textarea neutralizes its own ring (focus-visible:ring-0),
-          // so the FRAME owns the focus affordance: a blue ring whenever a
-          // control inside it is focused. Without this the composer had no
-          // visible keyboard-focus state.
-          'bg-surface cursor-text rounded-xl p-2 shadow-xs',
-          'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-0',
-          local.disabled && 'cursor-not-allowed opacity-60',
-          local.class
-        )}
-        {...rest}
-      >
-        {local.children}
-      </div>
-    </PromptInputContext.Provider>
-  );
-}
-
-// --- PromptInputTextarea ---
-
-export interface PromptInputTextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  disableAutosize?: boolean;
-  /** Rich entity triggers (`/`, `@`) forwarded to the composer. */
-  triggers?: TriggerDef[];
-  /** Default icon per entity kind (kind → image src), forwarded to the composer. */
-  kindIcons?: Record<string, string>;
-  /** Structured change (doc + entities) from the composer, on every edit. */
-  onComposerChange?: (change: ComposerChange) => void;
-}
-
-function PromptInputTextarea(props: PromptInputTextareaProps) {
-  const [local] = splitProps(props, ['class', 'placeholder', 'aria-label', 'triggers', 'kindIcons', 'onComposerChange']);
-  const ctx = usePromptInput();
-  const config = useChatConfig();
-
-  // The editable mirrors the original <textarea>'s classes EXACTLY so swapping in
-  // the contenteditable composer is visually identical. The frame (PromptInput
-  // root) still owns radius/bg/padding/focus-ring; auto-grow is native to a
-  // contenteditable block (capped via max-height on the editable).
-  // `text-start` is a PIN, not a style choice: `text-align` inherits, so any
-  // centered ancestor (`Empty`'s root did exactly this) reached in and centered
-  // the placeholder AND the typed text. An input control's text alignment is a
-  // fact about the control, so it states it rather than inheriting it. LOGICAL
-  // (`start`), not `text-left` — in RTL the correct edge is the right one, and
-  // pinning the physical value would be a worse bug than the one it fixes.
-  const editableClass = () =>
-    cn(
-      'text-foreground min-h-[44px] w-full bg-transparent text-start shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0 overflow-y-auto whitespace-pre-wrap break-words',
-      textClass(config.proseSize()),
-      local.class,
-    );
-
-  return (
-    <Composer
-      bare
-      value={ctx.value()}
-      placeholder={local.placeholder as string | undefined}
-      ariaLabel={local['aria-label'] as string | undefined}
-      disabled={ctx.disabled}
-      maxHeight={ctx.maxHeight}
-      editableClass={editableClass()}
-      editableRef={(el) => ctx.setTextareaRef(el)}
-      triggers={local.triggers}
-      kindIcons={local.kindIcons}
-      // Surface the structured change (doc/entities) BEFORE the string value, so a
-      // consumer that enriches its events has the latest doc when value-change fires.
-      // A prompt can't start with whitespace — strip leading whitespace from the
-      // string value (parity with the old textarea); the controlled round-trip
-      // re-renders the editable so the stripped value shows too.
-      onChange={(c) => { local.onComposerChange?.(c); ctx.setValue(c.text.replace(/^\s+/, '')); }}
-      onSubmit={() => { if (!ctx.disabled) ctx.onSubmit?.(); }}
-    />
-  );
-}
-
-// --- PromptInputActions ---
-
-export interface PromptInputActionsProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  children: JSX.Element;
-}
-
-function PromptInputActions(props: PromptInputActionsProps) {
-  const [local, rest] = splitProps(props, ['children', 'class']);
-  return (
-    <div class={cn('flex items-center gap-2', local.class)} {...rest}>
-      {local.children}
-    </div>
-  );
-}
-
-// --- PromptInputAction ---
-
-export interface PromptInputActionProps {
-  tooltip?: string;
-  children: JSX.Element;
-  side?: 'top' | 'bottom' | 'left' | 'right';
-  class?: string;
-}
-
-function PromptInputAction(props: PromptInputActionProps) {
-  return <>{props.children}</>;
-}
-
-export {
-  PromptInput,
-  PromptInputTextarea,
-  PromptInputActions,
-  PromptInputAction,
-  usePromptInput,
-};

package/src/components/prompt-suggestion.tsx

@@ -1,150 +0,0 @@
-import { type JSX, Show, splitProps } from 'solid-js';
-import { cn } from '../utils/cn';
-import { Button } from '../ui/button';
-import { renderIcon } from '../ui/icon';
-
-export interface PromptSuggestionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
-  children: JSX.Element | string;
-  variant?: 'outline' | 'ghost' | 'default';
-  /** Row height for the `list` layout: `'md'` (default) or `'lg'` for taller
-   *  rows (more vertical padding). Chips/block/highlight are unaffected. */
-  size?: 'md' | 'lg';
-  /** Optional leading icon (named icon, image URL/data-URI, or text). */
-  icon?: string;
-  highlight?: string;
-  /** Render as a full-width, left-aligned list row (the "suggested questions"
-   *  idiom) instead of a rounded pill. Wraps long text. Ignored in highlight
-   *  mode, which is always a list row. */
-  block?: boolean;
-  /** Render as a full-width "Ideas for you" list row: a leading icon, a
-   *  left-aligned label, and a hover background. Like `block`, but keeps the
-   *  leading icon. Ignored in highlight mode. */
-  list?: boolean;
-}
-
-function PromptSuggestion(props: PromptSuggestionProps) {
-  const [local, rest] = splitProps(props, ['children', 'variant', 'size', 'class', 'icon', 'highlight', 'block', 'list']);
-  const Icon = () => <Show when={local.icon}>{renderIcon(local.icon, { class: 'size-3.5 shrink-0' })}</Show>;
-
-  const isHighlightMode = () => local.highlight !== undefined && local.highlight.trim() !== '';
-  const content = () => typeof local.children === 'string' ? local.children : '';
-
-  return (
-    <Show
-      when={isHighlightMode()}
-      fallback={
-        <Show
-          when={local.list}
-          fallback={
-            <Show
-              when={local.block}
-              fallback={
-                <Button
-                  variant={local.variant ?? 'outline'}
-                  size="lg"
-                  class={cn('rounded-full', local.class)}
-                  {...rest}
-                >
-                  <Icon />
-                  {local.children}
-                </Button>
-              }
-            >
-              <Button
-                variant={local.variant ?? 'outline'}
-                size="md"
-                class={cn(
-                  'h-auto w-full cursor-pointer justify-start rounded-xl px-4 py-2.5',
-                  'text-left text-sm leading-snug whitespace-normal text-pretty',
-                  local.class,
-                )}
-                {...rest}
-              >
-                {local.children}
-              </Button>
-            </Show>
-          }
-        >
-          <Button
-            variant={local.variant ?? 'ghost'}
-            size="md"
-            class={cn(
-              'group h-auto w-full cursor-pointer items-center justify-start gap-2.5 rounded-xl px-3',
-              local.size === 'lg' ? 'py-3.5' : 'py-2.5',
-              'text-left text-sm leading-snug whitespace-normal text-pretty',
-              'hover:bg-accent',
-              local.class,
-            )}
-            {...rest}
-          >
-            <Icon />
-            <span class="min-w-0 flex-1">{local.children}</span>
-          </Button>
-        </Show>
-      }
-    >
-      <Show
-        when={content()}
-        fallback={
-          <Button
-            variant={local.variant ?? 'ghost'}
-            size="sm"
-            class={cn(
-              'w-full cursor-pointer justify-start rounded-xl py-2',
-              'hover:bg-accent',
-              local.class
-            )}
-            {...rest}
-          >
-            {local.children}
-          </Button>
-        }
-      >
-        <Button
-          variant={local.variant ?? 'ghost'}
-          size="sm"
-          class={cn(
-            'w-full cursor-pointer justify-start gap-0 rounded-xl py-2',
-            'hover:bg-accent',
-            local.class
-          )}
-          {...rest}
-        >
-          {renderHighlighted(content(), local.highlight!)}
-        </Button>
-      </Show>
-    </Show>
-  );
-}
-
-function renderHighlighted(text: string, highlight: string) {
-  const trimmed = highlight.trim();
-  const textLower = text.toLowerCase();
-  const highlightLower = trimmed.toLowerCase();
-  const index = textLower.indexOf(highlightLower);
-
-  if (index === -1) {
-    return <span class="text-foreground/70 whitespace-pre-wrap">{text}</span>;
-  }
-
-  const before = text.substring(0, index);
-  const matched = text.substring(index, index + highlightLower.length);
-  const after = text.substring(index + matched.length);
-
-  return (
-    <>
-      <Show when={before}>
-        <span class="text-foreground/70 whitespace-pre-wrap">{before}</span>
-      </Show>
-      {/* Matched-substring highlight is CONTENT, not a control — was the BRAND
-          token. Full-strength `text-foreground` against the `/70`-opacity
-          siblings above/below is what actually carries the highlight. */}
-      <span class="text-foreground font-medium whitespace-pre-wrap">{matched}</span>
-      <Show when={after}>
-        <span class="text-foreground/70 whitespace-pre-wrap">{after}</span>
-      </Show>
-    </>
-  );
-}
-
-export { PromptSuggestion };