@appsupportkit/support-sdk 0.2.0 → 0.3.0

package/src/components/screens/HomeScreen.tsx

@@ -1,9 +1,10 @@
 import { RefreshControl, ScrollView, Text, View } from 'react-native';
+import type { Translator } from '../../i18n';
+import { LANGUAGE_LABELS, type Language } from '../../i18n/languages';
 import type { SupportTheme } from '../../theme';
 import type { QueryType, Thread } from '../../types';
-import { QUERY_TYPE_LABEL } from '../../types';
 import { relativeTime } from '../../utils';
-import { Chevron, CloseIcon } from '../icons';
+import { Chevron, CloseIcon, GlobeIcon } from '../icons';
 import {
   EmptyState,
   ErrorState,
@@ -18,25 +19,22 @@ import {
 
 const COMPOSE_TYPES: QueryType[] = ['feedback', 'feature_request', 'bug_report'];
 
-const COMPOSE_HINT: Record<QueryType, string> = {
-  feedback: 'Tell us what you think',
-  feature_request: 'Suggest an improvement',
-  bug_report: "Something isn't working",
-};
-
 function ThreadRow({
   thread,
   theme,
+  strings,
   onPress,
   last,
 }: {
   thread: Thread;
   theme: SupportTheme;
+  strings: Translator;
   onPress: () => void;
   last: boolean;
 }) {
   const unread = thread.unread_count > 0;
-  const preview = thread.last_message?.body ?? 'No messages yet';
+  const type = strings.t(`type.${thread.type}`);
+  const preview = thread.last_message?.body ?? strings.t('home.noMessages');
   const at = thread.last_message?.created_at ?? thread.created_at;
 
   return (
@@ -45,8 +43,11 @@ function ThreadRow({
       theme={theme}
       accessibilityLabel={
         unread
-          ? `${QUERY_TYPE_LABEL[thread.type]} thread, ${thread.unread_count} unread`
-          : `${QUERY_TYPE_LABEL[thread.type]} thread`
+          ? strings.t('home.threadUnreadA11y', {
+              type,
+              count: thread.unread_count,
+            })
+          : strings.t('home.threadA11y', { type })
       }
       style={{
         flexDirection: 'row',
@@ -73,9 +74,9 @@ function ThreadRow({
               color: theme.colors.textPrimary,
             }}
           >
-            {QUERY_TYPE_LABEL[thread.type]}
+            {type}
           </Text>
-          <Text style={textStyles.meta(theme)}>{relativeTime(at)}</Text>
+          <Text style={textStyles.meta(theme)}>{relativeTime(at, strings)}</Text>
         </View>
 
         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
@@ -88,7 +89,9 @@ function ThreadRow({
               color: unread ? theme.colors.textPrimary : theme.colors.textSecondary,
             }}
           >
-            {thread.last_message?.sender === 'user' ? 'You: ' : ''}
+            {thread.last_message?.sender === 'user'
+              ? `${strings.t('home.you')}: `
+              : ''}
             {preview}
           </Text>
           {unread ? (
@@ -106,11 +109,13 @@ function ThreadGroup({
   label,
   threads,
   theme,
+  strings,
   onOpenThread,
 }: {
   label: string;
   threads: Thread[];
   theme: SupportTheme;
+  strings: Translator;
   onOpenThread: (thread: Thread) => void;
 }) {
   if (threads.length === 0) return null;
@@ -134,6 +139,7 @@ function ThreadGroup({
             key={thread.id}
             thread={thread}
             theme={theme}
+            strings={strings}
             onPress={() => onOpenThread(thread)}
             last={i === threads.length - 1}
           />
@@ -145,6 +151,8 @@ function ThreadGroup({
 
 export function HomeScreen({
   theme,
+  strings,
+  language,
   threads,
   loading,
   refreshing,
@@ -152,9 +160,12 @@ export function HomeScreen({
   onRefresh,
   onCompose,
   onOpenThread,
+  onChangeLanguage,
   onClose,
 }: {
   theme: SupportTheme;
+  strings: Translator;
+  language: Language;
   threads: Thread[] | null;
   loading: boolean;
   refreshing: boolean;
@@ -162,6 +173,7 @@ export function HomeScreen({
   onRefresh: () => void;
   onCompose: (type: QueryType) => void;
   onOpenThread: (thread: Thread) => void;
+  onChangeLanguage: () => void;
   onClose: () => void;
 }) {
   const open = (threads ?? []).filter((t) => t.status === 'open');
@@ -180,15 +192,15 @@ export function HomeScreen({
         }}
       >
         <View style={{ flex: 1, gap: 2 }}>
-          <Text style={textStyles.title(theme)}>Support</Text>
+          <Text style={textStyles.title(theme)}>{strings.t('home.title')}</Text>
           <Text style={textStyles.secondary(theme)}>
-            Start a conversation — we reply right here.
+            {strings.t('home.subtitle')}
           </Text>
         </View>
         <IconButton
           onPress={onClose}
           theme={theme}
-          accessibilityLabel="Close support"
+          accessibilityLabel={strings.t('home.close')}
           size={32}
         >
           <CloseIcon color={theme.colors.textSecondary} size={12} />
@@ -225,7 +237,9 @@ export function HomeScreen({
               key={type}
               onPress={() => onCompose(type)}
               theme={theme}
-              accessibilityLabel={`New ${QUERY_TYPE_LABEL[type].toLowerCase()}`}
+              accessibilityLabel={strings.t('home.newA11y', {
+                type: strings.t(`type.${type}`),
+              })}
               style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -239,20 +253,63 @@ export function HomeScreen({
               <TypeGlyph type={type} theme={theme} size={34} />
               <View style={{ flex: 1, gap: 1 }}>
                 <Text style={textStyles.heading(theme)}>
-                  {QUERY_TYPE_LABEL[type]}
+                  {strings.t(`type.${type}`)}
+                </Text>
+                <Text style={textStyles.meta(theme)}>
+                  {strings.t(`hint.${type}`)}
                 </Text>
-                <Text style={textStyles.meta(theme)}>{COMPOSE_HINT[type]}</Text>
               </View>
               <Chevron color={theme.colors.textTertiary} />
             </PressableRow>
           ))}
         </View>
 
+        {/* Language — a quiet row rather than a settings screen, since it is
+            the only preference the sheet has. */}
+        <View
+          style={{
+            marginTop: 12,
+            marginHorizontal: 16,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            borderRadius: theme.radii.card,
+            backgroundColor: theme.colors.surface,
+            overflow: 'hidden',
+          }}
+        >
+          <PressableRow
+            onPress={onChangeLanguage}
+            theme={theme}
+            accessibilityLabel={strings.t('lang.change')}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 12,
+              paddingHorizontal: 14,
+              paddingVertical: 11,
+            }}
+          >
+            <GlobeIcon color={theme.colors.textTertiary} size={16} />
+            <Text style={[textStyles.secondary(theme), { flex: 1 }]}>
+              {strings.t('home.language')}
+            </Text>
+            <Text style={textStyles.meta(theme)}>
+              {LANGUAGE_LABELS[language]}
+            </Text>
+            <Chevron color={theme.colors.textTertiary} />
+          </PressableRow>
+        </View>
+
         {/* Threads */}
         {error !== null && threads === null ? (
           // Only take over the screen when there's nothing cached to show —
           // a failed background poll shouldn't hide an already-loaded list.
-          <ErrorState message={error} onRetry={onRefresh} theme={theme} />
+          <ErrorState
+            message={error}
+            onRetry={onRefresh}
+            theme={theme}
+            strings={strings}
+          />
         ) : loading && threads === null ? (
           <View style={{ paddingHorizontal: 16, paddingTop: 28, gap: 12 }}>
             <SkeletonBlock width={110} height={11} theme={theme} radius={4} />
@@ -261,22 +318,24 @@ export function HomeScreen({
           </View>
         ) : (threads ?? []).length === 0 ? (
           <EmptyState
-            message="No conversations yet"
-            hint="Anything you send lands with the team, and their replies come back to this sheet."
+            message={strings.t('home.empty')}
+            hint={strings.t('home.emptyHint')}
             theme={theme}
           />
         ) : (
           <>
             <ThreadGroup
-              label={`Open · ${open.length}`}
+              label={`${strings.t('home.open')} · ${open.length}`}
               threads={open}
               theme={theme}
+              strings={strings}
               onOpenThread={onOpenThread}
             />
             <ThreadGroup
-              label="Resolved"
+              label={strings.t('home.resolved')}
               threads={resolved}
               theme={theme}
+              strings={strings}
               onOpenThread={onOpenThread}
             />
           </>

package/src/components/screens/LanguageScreen.tsx

@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import { ScrollView, Text, View } from 'react-native';
+import type { Translator } from '../../i18n';
+import {
+  LANGUAGE_LABELS,
+  SUPPORTED_LANGUAGES,
+  type Language,
+} from '../../i18n/languages';
+import type { SupportTheme } from '../../theme';
+import { CheckIcon, Chevron, CloseIcon } from '../icons';
+import {
+  IconButton,
+  PressableRow,
+  PrimaryButton,
+  textStyles,
+} from '../primitives';
+
+/**
+ * The one-time language prompt, and the same screen again whenever the user
+ * changes their mind from the home header.
+ *
+ * Selecting a row re-renders the whole sheet in that language immediately —
+ * the confirmation button is the only way to see what you are choosing before
+ * you commit to it.
+ */
+export function LanguageScreen({
+  theme,
+  strings,
+  selected,
+  onSelect,
+  onConfirm,
+  onBack,
+  onDismiss,
+  saving,
+  error,
+}: {
+  theme: SupportTheme;
+  strings: Translator;
+  selected: Language;
+  onSelect: (language: Language) => void;
+  onConfirm: () => void;
+  /** Absent on first run: there is nothing to go back to yet. */
+  onBack?: () => void;
+  /**
+   * First run only — dismissing without choosing closes the sheet and leaves
+   * the preference unset, so the prompt appears again next time. Saving a
+   * language the user never actually picked would be worse: every message
+   * they write would be translated from the wrong one.
+   */
+  onDismiss?: () => void;
+  saving: boolean;
+  error: string | null;
+}) {
+  // Held so the list doesn't reorder under a finger mid-scroll.
+  const [languages] = useState(() => [...SUPPORTED_LANGUAGES]);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          paddingHorizontal: 16,
+          paddingTop: 4,
+          paddingBottom: 16,
+          gap: 10,
+        }}
+      >
+        {onBack !== undefined && (
+          <IconButton
+            onPress={onBack}
+            theme={theme}
+            accessibilityLabel={strings.t('compose.back')}
+            size={32}
+          >
+            <Chevron
+              color={theme.colors.textSecondary}
+              direction="left"
+              size={12}
+            />
+          </IconButton>
+        )}
+        <View style={{ flex: 1, gap: 2 }}>
+          <Text style={textStyles.title(theme)}>{strings.t('lang.title')}</Text>
+          <Text style={textStyles.secondary(theme)}>
+            {strings.t('lang.subtitle')}
+          </Text>
+        </View>
+        {onDismiss !== undefined && (
+          <IconButton
+            onPress={onDismiss}
+            theme={theme}
+            accessibilityLabel={strings.t('home.close')}
+            size={32}
+          >
+            <CloseIcon color={theme.colors.textSecondary} size={12} />
+          </IconButton>
+        )}
+      </View>
+
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 8 }}>
+        <View
+          style={{
+            marginHorizontal: 16,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            borderRadius: theme.radii.card,
+            backgroundColor: theme.colors.surface,
+            overflow: 'hidden',
+          }}
+        >
+          {languages.map((language, i) => {
+            const active = language === selected;
+            return (
+              <PressableRow
+                key={language}
+                onPress={() => onSelect(language)}
+                theme={theme}
+                accessibilityLabel={LANGUAGE_LABELS[language]}
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 12,
+                  paddingHorizontal: 16,
+                  paddingVertical: 13,
+                  borderTopWidth: i === 0 ? 0 : 1,
+                  borderTopColor: theme.colors.border,
+                }}
+              >
+                <Text
+                  style={{
+                    flex: 1,
+                    fontSize: 15,
+                    fontWeight: active ? '600' : '400',
+                    color: theme.colors.textPrimary,
+                  }}
+                >
+                  {LANGUAGE_LABELS[language]}
+                </Text>
+                {active && <CheckIcon color={theme.colors.accent} size={16} />}
+              </PressableRow>
+            );
+          })}
+        </View>
+      </ScrollView>
+
+      <View
+        style={{
+          paddingHorizontal: 16,
+          paddingTop: 12,
+          paddingBottom: 8,
+          gap: 8,
+          borderTopWidth: 1,
+          borderTopColor: theme.colors.border,
+        }}
+      >
+        {error !== null && (
+          <Text style={{ fontSize: 12, color: theme.colors.statusDanger }}>
+            {error}
+          </Text>
+        )}
+        <PrimaryButton
+          label={saving ? strings.t('compose.sending') : strings.t('lang.continue')}
+          onPress={onConfirm}
+          disabled={saving}
+          theme={theme}
+          fullWidth
+        />
+      </View>
+    </View>
+  );
+}

package/src/components/screens/ThreadScreen.tsx

@@ -7,6 +7,7 @@ import {
   TextInput,
   View,
 } from 'react-native';
+import type { Translator } from '../../i18n';
 import type { SupportTheme } from '../../theme';
 import type { Thread, ThreadMessage } from '../../types';
 import { USER_MESSAGE_MAX, USER_MESSAGE_MIN } from '../../types';
@@ -34,7 +35,11 @@ interface Row {
   startsUnread: boolean;
 }
 
-function buildRows(messages: ThreadMessage[], unreadCount: number): Row[] {
+function buildRows(
+  messages: ThreadMessage[],
+  unreadCount: number,
+  strings: Translator,
+): Row[] {
   // Unread messages are always the newest admin ones, so the divider goes
   // above the Nth-from-last admin message.
   let remaining = unreadCount;
@@ -49,16 +54,18 @@ function buildRows(messages: ThreadMessage[], unreadCount: number): Row[] {
   return messages.map((message, i) => {
     const previous = i > 0 ? (messages[i - 1] ?? null) : null;
     const next = i < messages.length - 1 ? (messages[i + 1] ?? null) : null;
+    // Grouped by sender alone. Two replies from two different admins are two
+    // messages from "Support" as far as this side is concerned, so breaking
+    // the group between them would be a visible seam with no visible cause.
     const withinGroup = (a: ThreadMessage | null, b: ThreadMessage) =>
       a !== null &&
       a.sender === b.sender &&
-      a.admin_name === b.admin_name &&
       Math.abs(Date.parse(b.created_at) - Date.parse(a.created_at)) <
         GROUP_WINDOW_MS;
 
     const day =
       previous === null || !isSameDay(previous.created_at, message.created_at)
-        ? dayLabel(message.created_at)
+        ? dayLabel(message.created_at, strings)
         : null;
     const startsUnread = message.id === firstUnreadId;
 
@@ -127,7 +134,15 @@ function Separator({
   );
 }
 
-function MessageBubble({ row, theme }: { row: Row; theme: SupportTheme }) {
+function MessageBubble({
+  row,
+  theme,
+  strings,
+}: {
+  row: Row;
+  theme: SupportTheme;
+  strings: Translator;
+}) {
   const { message, firstInGroup, lastInGroup } = row;
   const own = message.sender === 'user';
   const round = theme.radii.bubble;
@@ -145,7 +160,7 @@ function MessageBubble({ row, theme }: { row: Row; theme: SupportTheme }) {
     >
       {!own && firstInGroup && (
         <Text style={[textStyles.meta(theme), { paddingHorizontal: 4 }]}>
-          {message.admin_name ?? 'Support'}
+          {strings.t('thread.support')}
         </Text>
       )}
       <View
@@ -172,7 +187,11 @@ function MessageBubble({ row, theme }: { row: Row; theme: SupportTheme }) {
       </View>
       {lastInGroup && (
         <Text style={[textStyles.meta(theme), { paddingHorizontal: 4 }]}>
-          {formatTime(message.created_at)}
+          {/* A reply whose translation is still in flight says so, rather
+              than showing English that changes under the reader. */}
+          {message.translation_pending
+            ? strings.t('thread.translating')
+            : formatTime(message.created_at, strings)}
         </Text>
       )}
     </View>
@@ -181,11 +200,13 @@ function MessageBubble({ row, theme }: { row: Row; theme: SupportTheme }) {
 
 export function ThreadScreen({
   theme,
+  strings,
   thread,
   onBack,
   onSend,
 }: {
   theme: SupportTheme;
+  strings: Translator;
   thread: Thread;
   onBack: () => void;
   /** Resolves null on success, or a user-facing error message. */
@@ -206,8 +227,8 @@ export function ThreadScreen({
   const tooShort = trimmed.length > 0 && trimmed.length < USER_MESSAGE_MIN;
 
   const rows = useMemo(
-    () => buildRows(thread.messages, unreadOnOpen),
-    [thread.messages, unreadOnOpen],
+    () => buildRows(thread.messages, unreadOnOpen, strings),
+    [thread.messages, unreadOnOpen, strings],
   );
 
   useEffect(() => {
@@ -244,15 +265,15 @@ export function ThreadScreen({
         <IconButton
           onPress={onBack}
           theme={theme}
-          accessibilityLabel="Back to conversations"
+          accessibilityLabel={strings.t('compose.back')}
           size={32}
         >
           <Chevron color={theme.colors.textSecondary} direction="left" size={12} />
         </IconButton>
-        <TypeChipView type={thread.type} theme={theme} />
-        <StatusIndicator status={thread.status} theme={theme} />
+        <TypeChipView type={thread.type} theme={theme} strings={strings} />
+        <StatusIndicator status={thread.status} theme={theme} strings={strings} />
         <Text style={[textStyles.meta(theme), { marginLeft: 'auto' }]}>
-          {relativeTime(thread.created_at)}
+          {relativeTime(thread.created_at, strings)}
         </Text>
       </View>
 
@@ -270,18 +291,22 @@ export function ThreadScreen({
           <View key={row.message.id}>
             {row.day !== null && <Separator label={row.day} theme={theme} />}
             {row.startsUnread && (
-              <Separator label="New" theme={theme} tone="accent" />
+              <Separator
+                label={strings.t('thread.new')}
+                theme={theme}
+                tone="accent"
+              />
             )}
-            <MessageBubble row={row} theme={theme} />
+            <MessageBubble row={row} theme={theme} strings={strings} />
           </View>
         ))}
 
         {resolved && thread.resolved_at !== null && (
           <View style={{ marginTop: 16 }}>
             <Separator
-              label={`Resolved by ${thread.resolved_by_name ?? 'support'} · ${formatDate(
-                thread.resolved_at,
-              )}`}
+              label={strings.t('thread.resolvedAt', {
+                date: formatDate(thread.resolved_at, strings),
+              })}
               theme={theme}
             />
           </View>
@@ -308,7 +333,7 @@ export function ThreadScreen({
             }}
           >
             <Text style={textStyles.secondary(theme)}>
-              This conversation is resolved and read-only
+              {strings.t('thread.readOnly')}
             </Text>
           </View>
         ) : (
@@ -322,7 +347,7 @@ export function ThreadScreen({
                 }}
                 multiline
                 editable={!sending}
-                placeholder="Write a reply…"
+                placeholder={strings.t('thread.placeholder')}
                 placeholderTextColor={theme.colors.textTertiary}
                 style={{
                   flex: 1,
@@ -347,7 +372,9 @@ export function ThreadScreen({
                 tone="accent"
                 size={44}
                 disabled={!valid || sending}
-                accessibilityLabel={sending ? 'Sending' : 'Send reply'}
+                accessibilityLabel={strings.t(
+                  sending ? 'thread.sendingA11y' : 'thread.sendA11y',
+                )}
               >
                 <ArrowUpIcon color={theme.colors.accentForeground} size={19} />
               </IconButton>
@@ -371,7 +398,7 @@ export function ThreadScreen({
                   </Text>
                 ) : tooShort ? (
                   <Text style={textStyles.meta(theme)}>
-                    At least {USER_MESSAGE_MIN} characters
+                    {strings.t('compose.minChars', { count: USER_MESSAGE_MIN })}
                   </Text>
                 ) : null}
                 {draft.length >= COUNTER_VISIBLE_FROM && (

package/src/i18n/index.ts

@@ -0,0 +1,81 @@
+// UI copy, in the user's language.
+//
+// Message bodies are translated by the backend at write time; the sheet's own
+// chrome is not — it is a fixed set of strings that never changes, so it ships
+// as a bundled table. A model call to render the word "Send" would be absurd,
+// and it would also mean the SDK couldn't draw its own UI offline.
+
+import { DEFAULT_LANGUAGE, type Language } from './languages';
+import { en, type StringKey, type StringTable } from './strings/en';
+import { de } from './strings/de';
+import { es } from './strings/es';
+import { fr } from './strings/fr';
+import { hi } from './strings/hi';
+import { it } from './strings/it';
+import { ja } from './strings/ja';
+import { ko } from './strings/ko';
+import { nl } from './strings/nl';
+import { pl } from './strings/pl';
+import { pt } from './strings/pt';
+import { ru } from './strings/ru';
+import { tr } from './strings/tr';
+import { zh } from './strings/zh';
+
+const TABLES: Record<Language, StringTable> = {
+  en,
+  es,
+  fr,
+  de,
+  nl,
+  pt,
+  it,
+  pl,
+  tr,
+  ru,
+  ja,
+  ko,
+  zh,
+  hi,
+};
+
+/** Fills `{name}` placeholders. Unknown tokens are left alone, not blanked. */
+function format(
+  template: string,
+  vars?: Record<string, string | number>,
+): string {
+  if (!vars) return template;
+  return template.replace(/\{(\w+)\}/g, (match, key: string) =>
+    key in vars ? String(vars[key]) : match,
+  );
+}
+
+export interface Translator {
+  language: Language;
+  /**
+   * BCP-47 tag for Intl — dates and times stay in the user's chosen language
+   * rather than the device's, so a sheet never mixes the two.
+   */
+  locale: string;
+  t: (key: StringKey, vars?: Record<string, string | number>) => string;
+}
+
+export function createTranslator(language: Language): Translator {
+  const table = TABLES[language] ?? TABLES[DEFAULT_LANGUAGE];
+  return {
+    language,
+    locale: language,
+    t: (key, vars) => format(table[key] ?? en[key], vars),
+  };
+}
+
+export type { StringKey, StringTable };
+export {
+  asLanguage,
+  baseLanguage,
+  DEFAULT_LANGUAGE,
+  deviceLanguage,
+  isSupportedLanguage,
+  LANGUAGE_LABELS,
+  SUPPORTED_LANGUAGES,
+  type Language,
+} from './languages';