@astratra/native-ui 0.2.0 → 1.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Astratra
+Copyright (c) 2026 Astratra contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -488,6 +488,46 @@ Aucun texte, aucune icône, aucun chargement en dur : tout vient des props.
 
 ---
 
+# Les retours
+
+## FeedbackBar : 👍 / 👎 sous une réponse
+
+Deux boutons en verre discrets sous la réponse d'une IA. Le pouce haut part
+tout de suite ; le pouce bas ouvre une feuille (raison, commentaire facultatif)
+avant d'envoyer ; appuyer de nouveau sur le pouce choisi le retire. Le composant
+est **contrôlé** : l'application garde `value` et parle à son serveur (par
+exemple `createFeedbackRouter` de `@astratra/agent`).
+
+```js
+import { FeedbackBar } from '@astratra/native-ui';
+
+<FeedbackBar
+  value={feedback?.rating ?? null}
+  onSubmit={(payload) => api.giveFeedback(runId, payload)} // { rating, reason?, comment? }
+  onRemove={() => api.removeFeedback(runId)}
+  locale="fr"
+  labels={{ sheetTitle: 'Dites-nous pourquoi' }}
+/>
+```
+
+- **Textes** : aucun en dur qui ne se surcharge pas. `locale` choisit les
+  libellés par défaut (anglais, ou français pour `fr…`), `labels` remplace
+  chacun (`up`, `down`, `group`, `sheetTitle`, `commentLabel`,
+  `commentPlaceholder`, `submit`, `cancel`, `reasons`, `counter`). Une raison
+  ajoutée par l'application (`reasons={['slow']}`) a son libellé dans
+  `labels.reasons`.
+- **Accessibilité** : une barre `toolbar` nommée, deux `button` avec libellé et
+  état `selected`/`disabled`, puces `radio`, feuille modale.
+- **Haptique** : `expo-haptics` (pair facultatif) donne un léger tic ; `haptics={false}`
+  le coupe, `haptics={() => …}` le remplace. Sans le module, la barre est muette.
+- **Style** : `accent`, `size`, `scheme`, `pageBackground`, `ink`, `icons`
+  (nœuds à la place des émojis).
+- **Règles pures** (entrée `@astratra/native-ui/logic`, testées en Node) :
+  `FEEDBACK_REASONS`, `FEEDBACK_LABELS`, `resolveFeedbackLabels`,
+  `feedbackPress`, `buildFeedbackPayload` (raison seulement avec `down` et si
+  listée, commentaire rogné et coupé), `clampComment`, `feedbackButtonState`,
+  `feedbackReasonOptions`.
+
 # Tests
 
 ```sh

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astratra/native-ui",
-  "version": "0.2.0",
-  "description": "Mobile UI kit for React Native / Expo: Apple's Liquid Glass on iOS and a calibrated visible surface on Android, glass buttons, pale cards, bars that fold on scroll, an Instagram-style tab bar, a collapsible header, a Markdown renderer for AI answers, and pictures: natural-ratio images revealed gently, a shimmer placeholder, and a full-screen viewer with pinch, double-tap and pull-to-close. Pure rules exported separately and tested in plain Node.",
+  "version": "1.1.0",
+  "description": "Mobile UI kit for React Native / Expo: Apple's Liquid Glass on iOS and a calibrated visible surface on Android, glass buttons, pale cards, bars that fold on scroll, an Instagram-style tab bar, a collapsible header, a Markdown renderer for AI answers, pictures (natural-ratio images revealed gently, a shimmer placeholder, a full-screen viewer with pinch, double-tap and pull-to-close), and a thumbs up/down feedback bar for AI answers. Pure rules exported separately and tested in plain Node.",
   "engines": {
     "node": ">=20"
   },
@@ -47,16 +47,22 @@
     "access": "public"
   },
   "dependencies": {
-    "@astratra/native": "^0.3.0"
+    "@astratra/native": "^1.0.0"
   },
   "peerDependencies": {
     "expo-blur": ">=14",
     "expo-glass-effect": ">=0.1",
+    "expo-haptics": ">=14",
     "expo-linear-gradient": ">=14",
     "react": ">=18",
     "react-native": ">=0.76",
     "react-native-reanimated": ">=3.16"
   },
+  "peerDependenciesMeta": {
+    "expo-haptics": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
     "jest": "30.4.2",

package/src/components/FeedbackBar.js

@@ -0,0 +1,183 @@
+/**
+ * Thumbs up / thumbs down under an AI answer.
+ *
+ * Two discreet glass buttons. Up is sent at once; down opens a sheet for the
+ * reason and an optional comment. Pressing the chosen thumb again withdraws
+ * it. The bar is controlled: the app keeps `value` and talks to its server in
+ * `onSubmit` / `onRemove` (see `createFeedbackRouter` in @astratra/agent).
+ *
+ * Words come from the app (`labels`, `locale`); the haptic tick is optional
+ * (expo-haptics when installed, or the function the app passes).
+ */
+const { React, h, RN, useScheme } = require('./runtime');
+const { GlassButton } = require('./GlassButton');
+const { usePaleCardColors } = require('./PaleCard');
+const {
+  FEEDBACK_REASONS,
+  FEEDBACK_COMMENT_MAX,
+  resolveFeedbackLabels,
+  feedbackPress,
+  buildFeedbackPayload,
+  feedbackButtonState,
+  feedbackReasonOptions
+} = require('../logic/feedbackBar');
+
+const DEFAULT_ACCENT = '#3b6cf0';
+
+/* expo-haptics is an optional peer: absent, the bar is silent. */
+let cachedHaptics;
+function loadHaptics() {
+  if (cachedHaptics !== undefined) return cachedHaptics;
+  try {
+    const mod = require('expo-haptics');
+    cachedHaptics = mod && (mod.default || mod);
+  } catch (_error) {
+    cachedHaptics = null;
+  }
+  return cachedHaptics;
+}
+
+function tick(haptics) {
+  if (haptics === false) return;
+  try {
+    if (typeof haptics === 'function') return void haptics();
+    const lib = loadHaptics();
+    if (lib && typeof lib.selectionAsync === 'function') Promise.resolve(lib.selectionAsync()).catch(() => {});
+  } catch (_error) {
+    /* A missing tick never blocks a rating. */
+  }
+}
+
+function FeedbackBar({
+  value = null,
+  onSubmit,
+  onRemove,
+  disabled = false,
+  reasons = FEEDBACK_REASONS,
+  maxComment = FEEDBACK_COMMENT_MAX,
+  labels,
+  locale,
+  icons,
+  haptics,
+  accent = DEFAULT_ACCENT,
+  size = 34,
+  scheme: schemeOverride,
+  pageBackground,
+  ink,
+  style,
+  testID
+}) {
+  const scheme = useScheme(schemeOverride);
+  const words = resolveFeedbackLabels({ locale, labels });
+  const [asking, setAsking] = React.useState(false);
+  const [reason, setReason] = React.useState(null);
+  const [comment, setComment] = React.useState('');
+  const card = usePaleCardColors({ tint: accent, pageBackground, ink, scheme });
+  const textColor = ink || (scheme === 'dark' ? '#ffffff' : '#0d1235');
+
+  const close = () => {
+    setAsking(false);
+    setReason(null);
+    setComment('');
+  };
+  const press = (rating) => {
+    if (disabled) return;
+    tick(haptics);
+    const action = feedbackPress(value, rating);
+    if (action.type === 'remove') {
+      if (onRemove) onRemove();
+    } else if (action.type === 'ask') {
+      setAsking(true);
+    } else if (action.type === 'submit' && onSubmit) {
+      onSubmit(action.payload);
+    }
+  };
+  const send = () => {
+    tick(haptics);
+    const payload = buildFeedbackPayload({ rating: 'down', reason, comment, reasons, maxComment });
+    close();
+    if (onSubmit) onSubmit(payload);
+  };
+
+  const thumb = (rating, glyph) => {
+    const state = feedbackButtonState({ value, rating, labels: words, disabled });
+    return h(
+      GlassButton,
+      {
+        key: rating,
+        size,
+        scheme,
+        disabled,
+        selected: state.selected,
+        tint: state.selected ? accent : undefined,
+        accessibilityLabel: state.accessibilityLabel,
+        testID: testID ? `${testID}-${rating}` : undefined,
+        onPress: () => press(rating)
+      },
+      icons && icons[rating] ? icons[rating] : h(RN.Text, { style: { fontSize: Math.round(size * 0.46) } }, glyph)
+    );
+  };
+
+  const chip = (option) =>
+    h(
+      RN.Pressable,
+      {
+        key: option.id,
+        testID: testID ? `${testID}-reason-${option.id}` : undefined,
+        accessibilityRole: 'radio',
+        accessibilityLabel: option.label,
+        accessibilityState: { selected: option.selected },
+        onPress: () => setReason(option.selected ? null : option.id),
+        style: {
+          paddingHorizontal: 12,
+          paddingVertical: 8,
+          borderRadius: 16,
+          backgroundColor: option.selected ? accent : card.fill
+        }
+      },
+      h(RN.Text, { style: { color: option.selected ? '#ffffff' : textColor, fontSize: 14 } }, option.label)
+    );
+
+  return h(
+    RN.View,
+    { testID, accessibilityRole: 'toolbar', accessibilityLabel: words.group, style: [{ flexDirection: 'row', alignItems: 'center', gap: 8 }, style] },
+    thumb('up', '\u{1F44D}'),
+    thumb('down', '\u{1F44E}'),
+    h(
+      RN.Modal,
+      { visible: asking, transparent: true, animationType: 'slide', onRequestClose: close },
+      h(
+        RN.View,
+        { style: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.35)' } },
+        h(
+          RN.View,
+          {
+            accessibilityViewIsModal: true,
+            style: { padding: 20, gap: 14, borderTopLeftRadius: 24, borderTopRightRadius: 24, backgroundColor: pageBackground || (scheme === 'dark' ? '#1c1c1e' : '#ffffff') }
+          },
+          h(RN.Text, { accessibilityRole: 'header', style: { color: textColor, fontSize: 17, fontWeight: '600' } }, words.sheetTitle),
+          h(RN.View, { accessibilityRole: 'radiogroup', style: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 } }, feedbackReasonOptions({ reasons, labels: words, selected: reason }).map(chip)),
+          h(RN.TextInput, {
+            testID: testID ? `${testID}-comment` : undefined,
+            accessibilityLabel: words.commentLabel,
+            placeholder: words.commentPlaceholder,
+            value: comment,
+            maxLength: maxComment,
+            multiline: true,
+            onChangeText: (text) => setComment(text),
+            style: { minHeight: 72, padding: 12, borderRadius: 14, color: textColor, backgroundColor: card.fill, textAlignVertical: 'top' }
+          }),
+          h(RN.Text, { style: { color: textColor, opacity: 0.55, fontSize: 12, textAlign: 'right' } }, words.counter(Array.from(comment).length, maxComment)),
+          h(
+            RN.View,
+            { style: { flexDirection: 'row', justifyContent: 'flex-end', gap: 12 } },
+            h(RN.Pressable, { testID: testID ? `${testID}-cancel` : undefined, accessibilityRole: 'button', accessibilityLabel: words.cancel, onPress: close, style: { paddingHorizontal: 16, paddingVertical: 10 } }, h(RN.Text, { style: { color: textColor } }, words.cancel)),
+            h(RN.Pressable, { testID: testID ? `${testID}-send` : undefined, accessibilityRole: 'button', accessibilityLabel: words.submit, onPress: send, style: { paddingHorizontal: 18, paddingVertical: 10, borderRadius: 20, backgroundColor: accent } }, h(RN.Text, { style: { color: '#ffffff', fontWeight: '600' } }, words.submit))
+          )
+        )
+      )
+    )
+  );
+}
+
+module.exports = { FeedbackBar };

package/src/index.d.ts

@@ -7,7 +7,7 @@
  * through untouched.
  */
 import type { ComponentType, ReactElement, ReactNode } from 'react';
-import type { ColorScheme, GlassMode, PictureSize } from './logic';
+import type { ColorScheme, FeedbackLabels, FeedbackPayload, FeedbackRating, GlassMode, PictureSize } from './logic';
 
 export * from './logic';
 
@@ -343,3 +343,31 @@ export interface ImageViewerProps<P extends ViewerPicture = ViewerPicture> {
   testID?: string;
 }
 export function ImageViewer<P extends ViewerPicture>(props: ImageViewerProps<P>): ReactElement;
+
+export interface FeedbackBarProps {
+  /** The person's current choice; the bar is controlled. */
+  value?: FeedbackRating | null;
+  /** A rating to send: `{ rating: 'up' }`, or `{ rating: 'down', reason?, comment? }`. */
+  onSubmit?: (payload: FeedbackPayload) => void;
+  /** The chosen thumb was pressed again: withdraw the feedback. */
+  onRemove?: () => void;
+  disabled?: boolean;
+  /** Reason ids offered on the sheet. Default: FEEDBACK_REASONS. */
+  reasons?: readonly string[];
+  maxComment?: number;
+  /** Overrides of the default words. */
+  labels?: Partial<FeedbackLabels>;
+  /** 'fr…' picks the French defaults, anything else English. */
+  locale?: string;
+  icons?: { up?: ReactNode; down?: ReactNode };
+  /** false: silent. A function: your own tick. Default: expo-haptics when installed. */
+  haptics?: false | (() => void);
+  accent?: string;
+  size?: number;
+  scheme?: ColorScheme;
+  pageBackground?: string;
+  ink?: string;
+  style?: NativeStyle;
+  testID?: string;
+}
+export function FeedbackBar(props: FeedbackBarProps): ReactElement;

package/src/index.js

@@ -19,5 +19,6 @@ module.exports = {
   ...require('./components/ImageShimmer'),
   ...require('./components/AutoRatioImage'),
   ...require('./components/ImageViewer'),
+  ...require('./components/FeedbackBar'),
   getGlassMode: require('./components/runtime').getGlassMode
 };

package/src/logic/feedbackBar.js

@@ -0,0 +1,141 @@
+/**
+ * The rules of the feedback bar (thumbs up / down on an AI answer), dry:
+ * what a press does, what is sent, what the screen reader says, which words
+ * appear. No react-native here — importable and testable from plain Node.
+ *
+ * The words are the app's. The defaults (English, French) only keep the bar
+ * usable out of the box; every label can be overridden.
+ */
+
+/** The reasons the server accepts by default, in the order the sheet lists them. */
+const FEEDBACK_REASONS = Object.freeze(['inaccurate', 'incomplete', 'off_topic', 'wrong_source', 'too_long', 'unsafe', 'other']);
+
+/** Default comment limit; the server's own limit is the one that counts. */
+const FEEDBACK_COMMENT_MAX = 500;
+
+const FEEDBACK_LABELS = Object.freeze({
+  en: Object.freeze({
+    group: 'Rate this answer',
+    up: 'Good answer',
+    down: 'Bad answer',
+    sheetTitle: 'What went wrong?',
+    commentLabel: 'Comment (optional)',
+    commentPlaceholder: 'Tell us more (optional)',
+    submit: 'Send',
+    cancel: 'Cancel',
+    reasons: Object.freeze({
+      inaccurate: 'Inaccurate',
+      incomplete: 'Incomplete',
+      off_topic: 'Off topic',
+      wrong_source: 'Wrong source',
+      too_long: 'Too long',
+      unsafe: 'Unsafe',
+      other: 'Other'
+    }),
+    counter: (used, max) => `${used}/${max}`
+  }),
+  fr: Object.freeze({
+    group: 'Évaluer cette réponse',
+    up: 'Bonne réponse',
+    down: 'Mauvaise réponse',
+    sheetTitle: "Qu'est-ce qui n'allait pas ?",
+    commentLabel: 'Commentaire (facultatif)',
+    commentPlaceholder: 'Dites-nous en plus (facultatif)',
+    submit: 'Envoyer',
+    cancel: 'Annuler',
+    reasons: Object.freeze({
+      inaccurate: 'Inexacte',
+      incomplete: 'Incomplète',
+      off_topic: 'Hors sujet',
+      wrong_source: 'Mauvaise source',
+      too_long: 'Trop longue',
+      unsafe: 'Dangereuse',
+      other: 'Autre'
+    }),
+    counter: (used, max) => `${used}/${max}`
+  })
+});
+
+/**
+ * The labels for a locale (`'fr'`, `'fr-CA'`… → French, anything else →
+ * English), with the app's overrides on top. A reason the app adds needs its
+ * own label; without one, the id itself is shown.
+ */
+function resolveFeedbackLabels({ locale, labels } = {}) {
+  const language = typeof locale === 'string' ? locale.toLowerCase().split(/[-_]/)[0] : 'en';
+  const base = FEEDBACK_LABELS[language] || FEEDBACK_LABELS.en;
+  const given = labels && typeof labels === 'object' ? labels : {};
+  const pick = (key) => (typeof given[key] === 'string' && given[key] ? given[key] : base[key]);
+  return {
+    group: pick('group'),
+    up: pick('up'),
+    down: pick('down'),
+    sheetTitle: pick('sheetTitle'),
+    commentLabel: pick('commentLabel'),
+    commentPlaceholder: pick('commentPlaceholder'),
+    submit: pick('submit'),
+    cancel: pick('cancel'),
+    reasons: { ...base.reasons, ...(given.reasons && typeof given.reasons === 'object' ? given.reasons : {}) },
+    counter: typeof given.counter === 'function' ? given.counter : base.counter
+  };
+}
+
+/**
+ * What pressing a thumb does, given the current choice:
+ *   the thumb already chosen  → withdraw it;
+ *   thumbs up                 → send it at once;
+ *   thumbs down               → ask why first.
+ */
+function feedbackPress(value, rating) {
+  if (rating !== 'up' && rating !== 'down') return { type: 'none' };
+  if (value === rating) return { type: 'remove' };
+  return rating === 'up' ? { type: 'submit', payload: { rating: 'up' } } : { type: 'ask' };
+}
+
+/** The comment cut to the limit, never sliced inside a surrogate pair. */
+function clampComment(text, max = FEEDBACK_COMMENT_MAX) {
+  if (typeof text !== 'string') return '';
+  const chars = Array.from(text);
+  return chars.length <= max ? text : chars.slice(0, max).join('');
+}
+
+/**
+ * The body sent for a rating. A reason only goes with 'down' and only if the
+ * list allows it; a blank comment is dropped; the comment is trimmed and cut.
+ */
+function buildFeedbackPayload({ rating, reason, comment, reasons = FEEDBACK_REASONS, maxComment = FEEDBACK_COMMENT_MAX } = {}) {
+  if (rating !== 'up' && rating !== 'down') throw new Error("rating must be 'up' or 'down'.");
+  const payload = { rating };
+  if (rating === 'down' && typeof reason === 'string' && reasons.includes(reason)) payload.reason = reason;
+  const text = clampComment(typeof comment === 'string' ? comment.trim() : '', maxComment).trim();
+  if (text) payload.comment = text;
+  return payload;
+}
+
+/** What each thumb tells the screen reader. */
+function feedbackButtonState({ value, rating, labels, disabled = false }) {
+  const selected = value === rating;
+  return {
+    selected,
+    accessibilityRole: 'button',
+    accessibilityLabel: rating === 'up' ? labels.up : labels.down,
+    accessibilityState: { selected, disabled: Boolean(disabled) }
+  };
+}
+
+/** The sheet's chips: id, visible label, selected or not. */
+function feedbackReasonOptions({ reasons = FEEDBACK_REASONS, labels, selected }) {
+  return reasons.map((id) => ({ id, label: labels.reasons[id] || id, selected: id === selected }));
+}
+
+module.exports = {
+  FEEDBACK_REASONS,
+  FEEDBACK_COMMENT_MAX,
+  FEEDBACK_LABELS,
+  resolveFeedbackLabels,
+  feedbackPress,
+  clampComment,
+  buildFeedbackPayload,
+  feedbackButtonState,
+  feedbackReasonOptions
+};

package/src/logic/index.d.ts

@@ -305,3 +305,61 @@ export function countRunningSteps(
   steps: ReadonlyArray<{ tool: string; state: string } | null> | null | undefined,
   tool: string | readonly string[]
 ): number;
+
+/* ───────────────────────────── Feedback bar ─────────────────────────── */
+
+export type FeedbackRating = 'up' | 'down';
+export const FEEDBACK_REASONS: readonly string[];
+export const FEEDBACK_COMMENT_MAX: number;
+export interface FeedbackLabels {
+  group: string;
+  up: string;
+  down: string;
+  sheetTitle: string;
+  commentLabel: string;
+  commentPlaceholder: string;
+  submit: string;
+  cancel: string;
+  /** Visible name of each reason id; an id without a label is shown as is. */
+  reasons: Record<string, string>;
+  /** "12/500". */
+  counter: (used: number, max: number) => string;
+}
+export interface FeedbackPayload {
+  rating: FeedbackRating;
+  reason?: string;
+  comment?: string;
+}
+/** Default labels, English and French. */
+export const FEEDBACK_LABELS: Readonly<Record<'en' | 'fr', Readonly<FeedbackLabels>>>;
+export function resolveFeedbackLabels(options?: { locale?: string; labels?: Partial<FeedbackLabels> }): FeedbackLabels;
+export type FeedbackPressAction =
+  | { type: 'none' }
+  | { type: 'remove' }
+  | { type: 'ask' }
+  | { type: 'submit'; payload: FeedbackPayload };
+export function feedbackPress(value: FeedbackRating | null | undefined, rating: FeedbackRating): FeedbackPressAction;
+export function clampComment(text: unknown, max?: number): string;
+export function buildFeedbackPayload(options: {
+  rating: FeedbackRating;
+  reason?: string | null;
+  comment?: string | null;
+  reasons?: readonly string[];
+  maxComment?: number;
+}): FeedbackPayload;
+export function feedbackButtonState(options: {
+  value: FeedbackRating | null | undefined;
+  rating: FeedbackRating;
+  labels: FeedbackLabels;
+  disabled?: boolean;
+}): {
+  selected: boolean;
+  accessibilityRole: 'button';
+  accessibilityLabel: string;
+  accessibilityState: { selected: boolean; disabled: boolean };
+};
+export function feedbackReasonOptions(options: {
+  reasons?: readonly string[];
+  labels: FeedbackLabels;
+  selected?: string | null;
+}): Array<{ id: string; label: string; selected: boolean }>;

package/src/logic/index.js

@@ -13,5 +13,6 @@ module.exports = {
   ...require('./markdown'),
   ...require('./tableColumns'),
   ...require('./anchorQuestion'),
-  ...require('./picture')
+  ...require('./picture'),
+  ...require('./feedbackBar')
 };