@kitnai/chat 0.2.0 → 0.3.1

package/src/elements/default-input.tsx

@@ -2,6 +2,15 @@ import { For, Show } from 'solid-js';
 import { PromptInput, PromptInputTextarea, PromptInputActions } from '../components/prompt-input';
 import { PromptSuggestion } from '../components/prompt-suggestion';
 import { Button } from '../ui/button';
+import { Paperclip, Globe, Mic } from 'lucide-solid';
+import {
+  Attachments,
+  Attachment,
+  AttachmentPreview,
+  AttachmentInfo,
+  AttachmentRemove,
+  type AttachmentData,
+} from '../components/attachments';
 
 export interface DefaultPromptInputProps {
   value: string;
@@ -9,12 +18,50 @@ export interface DefaultPromptInputProps {
   disabled?: boolean;
   loading?: boolean;
   suggestions?: string[];
+  /** Attachments staged in the input. Provide `onAttachmentsChange` to enable
+   *  the attach button + removable previews. */
+  attachments?: AttachmentData[];
+  /** Show a Search (Globe) button in the left toolbar; calls `onSearch`. */
+  search?: boolean;
+  /** Show a Voice (Mic) button in the left toolbar; calls `onVoice`. */
+  voice?: boolean;
   onValueChange: (v: string) => void;
   onSubmit: () => void;
   onSuggestionClick: (v: string) => void;
+  onAttachmentsChange?: (attachments: AttachmentData[]) => void;
+  onSearch?: () => void;
+  onVoice?: () => void;
+}
+
+function fileToAttachment(file: File): AttachmentData {
+  const id =
+    typeof crypto !== 'undefined' && crypto.randomUUID
+      ? crypto.randomUUID()
+      : `${file.name}-${file.size}-${file.lastModified}`;
+  return {
+    id,
+    type: 'file',
+    filename: file.name,
+    mediaType: file.type || undefined,
+    url: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
+  };
 }
 
 export function DefaultPromptInput(props: DefaultPromptInputProps) {
+  let fileInput: HTMLInputElement | undefined;
+  const attachments = () => props.attachments ?? [];
+  const canAttach = () => !!props.onAttachmentsChange;
+
+  const addFiles = (files: FileList | null) => {
+    if (!files?.length || !props.onAttachmentsChange) return;
+    props.onAttachmentsChange([...attachments(), ...Array.from(files).map(fileToAttachment)]);
+  };
+  const removeAttachment = (id: string) =>
+    props.onAttachmentsChange?.(attachments().filter((a) => a.id !== id));
+
+  const sendDisabled = () =>
+    props.disabled || props.loading || (!props.value.trim() && attachments().length === 0);
+
   return (
     <>
       <Show when={props.suggestions?.length}>
@@ -33,13 +80,80 @@ export function DefaultPromptInput(props: DefaultPromptInputProps) {
         isLoading={props.loading}
         disabled={props.disabled}
       >
+        <Show when={canAttach() && attachments().length}>
+          <div class="px-3 pt-3">
+            <Attachments variant="inline">
+              <For each={attachments()}>
+                {(att) => (
+                  <Attachment data={att} onRemove={() => removeAttachment(att.id)}>
+                    <AttachmentPreview />
+                    <AttachmentInfo />
+                    <AttachmentRemove />
+                  </Attachment>
+                )}
+              </For>
+            </Attachments>
+          </div>
+        </Show>
         <PromptInputTextarea placeholder={props.placeholder} class="min-h-[44px] pt-3 pl-4" />
-        <PromptInputActions class="mt-2 flex w-full items-center justify-end gap-2 px-3 pb-3">
+        <PromptInputActions class="mt-2 flex w-full items-center justify-between gap-2 px-3 pb-3">
+          <div class="flex items-center gap-2">
+            <Show when={canAttach()}>
+              <input
+                ref={fileInput}
+                type="file"
+                multiple
+                class="hidden"
+                onChange={(e) => {
+                  addFiles(e.currentTarget.files);
+                  e.currentTarget.value = ''; // allow re-picking the same file
+                }}
+              />
+              <Button
+                type="button"
+                variant="outline"
+                size="icon-sm"
+                class="rounded-full"
+                aria-label="Attach files"
+                disabled={props.disabled}
+                onClick={() => fileInput?.click()}
+              >
+                <Paperclip class="size-4" />
+              </Button>
+            </Show>
+            <Show when={props.search}>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                class="rounded-full gap-1"
+                aria-label="Search the web"
+                disabled={props.disabled}
+                onClick={() => props.onSearch?.()}
+              >
+                <Globe class="size-4" />
+                Search
+              </Button>
+            </Show>
+            <Show when={props.voice}>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon-sm"
+                class="rounded-full"
+                aria-label="Voice input"
+                disabled={props.disabled}
+                onClick={() => props.onVoice?.()}
+              >
+                <Mic class="size-4" />
+              </Button>
+            </Show>
+          </div>
           <Button
             size="icon-sm"
             class="rounded-full"
             data-testid="send"
-            disabled={props.disabled || props.loading || !props.value.trim()}
+            disabled={sendDisabled()}
             onClick={props.onSubmit}
           >
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

package/src/elements/define.tsx

@@ -69,8 +69,11 @@ export function defineKitnElement<P extends Record<string, unknown>>(
     return (
       <>
         <style>{KITN_CSS}</style>
-        {/* display:contents — no layout box; just carries the .dark token scope. */}
-        <div classList={{ dark: isDark() }} style={{ display: 'contents' }}>
+        {/* display:contents — no layout box; carries the .dark token scope and
+            re-roots the inherited `color` to the active mode's foreground, so text
+            without an explicit color class (e.g. attachment filename labels) follows
+            light/dark instead of inheriting the host page's color. */}
+        <div classList={{ dark: isDark() }} style={{ display: 'contents', color: 'var(--color-foreground)' }}>
           <div ref={portalNode} />
           <ChatConfig portalMount={portalNode}>
             {Facade(props as unknown as P, { element, dispatch })}

package/src/elements/prompt-input.tsx

@@ -1,6 +1,7 @@
 import { createSignal } from 'solid-js';
 import { defineKitnElement } from './define';
 import { DefaultPromptInput } from './default-input';
+import type { AttachmentData } from '../components/attachments';
 
 interface Props extends Record<string, unknown> {
   value?: string;
@@ -18,10 +19,14 @@ defineKitnElement<Props>('kitn-prompt-input', {
   suggestions: undefined,
 }, (props, { dispatch }) => {
   const [internal, setInternal] = createSignal(props.value ?? '');
+  const [attachments, setAttachments] = createSignal<AttachmentData[]>([]);
   const current = () => props.value ?? internal();
 
   const handleChange = (v: string) => { setInternal(v); dispatch('valuechange', { value: v }); };
-  const handleSubmit = () => dispatch('submit', { value: current() });
+  const handleSubmit = () => {
+    dispatch('submit', { value: current(), attachments: attachments() });
+    setAttachments([]);
+  };
   const handleSuggestionClick = (v: string) => { handleChange(v); dispatch('suggestionclick', { value: v }); };
 
   return (
@@ -31,9 +36,11 @@ defineKitnElement<Props>('kitn-prompt-input', {
       disabled={props.disabled}
       loading={props.loading}
       suggestions={props.suggestions}
+      attachments={attachments()}
       onValueChange={handleChange}
       onSubmit={handleSubmit}
       onSuggestionClick={handleSuggestionClick}
+      onAttachmentsChange={setAttachments}
     />
   );
 });