@frankieai/react 0.1.0 → 0.1.1

package/src/components/chat/Composer.tsx

@@ -1,24 +1,53 @@
 "use client";
 
-import { ArrowUp, Square } from "lucide-react";
+import { ArrowUp, Paperclip, Square, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type KeyboardEvent } from "react";
+import type { ChatAttachment } from "@frankieai/core";
 import { Button } from "../ui/button.js";
 import { Textarea } from "../ui/textarea.js";
 
+export interface ComposerAttachmentsConfig {
+  enabled: boolean;
+  /** Accepted MIME patterns, e.g. "image/*". */
+  accept: string[];
+  maxCount: number;
+  maxMb: number;
+}
+
+export interface ComposerModelPicker {
+  models: { id: string; label: string }[];
+  value?: string;
+  onChange: (id: string) => void;
+}
+
 export interface ComposerProps {
-  onSend: (text: string) => void;
+  onSend: (text: string, opts?: { attachments?: ChatAttachment[]; model?: string }) => void;
   onStop: () => void;
   busy: boolean;
   placeholder?: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  /** Enables the attach button when provided and `enabled`. */
+  attachments?: ComposerAttachmentsConfig;
+  /** Enables a model dropdown when provided with at least one model. */
+  modelPicker?: ComposerModelPicker;
+}
+
+interface PickedFile extends ChatAttachment {
+  id: string;
 }
 
 const MAX_ROWS_PX = 140;
 
-export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus }: ComposerProps) {
+export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, attachments, modelPicker }: ComposerProps) {
   const [value, setValue] = useState("");
+  const [files, setFiles] = useState<PickedFile[]>([]);
+  const [fileError, setFileError] = useState<string | undefined>(undefined);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const canAttach = Boolean(attachments?.enabled);
+  const models = modelPicker?.models ?? [];
 
   // Grow with the content up to a cap, then scroll.
   useEffect(() => {
@@ -28,12 +57,54 @@ export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocu
     node.style.height = `${Math.min(node.scrollHeight, MAX_ROWS_PX)}px`;
   }, [value]);
 
+  const addFiles = useCallback(
+    async (list: FileList | null) => {
+      if (!list || !attachments) return;
+      setFileError(undefined);
+      const room = attachments.maxCount - files.length;
+      const chosen = Array.from(list).slice(0, Math.max(0, room));
+      if (Array.from(list).length > room) setFileError(`You can attach up to ${attachments.maxCount} file(s).`);
+
+      const next: PickedFile[] = [];
+      for (const file of chosen) {
+        if (!mimeAccepted(file.type || "application/octet-stream", attachments.accept)) {
+          setFileError(`Files of type ${file.type || "unknown"} aren't allowed.`);
+          continue;
+        }
+        if (file.size > attachments.maxMb * 1024 * 1024) {
+          setFileError(`Each file must be under ${attachments.maxMb} MB.`);
+          continue;
+        }
+        try {
+          next.push({
+            id: `${file.name}-${file.size}-${Math.random().toString(36).slice(2, 7)}`,
+            name: file.name,
+            mimeType: file.type || "application/octet-stream",
+            data: await readAsBase64(file),
+          });
+        } catch {
+          setFileError("Couldn't read that file.");
+        }
+      }
+      if (next.length) setFiles((current) => [...current, ...next]);
+    },
+    [attachments, files.length],
+  );
+
+  const removeFile = (id: string) => setFiles((current) => current.filter((file) => file.id !== id));
+
   const submit = useCallback(() => {
     const text = value.trim();
-    if (!text || busy || disabled) return;
+    if ((!text && files.length === 0) || busy || disabled) return;
     setValue("");
-    onSend(text);
-  }, [busy, disabled, onSend, value]);
+    const attached = files.map(({ name, mimeType, data }) => ({ name, mimeType, data }));
+    setFiles([]);
+    setFileError(undefined);
+    onSend(text, {
+      ...(attached.length ? { attachments: attached } : {}),
+      ...(modelPicker?.value ? { model: modelPicker.value } : {}),
+    });
+  }, [busy, disabled, files, modelPicker?.value, onSend, value]);
 
   const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.key === "Enter" && !event.shiftKey) {
@@ -42,34 +113,126 @@ export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocu
     }
   };
 
+  const nothingToSend = value.trim().length === 0 && files.length === 0;
+
   return (
     <form
-      className="flex items-end gap-2"
+      className="flex flex-col gap-2"
       onSubmit={(event) => {
         event.preventDefault();
         submit();
       }}
     >
-      <Textarea
-        ref={textareaRef}
-        rows={1}
-        value={value}
-        disabled={disabled}
-        autoFocus={autoFocus}
-        onChange={(event) => setValue(event.target.value)}
-        onKeyDown={onKeyDown}
-        placeholder={placeholder ?? "Ask anything…"}
-        aria-label="Message"
-      />
-      {busy ? (
-        <Button type="button" size="icon" variant="outline" onClick={onStop} aria-label="Stop">
-          <Square />
-        </Button>
-      ) : (
-        <Button type="submit" size="icon" disabled={disabled || value.trim().length === 0} aria-label="Send">
-          <ArrowUp />
-        </Button>
-      )}
+      {files.length > 0 ? (
+        <div className="flex flex-wrap gap-2">
+          {files.map((file) => (
+            <span
+              key={file.id}
+              className="inline-flex max-w-[14rem] items-center gap-1.5 rounded-[var(--frankie-radius)] border border-border bg-muted px-2 py-1 text-xs"
+            >
+              <Paperclip className="size-3 shrink-0 opacity-70" />
+              <span className="truncate">{file.name}</span>
+              <button
+                type="button"
+                onClick={() => removeFile(file.id)}
+                aria-label={`Remove ${file.name}`}
+                className="frankie-focus shrink-0 opacity-60 hover:opacity-100"
+              >
+                <X className="size-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      ) : null}
+
+      {fileError ? <p className="text-xs text-red-600 dark:text-red-400">{fileError}</p> : null}
+
+      <div className="flex items-end gap-2">
+        {canAttach ? (
+          <>
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              hidden
+              accept={attachments?.accept.join(",")}
+              onChange={(event) => {
+                void addFiles(event.target.files);
+                event.target.value = "";
+              }}
+            />
+            <Button
+              type="button"
+              size="icon"
+              variant="outline"
+              disabled={disabled || files.length >= (attachments?.maxCount ?? 0)}
+              onClick={() => fileInputRef.current?.click()}
+              aria-label="Attach files"
+              title="Attach files"
+            >
+              <Paperclip />
+            </Button>
+          </>
+        ) : null}
+
+        <Textarea
+          ref={textareaRef}
+          rows={1}
+          value={value}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          onChange={(event) => setValue(event.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder={placeholder ?? "Ask anything…"}
+          aria-label="Message"
+        />
+
+        {models.length > 0 ? (
+          <select
+            value={modelPicker?.value ?? models[0]?.id}
+            onChange={(event) => modelPicker?.onChange(event.target.value)}
+            disabled={disabled}
+            aria-label="Model"
+            className="frankie-focus h-9 max-w-[8rem] rounded-[var(--frankie-radius)] border border-border bg-background px-2 text-sm"
+          >
+            {models.map((model) => (
+              <option key={model.id} value={model.id}>
+                {model.label}
+              </option>
+            ))}
+          </select>
+        ) : null}
+
+        {busy ? (
+          <Button type="button" size="icon" variant="outline" onClick={onStop} aria-label="Stop">
+            <Square />
+          </Button>
+        ) : (
+          <Button type="submit" size="icon" disabled={disabled || nothingToSend} aria-label="Send">
+            <ArrowUp />
+          </Button>
+        )}
+      </div>
     </form>
   );
 }
+
+function mimeAccepted(mimeType: string, accept: string[]): boolean {
+  return accept.some((pattern) =>
+    pattern.endsWith("/*") ? mimeType.startsWith(pattern.slice(0, -1)) : pattern === mimeType,
+  );
+}
+
+/** Read a File to a base64 string (no data-URL prefix), for the wire protocol. */
+function readAsBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = String(reader.result);
+      const comma = result.indexOf(",");
+      resolve(comma >= 0 ? result.slice(comma + 1) : result);
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}

package/src/components/chat/MessageBubble.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Paperclip } from "lucide-react";
 import type { ReactNode } from "react";
 import { cn } from "../../lib/utils.js";
 import type { ChatMessage, ToolActivity } from "../../lib/messages.js";
@@ -24,10 +25,25 @@ export function MessageBubble({
 }: MessageBubbleProps) {
   if (message.role === "user") {
     return (
-      <div className="flex justify-end">
-        <div className="max-w-[85%] rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground">
-          {message.text}
-        </div>
+      <div className="flex flex-col items-end gap-1">
+        {message.attachments?.length ? (
+          <div className="flex max-w-[85%] flex-wrap justify-end gap-1">
+            {message.attachments.map((file, index) => (
+              <span
+                key={`${file.name}-${index}`}
+                className="inline-flex max-w-[12rem] items-center gap-1 rounded-[var(--frankie-radius)] border border-border bg-muted px-2 py-1 text-xs"
+              >
+                <Paperclip className="size-3 shrink-0 opacity-70" />
+                <span className="truncate">{file.name}</span>
+              </span>
+            ))}
+          </div>
+        ) : null}
+        {message.text ? (
+          <div className="max-w-[85%] rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground">
+            {message.text}
+          </div>
+        ) : null}
       </div>
     );
   }

package/src/hooks/useFrankieChat.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import type { ChatAttachment } from "@frankieai/core";
 import { FrankieApiError } from "../lib/client.js";
 import {
   applyEvent,
@@ -11,13 +12,19 @@ import {
 } from "../lib/messages.js";
 import { useFrankie } from "./FrankieProvider.jsx";
 
+/** Extra inputs a turn can carry: attached files and a chosen model. */
+export interface SendOptions {
+  attachments?: ChatAttachment[];
+  model?: string;
+}
+
 export interface UseFrankieChatResult {
   messages: ChatMessage[];
   /** True from the moment a message is sent until the turn ends. */
   busy: boolean;
   /** Set when the turn failed outright (network, auth, rate limit). */
   error?: string;
-  send: (text: string) => Promise<void>;
+  send: (text: string, opts?: SendOptions) => Promise<void>;
   /** Abort the in-flight turn. The partial answer stays in the transcript. */
   stop: () => void;
   /** Clear the transcript and start a brand-new server session. */
@@ -79,16 +86,23 @@ export function useFrankieChat(): UseFrankieChatResult {
   }, []);
 
   const send = useCallback(
-    async (text: string) => {
+    async (text: string, opts?: SendOptions) => {
       const trimmed = text.trim();
-      if (!trimmed || busy) return;
+      const attachments = opts?.attachments ?? [];
+      if ((!trimmed && attachments.length === 0) || busy) return;
+      // The server needs a message; an attachment-only turn gets a stand-in.
+      const outgoing = trimmed || "Please take a look at the attached file(s).";
 
       const assistantId = nextId("a");
       setError(undefined);
       setBusy(true);
       setMessages((current) => [
         ...current,
-        newUserMessage(nextId("u"), trimmed),
+        newUserMessage(
+          nextId("u"),
+          trimmed,
+          attachments.map((file) => ({ name: file.name, mimeType: file.mimeType })),
+        ),
         newAssistantMessage(assistantId),
       ]);
 
@@ -96,10 +110,19 @@ export function useFrankieChat(): UseFrankieChatResult {
       abortRef.current = abort;
 
       try {
-        await client.send({ message: trimmed, ...(context ? { context } : {}), signal: abort.signal }, (event) => {
-          if (event.type === "ping" || event.type === "session") return;
-          patchAssistant(assistantId, (message) => applyEvent(message, event));
-        });
+        await client.send(
+          {
+            message: outgoing,
+            ...(context ? { context } : {}),
+            ...(opts?.model ? { model: opts.model } : {}),
+            ...(attachments.length ? { attachments } : {}),
+            signal: abort.signal,
+          },
+          (event) => {
+            if (event.type === "ping" || event.type === "session") return;
+            patchAssistant(assistantId, (message) => applyEvent(message, event));
+          },
+        );
       } catch (caught) {
         if (abort.signal.aborted) {
           patchAssistant(assistantId, (message) => ({

package/src/index.ts

@@ -1,7 +1,7 @@
 export { FrankieProvider, useFrankie, useFrankieTheme } from "./hooks/FrankieProvider.jsx";
 export type { FrankieProviderProps } from "./hooks/FrankieProvider.jsx";
 export { useFrankieChat } from "./hooks/useFrankieChat.js";
-export type { UseFrankieChatResult } from "./hooks/useFrankieChat.js";
+export type { UseFrankieChatResult, SendOptions } from "./hooks/useFrankieChat.js";
 
 export { FrankieWidget } from "./components/chat/FrankieWidget.js";
 export type { FrankieWidgetProps } from "./components/chat/FrankieWidget.js";
@@ -27,7 +27,7 @@ export { Textarea } from "./components/ui/textarea.js";
 export { FrankieClient, FrankieApiError, readEventStream, FRANKIE_CLOUD_URL } from "./lib/client.js";
 export type { FrankieClientOptions, PageContext } from "./lib/client.js";
 export { applyEvent, newAssistantMessage, newUserMessage } from "./lib/messages.js";
-export type { AssistantChatMessage, ChatMessage, ToolActivity, UserChatMessage } from "./lib/messages.js";
+export type { AssistantChatMessage, ChatMessage, MessageAttachment, ToolActivity, UserChatMessage } from "./lib/messages.js";
 export { resolveMode, themeToCssVars } from "./lib/theme.js";
 export { cn } from "./lib/utils.js";
 

package/src/lib/client.ts

@@ -1,4 +1,5 @@
 import type {
+  ChatAttachment,
   ChatRequestBody,
   CreateSessionResponse,
   FrankieServerEvent,
@@ -126,7 +127,15 @@ export class FrankieClient {
    * Resolves when the turn ends.
    */
   async send(
-    input: { message: string; context?: PageContext; signal?: AbortSignal },
+    input: {
+      message: string;
+      context?: PageContext;
+      /** Model id chosen by the user, honoured only if the workspace allows it. */
+      model?: string;
+      /** Files attached to this turn. */
+      attachments?: ChatAttachment[];
+      signal?: AbortSignal;
+    },
     onEvent: (event: FrankieServerEvent) => void,
   ): Promise<void> {
     const session = await this.ensureSession(input.context);
@@ -134,6 +143,8 @@ export class FrankieClient {
       sessionId: session.sessionId,
       message: input.message,
       ...(input.context ? { context: input.context } : {}),
+      ...(input.model ? { model: input.model } : {}),
+      ...(input.attachments?.length ? { attachments: input.attachments } : {}),
     };
 
     const response = await this.doFetch(`${this.baseUrl}/v1/chat`, {

package/src/lib/messages.ts

@@ -8,10 +8,17 @@ export interface ToolActivity {
   detail?: string;
 }
 
+/** A file shown on a user message (name/type only — the bytes aren't kept in the transcript). */
+export interface MessageAttachment {
+  name: string;
+  mimeType: string;
+}
+
 export interface UserChatMessage {
   id: string;
   role: "user";
   text: string;
+  attachments?: MessageAttachment[];
   createdAt: number;
 }
 
@@ -116,6 +123,6 @@ export function newAssistantMessage(id: string): AssistantChatMessage {
   return { id, role: "assistant", text: "", thinking: "", tools: [], status: "streaming", createdAt: Date.now() };
 }
 
-export function newUserMessage(id: string, text: string): UserChatMessage {
-  return { id, role: "user", text, createdAt: Date.now() };
+export function newUserMessage(id: string, text: string, attachments?: MessageAttachment[]): UserChatMessage {
+  return { id, role: "user", text, ...(attachments?.length ? { attachments } : {}), createdAt: Date.now() };
 }

package/src/widget.test.tsx

@@ -16,6 +16,10 @@ const config: PublicWidgetConfig = {
   theme: { mode: "light" },
   allowAnonymous: true,
   showToolActivity: true,
+  features: {
+    attachments: { enabled: false, accept: ["image/*"], maxMb: 10, maxCount: 4 },
+    modelPicker: { enabled: false, models: [] },
+  },
 };
 
 function sseStream(events: FrankieServerEvent[]): ReadableStream<Uint8Array> {