@repzo/widget-react-native 1.0.5 → 1.0.7

package/lib/typescript/module/ui/screens/chat/ChatView.d.ts

@@ -8,5 +8,5 @@
  * `attachments/pickers.ts`).
  */
 import type { ChatViewProps } from './ChatView.types';
-export declare function ChatView({ messages, loading, hasMoreMessages, agentTyping, color, agentName, agentAvatar, agentOnline, isOnline, teamName, teamAvatars, replyTimeLabel, locale, prefillText, offlineMessage, labels, attachmentSources, onPickAttachments, onSendMessage, onIdentifyVisitor, onLoadMore, onTyping, onBack, onClose, }: ChatViewProps): import("react").JSX.Element;
+export declare function ChatView({ messages, loading, hasMoreMessages, agentTyping, color, agentName, agentAvatar, agentOnline, isOnline, teamName, teamAvatars, replyTimeLabel, locale, prefillText, offlineMessage, labels, attachmentSources, onPickAttachments, onSendMessage, onIdentifyVisitor, onRateConversation, defaultLocale, onLoadMore, onTyping, onBack, onClose, }: ChatViewProps): import("react").JSX.Element;
 //# sourceMappingURL=ChatView.d.ts.map

package/lib/typescript/module/ui/screens/chat/ChatView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/chat/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAqDH,OAAO,KAAK,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAElE,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,eAAe,EACf,WAAW,EACX,KAAK,EACL,SAAS,EACT,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAgB,EAChB,cAAc,EACd,MAAM,EACN,WAAW,EACX,cAAc,EACd,MAAM,EACN,iBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,aAAa,+BA8hBf"}
+{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/chat/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAsDH,OAAO,KAAK,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAElE,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,eAAe,EACf,WAAW,EACX,KAAK,EACL,SAAS,EACT,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAgB,EAChB,cAAc,EACd,MAAM,EACN,WAAW,EACX,cAAc,EACd,MAAM,EACN,iBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,aAAa,+BAgiBf"}

package/lib/typescript/module/ui/screens/chat/ChatView.types.d.ts

@@ -1,9 +1,10 @@
 import type { TeamAvatar } from '../../../types';
 /** Props and label bundle for the chat thread. */
 import type { DraftAttachment, PickResult } from '../../../attachments/pickers';
-import type { AgentUiAction, AttachmentSource, Message, OutgoingAttachment } from '../../../types';
+import type { AgentUiAction, AttachmentSource, ConversationRatingResult, Message, OutgoingAttachment } from '../../../types';
 import type { AgentUiBlockLabels } from '../../components/AgentUiBlocks';
 import type { ImageViewerLabels } from '../../components/ImageViewer';
+import type { RatingCardLabels } from '../../components/RatingCard';
 export interface ChatLabels {
     back: string;
     loading: string;
@@ -27,6 +28,7 @@ export interface ChatLabels {
     procedureSend: string;
     procedureSent: string;
     blocks: AgentUiBlockLabels;
+    rating: RatingCardLabels;
     attach: AttachLabels;
     viewer: ImageViewerLabels;
 }
@@ -79,6 +81,14 @@ export interface ChatViewProps {
         name?: string;
         phone?: string;
     }) => Promise<void>;
+    /** Answers a rating card; rejects with the server error (409 locked, 410 expired). */
+    onRateConversation?: (messageId: string, ratingId: string, data: {
+        rating: number;
+        reason?: string;
+        comment?: string;
+    }) => Promise<ConversationRatingResult>;
+    /** The widget's default language — rating reasons fall back to it. */
+    defaultLocale?: string;
     onLoadMore: () => void;
     onTyping: (isTyping: boolean) => void;
     onBack: () => void;

package/lib/typescript/module/ui/screens/chat/ChatView.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatView.types.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/chat/ChatView.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatView.types.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/chat/ChatView.types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repzo/widget-react-native",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Repzo chat widget for React Native \u2014 pure JavaScript, no native modules",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/api/client.ts

@@ -12,6 +12,7 @@ import { SecureStorage, TOKEN_KEY } from '../storage';
 import type {
   AgentUiAction,
   Conversation,
+  ConversationRatingResult,
   InitResponse,
   Message,
   OutboundMessage,
@@ -285,6 +286,18 @@ export class WidgetApiClient {
     );
   }
 
+  /** Answers (or changes) the rating card posted after a teammate closed the chat. */
+  rateConversation(
+    conversationId: string,
+    ratingId: string,
+    data: { rating: number; reason?: string | null; comment?: string | null }
+  ): Promise<ConversationRatingResult> {
+    return this.request(
+      `/api/widget/conversations/${encodeURIComponent(conversationId)}/ratings/${encodeURIComponent(ratingId)}`,
+      { method: 'POST', body: data }
+    );
+  }
+
   identify(data: {
     email?: string;
     name?: string;

package/src/i18n.ts

@@ -118,6 +118,21 @@ export const DEFAULT_LABELS = {
   messageSeen: 'Seen',
   waitingForTeammate: 'Waiting for a teammate',
   joinedConversation: 'joined the conversation',
+  // Conversation rating card, posted after a teammate closes the chat.
+  ratingQuestion: 'How would you rate this conversation?',
+  ratingReasonPrompt: 'What went wrong?',
+  ratingCommentPlaceholder: 'Tell us more (optional)',
+  ratingSubmit: 'Submit',
+  ratingDone: 'Done',
+  ratingThanks: 'Thanks for your feedback!',
+  ratingLocked: 'This rating can no longer be changed',
+  ratingExpired: 'This conversation can no longer be rated',
+  ratingFailed: "Couldn't save your rating. Please try again.",
+  rating1: 'Terrible',
+  rating2: 'Bad',
+  rating3: 'OK',
+  rating4: 'Great',
+  rating5: 'Amazing',
   // Forms.
   procedureSend: 'Send details',
   procedureSent: 'Sent',

package/src/locales.ts

@@ -74,6 +74,20 @@ const ar: LabelMap = {
   messageSeen: 'تمت المشاهدة',
   waitingForTeammate: 'بانتظار أحد أعضاء الفريق',
   joinedConversation: 'انضم إلى المحادثة',
+  ratingQuestion: 'كيف تقيّم هذه المحادثة؟',
+  ratingReasonPrompt: 'ما الذي لم يكن جيداً؟',
+  ratingCommentPlaceholder: 'أخبرنا المزيد (اختياري)',
+  ratingSubmit: 'إرسال',
+  ratingDone: 'تم',
+  ratingThanks: 'شكراً على ملاحظاتك!',
+  ratingLocked: 'لم يعد بالإمكان تغيير هذا التقييم',
+  ratingExpired: 'لم يعد بالإمكان تقييم هذه المحادثة',
+  ratingFailed: 'تعذّر حفظ تقييمك. حاول مرة أخرى.',
+  rating1: 'سيئ جداً',
+  rating2: 'سيئ',
+  rating3: 'مقبول',
+  rating4: 'جيد',
+  rating5: 'ممتاز',
   procedureSend: 'إرسال التفاصيل',
   procedureSent: 'تم الإرسال',
   fieldRequired: '{field} مطلوب',

package/src/state/widget-store.ts

@@ -22,6 +22,7 @@ import type {
   AgentUiAction,
   BootOptions,
   Conversation,
+  ConversationRatingResult,
   Message,
   OutgoingAttachment,
   RepzoWidgetErrorCode,
@@ -1850,6 +1851,39 @@ export class WidgetStore {
     await this.client.identify(data);
   }
 
+  /**
+   * Answers a rating card in the thread on screen and mirrors the answer onto
+   * its message, so the card keeps it across a re-render. Rejects with the
+   * server's error (409 locked, 410 expired) for the card to show.
+   */
+  async rateConversation(
+    messageId: string,
+    ratingId: string,
+    data: { rating: number; reason?: string | null; comment?: string | null }
+  ): Promise<ConversationRatingResult> {
+    const conversationId = this.state.activeConversationId;
+    if (!conversationId) throw new RepzoWidgetError('No conversation is open', 0, 'http');
+    const result = await this.client.rateConversation(conversationId, ratingId, data);
+    if (this.state.activeConversationId === conversationId) {
+      this.setState((current) => ({
+        messages: current.messages.map((message) =>
+          message.id === messageId
+            ? {
+                ...message,
+                metadata: {
+                  ...message.metadata,
+                  rating: result.rating,
+                  ratingReason: result.reason,
+                  ratingComment: result.comment,
+                },
+              }
+            : message
+        ),
+      }));
+    }
+    return result;
+  }
+
   /** Fire-and-forget visitor typing ping, throttled well under the 30/min cap. */
   notifyTyping(isTyping: boolean): void {
     const conversationId = this.state.activeConversationId;

package/src/types.ts

@@ -480,6 +480,25 @@ export interface RepzoWidgetStorageAdapter {
  * - `identity_verification_failed` — `userHash` missing/wrong while the
  *   channel enforces identity verification.
  */
+/** A bad-rating reason on the rating card, labelled per language. */
+export interface RatingReason {
+  id: string;
+  /** Locale code → label. */
+  labels: Record<string, string>;
+}
+
+/** The visitor's answer to a conversation rating card. */
+export interface ConversationRatingResult {
+  id: string;
+  /** 1 (Terrible) … 5 (Amazing). */
+  rating: number;
+  /** Id of the reason picked after a bad rating (1–2), if any. */
+  reason: string | null;
+  comment: string | null;
+  /** A comment was left: the rating can't change any more. */
+  locked: boolean;
+}
+
 export type RepzoWidgetErrorCode =
   | 'network'
   | 'http'

package/src/ui/WidgetProvider.tsx

@@ -295,6 +295,7 @@ export function RepzoWidgetProvider({
           teamAvatars={teamAvatars}
           replyTimeLabel={theme.replyTimeLabel}
           locale={state.locale}
+          defaultLocale={state.config?.defaultLocale}
           prefillText={state.prefillText}
           offlineMessage={theme.offlineMessage}
           labels={{
@@ -320,6 +321,18 @@ export function RepzoWidgetProvider({
             procedureSend: labels.procedureSend,
             procedureSent: labels.procedureSent,
             blocks: blockLabels,
+            rating: {
+              question: labels.ratingQuestion,
+              reasonPrompt: labels.ratingReasonPrompt,
+              commentPlaceholder: labels.ratingCommentPlaceholder,
+              submit: labels.ratingSubmit,
+              done: labels.ratingDone,
+              thanks: labels.ratingThanks,
+              locked: labels.ratingLocked,
+              expired: labels.ratingExpired,
+              failed: labels.ratingFailed,
+              scale: [labels.rating1, labels.rating2, labels.rating3, labels.rating4, labels.rating5],
+            },
             attach: attachLabels,
             viewer: {
               close: labels.close,
@@ -331,6 +344,7 @@ export function RepzoWidgetProvider({
           onPickAttachments={pickAttachments}
           onSendMessage={handleSendMessage}
           onIdentifyVisitor={(data) => store.identifyVisitor(data)}
+          onRateConversation={(messageId, ratingId, data) => store.rateConversation(messageId, ratingId, data)}
           onLoadMore={() => store.loadMoreMessages()}
           onTyping={(isTyping) => store.notifyTyping(isTyping)}
           onBack={handleBack}

package/src/ui/components/RatingCard.tsx

@@ -0,0 +1,362 @@
+/**
+ * Conversation rating card (CSAT), posted two minutes after a teammate closes
+ * the chat. Port of `client/src/widget/components/RatingCard.tsx`.
+ *
+ * Tapping a face saves it right away; after 😠/🙁 the visitor can also tap a
+ * reason, labelled in their language. A comment locks the rating. The server enforces the change window and answers
+ * 409 (locked) or 410 (expired), which the card shows instead of the faces'
+ * actions.
+ */
+
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+
+import type { ConversationRatingResult, RatingReason } from '../../types';
+import { contrastingTextColor, fontSize, palette, radius, spacing, withAlpha } from '../styles/theme';
+
+/** 1..5, worst to best — Intercom's five faces. */
+const RATING_SCALE = [
+  { value: 1, emoji: '😠' },
+  { value: 2, emoji: '🙁' },
+  { value: 3, emoji: '😐' },
+  { value: 4, emoji: '🙂' },
+  { value: 5, emoji: '🤩' },
+] as const;
+
+export interface RatingCardLabels {
+  question: string;
+  reasonPrompt: string;
+  commentPlaceholder: string;
+  submit: string;
+  /** The button with nothing typed: the comment is optional. */
+  done: string;
+  thanks: string;
+  locked: string;
+  expired: string;
+  failed: string;
+  /** Accessibility names for the faces, worst to best. */
+  scale: [string, string, string, string, string];
+}
+
+/** 1–2 asks for a reason; 3 is neutral, 4–5 good. */
+export const isBadRating = (rating: number | null) => rating != null && rating <= 2;
+
+const isRatingReason = (value: unknown): value is RatingReason =>
+  !!value &&
+  typeof value === 'object' &&
+  typeof (value as RatingReason).id === 'string' &&
+  !!(value as RatingReason).labels &&
+  typeof (value as RatingReason).labels === 'object';
+
+/** The rating card carried by a system message's metadata, or null. */
+export function getRatingRequest(metadata: Record<string, unknown> | null | undefined) {
+  if (!metadata || metadata.event !== 'rating_request' || typeof metadata.ratingId !== 'string') return null;
+  const rating = typeof metadata.rating === 'number' && metadata.rating >= 1 && metadata.rating <= 5 ? metadata.rating : null;
+  const comment = typeof metadata.ratingComment === 'string' && metadata.ratingComment ? metadata.ratingComment : null;
+  const reason = typeof metadata.ratingReason === 'string' && metadata.ratingReason ? metadata.ratingReason : null;
+  const reasons = Array.isArray(metadata.ratingReasons) ? metadata.ratingReasons.filter(isRatingReason) : [];
+  return { ratingId: metadata.ratingId, rating, comment, reason, reasons };
+}
+
+/**
+ * A reason's label in the first of `locales` it has (full code, then its base
+ * language: "ar-SA" → "ar"), else English, else whatever it has.
+ */
+export function reasonLabel(reason: RatingReason, locales: Array<string | null | undefined>): string {
+  for (const locale of [...locales, 'en']) {
+    if (!locale) continue;
+    const label = reason.labels[locale] || reason.labels[locale.split('-')[0]!];
+    if (label) return label;
+  }
+  return Object.values(reason.labels).find(Boolean) ?? reason.id;
+}
+
+interface RatingCardProps {
+  ratingId: string;
+  initialRating: number | null;
+  initialComment: string | null;
+  initialReason: string | null;
+  /** Offered after a bad rating (1–2). */
+  reasons: RatingReason[];
+  /** The visitor's language first, then the widget's default. */
+  locales: Array<string | null | undefined>;
+  color: string;
+  labels: RatingCardLabels;
+  onRate?: (
+    ratingId: string,
+    data: { rating: number; reason?: string; comment?: string }
+  ) => Promise<ConversationRatingResult>;
+}
+
+export function RatingCard({
+  ratingId,
+  initialRating,
+  initialComment,
+  initialReason,
+  reasons,
+  locales,
+  color,
+  labels,
+  onRate,
+}: RatingCardProps) {
+  const [rating, setRating] = useState<number | null>(initialRating);
+  const [reason, setReason] = useState<string | null>(initialReason);
+  const [comment, setComment] = useState<string | null>(initialComment);
+  const [draft, setDraft] = useState('');
+  // The comment is optional: "Done" with nothing typed just closes the box —
+  // the face (and reason) are already saved.
+  const [finished, setFinished] = useState(false);
+  const [pending, setPending] = useState(false);
+  const [closedReason, setClosedReason] = useState<'locked' | 'expired' | null>(initialComment ? 'locked' : null);
+  const [failed, setFailed] = useState(false);
+  const interactive = !!onRate && !closedReason && !pending;
+  const hasDraft = draft.trim().length > 0;
+  const canSubmit = !pending;
+
+  const submit = async (next: { rating: number; reason?: string; comment?: string }) => {
+    if (!onRate || pending) return;
+    setPending(true);
+    setFailed(false);
+    try {
+      const result = await onRate(ratingId, next);
+      setRating(result.rating);
+      setReason(result.reason ?? null);
+      setComment(result.comment);
+      if (result.locked) setClosedReason('locked');
+      setDraft('');
+    } catch (error) {
+      const status = (error as { status?: number }).status;
+      if (status === 409) setClosedReason('locked');
+      else if (status === 410) setClosedReason('expired');
+      else setFailed(true);
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const status =
+    closedReason === 'expired'
+      ? labels.expired
+      : closedReason === 'locked' && !comment
+        ? labels.locked
+        : failed
+          ? labels.failed
+          : rating != null
+            ? labels.thanks
+            : null;
+
+  return (
+    <View style={styles.row}>
+      <View style={styles.card} testID="repzo-rating-card">
+        <Text style={styles.question}>{labels.question}</Text>
+        <View style={styles.faces} accessibilityRole="radiogroup">
+          {RATING_SCALE.map((entry, index) => {
+            const selected = rating === entry.value;
+            return (
+              <Pressable
+                key={entry.value}
+                accessibilityRole="radio"
+                accessibilityLabel={labels.scale[index]}
+                accessibilityState={{ checked: selected, disabled: !interactive }}
+                disabled={!interactive}
+                hitSlop={4}
+                onPress={() => {
+                  if (!selected) void submit({ rating: entry.value });
+                }}
+                style={({ pressed }) => [
+                  styles.face,
+                  selected && { borderColor: color, backgroundColor: withAlpha(color, 0.08) },
+                  rating != null && !selected && styles.faceDimmed,
+                  pressed && styles.facePressed,
+                ]}>
+                <Text style={styles.emoji}>{entry.emoji}</Text>
+              </Pressable>
+            );
+          })}
+        </View>
+
+        {status ? <Text style={[styles.status, failed && styles.statusFailed]}>{status}</Text> : null}
+
+        {isBadRating(rating) && reasons.length > 0 && (interactive || reason) ? (
+          <View style={styles.reasons}>
+            {interactive ? <Text style={styles.reasonPrompt}>{labels.reasonPrompt}</Text> : null}
+            <View style={styles.chips} accessibilityRole="radiogroup" accessibilityLabel={labels.reasonPrompt}>
+              {reasons
+                .filter((item) => interactive || item.id === reason)
+                .map((item) => {
+                  const selected = item.id === reason;
+                  return (
+                    <Pressable
+                      key={item.id}
+                      accessibilityRole="radio"
+                      accessibilityState={{ checked: selected, disabled: !interactive }}
+                      disabled={!interactive}
+                      onPress={() => {
+                        if (!selected && rating != null) void submit({ rating, reason: item.id });
+                      }}
+                      style={({ pressed }) => [
+                        styles.chip,
+                        selected && { backgroundColor: color, borderColor: color },
+                        pressed && styles.facePressed,
+                      ]}>
+                      <Text style={[styles.chipText, selected && { color: contrastingTextColor(color) }]}>
+                        {reasonLabel(item, locales)}
+                      </Text>
+                    </Pressable>
+                  );
+                })}
+            </View>
+          </View>
+        ) : null}
+
+        {comment ? (
+          <Text style={styles.comment}>{comment}</Text>
+        ) : rating != null && !closedReason && !finished ? (
+          <View style={styles.form}>
+            <TextInput
+              value={draft}
+              onChangeText={setDraft}
+              editable={!pending}
+              multiline
+              maxLength={2000}
+              placeholder={labels.commentPlaceholder}
+              placeholderTextColor={palette.textSubtle}
+              style={styles.input}
+            />
+            <Pressable
+              accessibilityRole="button"
+              disabled={!canSubmit}
+              onPress={() => {
+                const text = draft.trim();
+                if (text && rating != null) void submit({ rating, comment: text });
+                else setFinished(true);
+              }}
+              style={({ pressed }) => [
+                styles.submit,
+                { backgroundColor: color },
+                !canSubmit && styles.submitDisabled,
+                pressed && canSubmit && styles.facePressed,
+              ]}>
+              <Text style={[styles.submitText, { color: contrastingTextColor(color) }]}>{hasDraft ? labels.submit : labels.done}</Text>
+            </Pressable>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    alignItems: 'center',
+    paddingVertical: spacing.md,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 340,
+    gap: spacing.md,
+    padding: spacing.lg,
+    borderRadius: radius.xl,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    backgroundColor: palette.white,
+  },
+  question: {
+    textAlign: 'center',
+    color: palette.ink,
+    fontSize: fontSize.body,
+    fontWeight: '600',
+  },
+  faces: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: spacing.sm,
+  },
+  face: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    borderWidth: 2,
+    borderColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  faceDimmed: {
+    opacity: 0.45,
+  },
+  facePressed: {
+    opacity: 0.7,
+  },
+  emoji: {
+    fontSize: 28,
+  },
+  status: {
+    textAlign: 'center',
+    color: palette.textMuted,
+    fontSize: fontSize.meta,
+  },
+  statusFailed: {
+    color: palette.danger,
+  },
+  reasons: {
+    gap: spacing.sm,
+  },
+  reasonPrompt: {
+    color: palette.ink,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+  chips: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.sm,
+  },
+  chip: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.pill,
+    borderWidth: 1,
+    borderColor: palette.border,
+    backgroundColor: palette.white,
+  },
+  chipText: {
+    color: palette.ink,
+    fontSize: fontSize.meta,
+  },
+  comment: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.md,
+    backgroundColor: palette.surfaceAlt,
+    color: palette.ink,
+    fontSize: fontSize.meta,
+    writingDirection: 'auto',
+  },
+  form: {
+    gap: spacing.sm,
+  },
+  input: {
+    minHeight: 64,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderColor: palette.border,
+    color: palette.ink,
+    fontSize: fontSize.input,
+    textAlignVertical: 'top',
+  },
+  submit: {
+    alignSelf: 'flex-end',
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.pill,
+  },
+  submitDisabled: {
+    opacity: 0.5,
+  },
+  submitText: {
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+});