@lettuceai/crisp 1.0.0 → 1.1.0

package/README.md

@@ -105,6 +105,28 @@ The provider exposes six presets through `presets`: Midnight, Ink, Vellum, Paper
 
 Text, fill, border, and elevated surface colors are derived from the theme palette. For custom integrations, `themeToVars()` returns the CSS variables and `applyTheme()` applies a theme to an HTML element. The [theme definitions](src/theme/theme.ts) document the available values.
 
+## Translating crisp
+
+Every string crisp renders on its own (aria-labels, default prop text, status lines) lives in one typed object, `CrispStrings`. Wrap the app in `CrispStringsProvider` and pass only the strings you translate; the rest stay English. Entries that need values are functions.
+
+```tsx
+import { CrispStringsProvider } from "@lettuceai/crisp";
+
+<CrispStringsProvider
+  locale="de"
+  strings={{
+    alertDismiss: "Schließen",
+    paginationPage: (page) => `Seite ${page}`,
+  }}
+>
+  <App />
+</CrispStringsProvider>
+```
+
+`locale` is a BCP 47 tag. It drives every `Intl` call, including `DatePicker`, and the format helpers. Props that already take text (`placeholder`, `backLabel`, `emptyMessage`, …) still win over the provider. Without a provider everything is English and `"en"`. `englishStrings` lists every key, and `useCrispStrings()` returns the active `{ strings, locale }` for your own components.
+
+`relativeTime()`, `compactNumber()` and `fileSize()` take an optional trailing `locale`. English keeps its compact house style ("4 min ago", "1.2k", "1.5 MB"); other locales use `Intl.RelativeTimeFormat` and `Intl.NumberFormat`, so they need no extra strings.
+
 ## Utilities
 
 - `cn()` merges conditional class names and resolves Tailwind class conflicts.

package/dist/components/Citation.d.ts

@@ -0,0 +1,23 @@
+export interface CitationProps {
+    /** Numeric position or brief source tag: 1, 2, "arXiv", "docs". */
+    index: number | string;
+    /** Full document title or webpage header. */
+    title: string;
+    /** Direct URL to the source. */
+    url?: string;
+    /** Key excerpt or snippet used for model grounding. */
+    snippet?: string;
+    /** Domain name (e.g. "wikipedia.org") or publisher. */
+    domain?: string;
+    /** Optional custom icon or favicon URL. */
+    favicon?: string;
+    className?: string;
+}
+/**
+ * An inline citation for retrieved context and RAG sources.
+ * Reveals a hover card on desktop and opens a bottom sheet on mobile.
+ */
+export declare function Citation({ index, title, url, snippet, domain, favicon, className }: CitationProps): import("react").JSX.Element;
+export declare namespace Citation {
+    var displayName: string;
+}

package/dist/components/DatePicker.d.ts

@@ -9,7 +9,7 @@ export interface CalendarProps {
     className?: string;
 }
 /** The month grid. Uses Intl for day and month names, so it follows the app's 20 locales. */
-export declare function Calendar({ value, onChange, min, max, weekStartsOn, locale, className }: CalendarProps): import("react").JSX.Element;
+export declare function Calendar({ value, onChange, min, max, weekStartsOn, locale: localeProp, className }: CalendarProps): import("react").JSX.Element;
 export interface DatePickerProps extends Omit<CalendarProps, "className"> {
     /** Shown when nothing is chosen. */
     placeholder?: string;

package/dist/components/Diff.d.ts

@@ -1,3 +1,12 @@
+export type Op = "same" | "add" | "remove";
+export interface Line {
+    op: Op;
+    text: string;
+    a?: number;
+    b?: number;
+}
+/** Longest common subsequence, line-wise. Enough for settings and character fields. */
+export declare function diffLines(before: string, after: string): Line[];
 export interface DiffProps {
     before: string;
     after: string;

package/dist/components/EmptyState.d.ts

@@ -21,4 +21,4 @@ export interface ErrorStateProps {
     className?: string;
 }
 /** Something failed to load. Says what, and offers the one thing that might fix it. */
-export declare function ErrorState({ title, description, onRetry, retryLabel, size, className }: ErrorStateProps): import("react").JSX.Element;
+export declare function ErrorState({ title: titleProp, description, onRetry, retryLabel, size, className }: ErrorStateProps): import("react").JSX.Element;

package/dist/components/FeedbackAction.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export type FeedbackSentiment = "like" | "dislike" | null;
+export interface FeedbackActionProps {
+    /** Active feedback state. */
+    sentiment?: FeedbackSentiment;
+    /** Triggered when the like/thumbs-up button is tapped. */
+    onLike?: () => void;
+    /** Triggered when the dislike/thumbs-down button is tapped. */
+    onDislike?: () => void;
+    /** Custom handler for copying message text. */
+    onCopy?: () => void;
+    /** Text to copy to clipboard if onCopy is not provided. */
+    copyText?: string;
+    /** Triggered when asking the model to regenerate the response. */
+    onRetry?: () => void;
+    /** Additional action items to display inline (e.g. share or edit). */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * An action bar for AI responses: like, dislike, copy, and regenerate.
+ * Placed at the bottom of messages to collect evaluation feedback.
+ */
+export declare function FeedbackAction({ sentiment, onLike, onDislike, onCopy, copyText, onRetry, children, className, }: FeedbackActionProps): import("react").JSX.Element;
+export declare namespace FeedbackAction {
+    var displayName: string;
+}

package/dist/components/OtpInput.d.ts

@@ -0,0 +1,23 @@
+export interface OtpInputProps {
+    /** Total number of PIN digits/cells. Default 6. */
+    length?: number;
+    /** Current combined string value. */
+    value: string;
+    /** Callback fired whenever the value changes. */
+    onChange: (value: string) => void;
+    /** Callback fired when all digits have been entered. */
+    onComplete?: (value: string) => void;
+    /** Numeric (digits only) or alphanumeric. Default "number". */
+    type?: "number" | "text";
+    /** Mask characters like password dots. */
+    mask?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    className?: string;
+    id?: string;
+}
+/**
+ * Segmented PIN / OTP verification code input.
+ * Supports auto-advancing focus, backspace navigation, and multi-digit paste splitting.
+ */
+export declare const OtpInput: import("react").ForwardRefExoticComponent<OtpInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/PromptSuggestions.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+export interface PromptSuggestionItem {
+    id: string;
+    /** Short headline shown prominently, e.g. "Summarize PDF", "Draft reply". */
+    title: string;
+    /** Complete prompt string passed to composer/model. */
+    prompt: string;
+    /** Supporting subtitle or description. */
+    description?: string;
+    /** Icon shown at top-left. */
+    icon?: ReactNode;
+    /** Category badge, e.g. "Creative", "Code", "Analysis". */
+    badge?: string;
+}
+export interface PromptSuggestionsProps {
+    prompts: readonly PromptSuggestionItem[];
+    onSelect: (prompt: string, item: PromptSuggestionItem) => void;
+    title?: ReactNode;
+    columns?: 1 | 2 | 3 | 4;
+    className?: string;
+}
+/**
+ * Suggested prompt starter cards for empty chat states and onboarding.
+ * Helps users discover model capabilities without staring at an empty input.
+ */
+export declare function PromptSuggestions({ prompts, onSelect, title, columns, className, }: PromptSuggestionsProps): import("react").JSX.Element;
+export declare namespace PromptSuggestions {
+    var displayName: string;
+}

package/dist/components/index.d.ts

@@ -101,3 +101,7 @@ export * from "./ReorderableList";
 export * from "./AvatarPicker";
 export * from "./Page";
 export * from "./ModelSelect";
+export * from "./Citation";
+export * from "./FeedbackAction";
+export * from "./PromptSuggestions";
+export * from "./OtpInput";

package/dist/index.d.ts

@@ -13,3 +13,6 @@ export { tintFromName } from "./lib/tint";
 export { hexToRgb, normaliseHex, luminance, contrastRatio, isLight, readableOn, mixHex } from "./lib/color";
 export type { PolymorphicProps, PolymorphicRef, PolymorphicComponent } from "./lib/polymorphic";
 export { relativeTime, compactNumber, fileSize } from "./lib/format";
+export { mergeRefs, getElementRef } from "./lib/ref";
+export { englishStrings, CrispStringsProvider, useCrispStrings } from "./lib/strings";
+export type { CrispStrings, CrispStringsProviderProps } from "./lib/strings";