@appsupportkit/support-sdk 0.1.2 → 0.2.0

package/src/components/screens/ThreadScreen.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   KeyboardAvoidingView,
   Platform,
@@ -8,18 +8,177 @@ import {
   View,
 } from 'react-native';
 import type { SupportTheme } from '../../theme';
-import type { Thread } from '../../types';
+import type { Thread, ThreadMessage } from '../../types';
 import { USER_MESSAGE_MAX, USER_MESSAGE_MIN } from '../../types';
-import { formatDate, relativeTime } from '../../utils';
-import { Chevron } from '../icons';
+import { dayLabel, formatDate, formatTime, isSameDay, relativeTime } from '../../utils';
+import { ArrowUpIcon, Chevron } from '../icons';
 import {
-  PressableRow,
-  PrimaryButton,
+  IconButton,
   StatusIndicator,
   textStyles,
   TypeChipView,
 } from '../primitives';
 
+/** Consecutive messages from one sender inside this window form a group. */
+const GROUP_WINDOW_MS = 5 * 60 * 1000;
+/** The counter only appears once the limit is actually in play. */
+const COUNTER_VISIBLE_FROM = USER_MESSAGE_MAX - 60;
+
+interface Row {
+  message: ThreadMessage;
+  firstInGroup: boolean;
+  lastInGroup: boolean;
+  /** Date separator to draw above this message, if any. */
+  day: string | null;
+  /** "New" separator above the first message the user hasn't seen. */
+  startsUnread: boolean;
+}
+
+function buildRows(messages: ThreadMessage[], unreadCount: number): Row[] {
+  // Unread messages are always the newest admin ones, so the divider goes
+  // above the Nth-from-last admin message.
+  let remaining = unreadCount;
+  let firstUnreadId: string | null = null;
+  for (let i = messages.length - 1; i >= 0 && remaining > 0; i -= 1) {
+    const candidate = messages[i];
+    if (candidate === undefined || candidate.sender !== 'admin') continue;
+    remaining -= 1;
+    firstUnreadId = candidate.id;
+  }
+
+  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;
+    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)
+        : null;
+    const startsUnread = message.id === firstUnreadId;
+
+    return {
+      message,
+      // A separator always breaks a group.
+      firstInGroup: day !== null || startsUnread || !withinGroup(previous, message),
+      lastInGroup:
+        next === null ||
+        next.id === firstUnreadId ||
+        !isSameDay(next.created_at, message.created_at) ||
+        !withinGroup(next, message),
+      day,
+      startsUnread,
+    };
+  });
+}
+
+function Separator({
+  label,
+  theme,
+  tone = 'muted',
+}: {
+  label: string;
+  theme: SupportTheme;
+  tone?: 'muted' | 'accent';
+}) {
+  const color =
+    tone === 'accent' ? theme.colors.accent : theme.colors.textTertiary;
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        paddingVertical: 6,
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          height: 1,
+          backgroundColor:
+            tone === 'accent' ? theme.colors.accentMuted : theme.colors.border,
+        }}
+      />
+      <Text
+        style={{
+          fontSize: 11,
+          fontWeight: '600',
+          letterSpacing: 0.3,
+          color,
+        }}
+      >
+        {label}
+      </Text>
+      <View
+        style={{
+          flex: 1,
+          height: 1,
+          backgroundColor:
+            tone === 'accent' ? theme.colors.accentMuted : theme.colors.border,
+        }}
+      />
+    </View>
+  );
+}
+
+function MessageBubble({ row, theme }: { row: Row; theme: SupportTheme }) {
+  const { message, firstInGroup, lastInGroup } = row;
+  const own = message.sender === 'user';
+  const round = theme.radii.bubble;
+  const tight = theme.radii.bubbleTail;
+
+  return (
+    <View
+      style={{
+        maxWidth: '86%',
+        alignSelf: own ? 'flex-end' : 'flex-start',
+        alignItems: own ? 'flex-end' : 'flex-start',
+        marginTop: firstInGroup ? 10 : 2,
+        gap: 4,
+      }}
+    >
+      {!own && firstInGroup && (
+        <Text style={[textStyles.meta(theme), { paddingHorizontal: 4 }]}>
+          {message.admin_name ?? 'Support'}
+        </Text>
+      )}
+      <View
+        style={{
+          paddingHorizontal: 14,
+          paddingVertical: 10,
+          backgroundColor: own ? theme.colors.accent : theme.colors.surface,
+          borderWidth: own ? 0 : 1,
+          borderColor: theme.colors.border,
+          borderTopLeftRadius: own || firstInGroup ? round : tight,
+          borderBottomLeftRadius: own || lastInGroup ? round : tight,
+          borderTopRightRadius: !own || firstInGroup ? round : tight,
+          borderBottomRightRadius: !own || lastInGroup ? round : tight,
+        }}
+      >
+        <Text
+          style={[
+            textStyles.body(theme),
+            own && { color: theme.colors.accentForeground },
+          ]}
+        >
+          {message.body}
+        </Text>
+      </View>
+      {lastInGroup && (
+        <Text style={[textStyles.meta(theme), { paddingHorizontal: 4 }]}>
+          {formatTime(message.created_at)}
+        </Text>
+      )}
+    </View>
+  );
+}
+
 export function ThreadScreen({
   theme,
   thread,
@@ -36,11 +195,20 @@ export function ThreadScreen({
   const [sending, setSending] = useState(false);
   const [failedMessage, setFailedMessage] = useState<string | null>(null);
   const scrollRef = useRef<ScrollView>(null);
+  // Captured once: opening the thread marks it read within a tick, but the
+  // "New" divider should stay put while the user is reading.
+  const [unreadOnOpen] = useState(thread.unread_count);
 
   const resolved = thread.status === 'resolved';
   const trimmed = draft.trim();
   const valid =
     trimmed.length >= USER_MESSAGE_MIN && trimmed.length <= USER_MESSAGE_MAX;
+  const tooShort = trimmed.length > 0 && trimmed.length < USER_MESSAGE_MIN;
+
+  const rows = useMemo(
+    () => buildRows(thread.messages, unreadOnOpen),
+    [thread.messages, unreadOnOpen],
+  );
 
   useEffect(() => {
     scrollRef.current?.scrollToEnd({ animated: false });
@@ -66,21 +234,21 @@ export function ThreadScreen({
         style={{
           flexDirection: 'row',
           alignItems: 'center',
-          gap: 8,
+          gap: 10,
           paddingHorizontal: 12,
-          paddingBottom: 10,
+          paddingBottom: 12,
           borderBottomWidth: 1,
           borderBottomColor: theme.colors.border,
         }}
       >
-        <PressableRow
+        <IconButton
           onPress={onBack}
           theme={theme}
-          accessibilityLabel="Back"
-          style={{ padding: 6, borderRadius: theme.radii.control }}
+          accessibilityLabel="Back to conversations"
+          size={32}
         >
           <Chevron color={theme.colors.textSecondary} direction="left" size={12} />
-        </PressableRow>
+        </IconButton>
         <TypeChipView type={thread.type} theme={theme} />
         <StatusIndicator status={thread.status} theme={theme} />
         <Text style={[textStyles.meta(theme), { marginLeft: 'auto' }]}>
@@ -92,54 +260,30 @@ export function ThreadScreen({
       <ScrollView
         ref={scrollRef}
         style={{ flex: 1 }}
-        contentContainerStyle={{ padding: 16, gap: 10 }}
+        contentContainerStyle={{ paddingHorizontal: 16, paddingVertical: 12 }}
+        keyboardShouldPersistTaps="handled"
+        onContentSizeChange={() =>
+          scrollRef.current?.scrollToEnd({ animated: false })
+        }
       >
-        {thread.messages.map((m) => {
-          const own = m.sender === 'user';
-          return (
-            <View
-              key={m.id}
-              style={{
-                maxWidth: '85%',
-                alignSelf: own ? 'flex-end' : 'flex-start',
-                alignItems: own ? 'flex-end' : 'flex-start',
-                gap: 3,
-              }}
-            >
-              {!own && (
-                <Text style={textStyles.meta(theme)}>
-                  {m.admin_name ?? 'Support'}
-                </Text>
-              )}
-              <View
-                style={{
-                  borderRadius: theme.radii.card,
-                  paddingHorizontal: 12,
-                  paddingVertical: 8,
-                  backgroundColor: own
-                    ? theme.colors.accentMuted
-                    : theme.colors.surface,
-                  borderWidth: own ? 0 : 1,
-                  borderColor: theme.colors.border,
-                }}
-              >
-                <Text style={textStyles.body(theme)}>{m.body}</Text>
-              </View>
-              <Text style={textStyles.meta(theme)}>
-                {relativeTime(m.created_at)}
-              </Text>
-            </View>
-          );
-        })}
-
-        {resolved && thread.resolved_at && (
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, marginVertical: 6 }}>
-            <View style={{ flex: 1, height: 1, backgroundColor: theme.colors.border }} />
-            <Text style={textStyles.meta(theme)}>
-              Resolved by {thread.resolved_by_name ?? 'support'} ·{' '}
-              {formatDate(thread.resolved_at)}
-            </Text>
-            <View style={{ flex: 1, height: 1, backgroundColor: theme.colors.border }} />
+        {rows.map((row) => (
+          <View key={row.message.id}>
+            {row.day !== null && <Separator label={row.day} theme={theme} />}
+            {row.startsUnread && (
+              <Separator label="New" theme={theme} tone="accent" />
+            )}
+            <MessageBubble row={row} theme={theme} />
+          </View>
+        ))}
+
+        {resolved && thread.resolved_at !== null && (
+          <View style={{ marginTop: 16 }}>
+            <Separator
+              label={`Resolved by ${thread.resolved_by_name ?? 'support'} · ${formatDate(
+                thread.resolved_at,
+              )}`}
+              theme={theme}
+            />
           </View>
         )}
       </ScrollView>
@@ -151,74 +295,100 @@ export function ThreadScreen({
           borderTopColor: theme.colors.border,
           paddingHorizontal: 16,
           paddingTop: 10,
+          paddingBottom: 4,
         }}
       >
         {resolved ? (
-          <Text
-            style={[
-              textStyles.meta(theme),
-              { textAlign: 'center', paddingVertical: 8 },
-            ]}
+          <View
+            style={{
+              alignItems: 'center',
+              paddingVertical: 10,
+              borderRadius: theme.radii.control,
+              backgroundColor: theme.colors.surface,
+            }}
           >
-            This thread is resolved and read-only
-          </Text>
+            <Text style={textStyles.secondary(theme)}>
+              This conversation is resolved and read-only
+            </Text>
+          </View>
         ) : (
           <>
-            <TextInput
-              value={draft}
-              onChangeText={(v) => {
-                setDraft(v);
-                setFailedMessage(null);
-              }}
-              multiline
-              placeholder="Reply"
-              placeholderTextColor={theme.colors.textTertiary}
-              style={{
-                minHeight: 60,
-                maxHeight: 120,
-                borderWidth: 1,
-                borderColor: theme.colors.border,
-                borderRadius: theme.radii.control,
-                backgroundColor: theme.colors.surface,
-                color: theme.colors.textPrimary,
-                fontSize: 14,
-                lineHeight: 20,
-                padding: 10,
-                textAlignVertical: 'top',
-              }}
-            />
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 12,
-                paddingVertical: 8,
-              }}
-            >
-              <Text
-                style={[
-                  textStyles.meta(theme),
-                  draft.length > USER_MESSAGE_MAX && {
-                    color: theme.colors.statusDanger,
-                  },
-                ]}
+            <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 10 }}>
+              <TextInput
+                value={draft}
+                onChangeText={(v) => {
+                  setDraft(v);
+                  setFailedMessage(null);
+                }}
+                multiline
+                editable={!sending}
+                placeholder="Write a reply…"
+                placeholderTextColor={theme.colors.textTertiary}
+                style={{
+                  flex: 1,
+                  minHeight: 44,
+                  maxHeight: 120,
+                  borderWidth: 1,
+                  borderColor: theme.colors.border,
+                  borderRadius: theme.radii.cardLg,
+                  backgroundColor: theme.colors.surface,
+                  color: theme.colors.textPrimary,
+                  fontSize: 15,
+                  lineHeight: 20,
+                  paddingHorizontal: 14,
+                  paddingTop: 12,
+                  paddingBottom: 12,
+                  textAlignVertical: 'top',
+                }}
+              />
+              <IconButton
+                onPress={handleSend}
+                theme={theme}
+                tone="accent"
+                size={44}
+                disabled={!valid || sending}
+                accessibilityLabel={sending ? 'Sending' : 'Send reply'}
               >
-                {draft.length}/{USER_MESSAGE_MAX}
-              </Text>
-              {failedMessage !== null && (
-                <Text style={{ fontSize: 11, color: theme.colors.statusDanger }}>
-                  {failedMessage}
-                </Text>
-              )}
-              <View style={{ marginLeft: 'auto' }}>
-                <PrimaryButton
-                  label={sending ? 'Sending…' : 'Send'}
-                  onPress={handleSend}
-                  disabled={!valid || sending}
-                  theme={theme}
-                />
-              </View>
+                <ArrowUpIcon color={theme.colors.accentForeground} size={19} />
+              </IconButton>
             </View>
+
+            {(tooShort ||
+              draft.length >= COUNTER_VISIBLE_FROM ||
+              failedMessage !== null) && (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 10,
+                  paddingTop: 8,
+                  paddingHorizontal: 4,
+                }}
+              >
+                {failedMessage !== null ? (
+                  <Text style={{ fontSize: 12, color: theme.colors.statusDanger }}>
+                    {failedMessage}
+                  </Text>
+                ) : tooShort ? (
+                  <Text style={textStyles.meta(theme)}>
+                    At least {USER_MESSAGE_MIN} characters
+                  </Text>
+                ) : null}
+                {draft.length >= COUNTER_VISIBLE_FROM && (
+                  <Text
+                    style={[
+                      textStyles.meta(theme),
+                      { marginLeft: 'auto' },
+                      draft.length > USER_MESSAGE_MAX && {
+                        color: theme.colors.statusDanger,
+                      },
+                    ]}
+                  >
+                    {draft.length}/{USER_MESSAGE_MAX}
+                  </Text>
+                )}
+              </View>
+            )}
           </>
         )}
       </View>

package/src/index.tsx

@@ -8,6 +8,7 @@ export {
 export { SupportApiError } from './api';
 export { isPushAvailable } from './push';
 export type {
+  LauncherVariant,
   MessageSender,
   PushPermissionStatus,
   QueryStatus,

package/src/theme.ts

@@ -1,5 +1,7 @@
 // The SDK consumes the same design tokens as the admin dashboard, so both
-// surfaces look like one product.
+// surfaces look like one product. On top of those it adds the few values
+// that only exist on mobile: sheet/bubble radii and the elevation used by
+// the launcher and the sheet (the web side gets those from CSS).
 import {
   darkColors,
   lightColors,
@@ -8,32 +10,177 @@ import {
   spacing,
   type ThemeColors,
 } from '@appsupportkit/design-tokens';
+import type { ViewStyle } from 'react-native';
 import type { ThemeName } from './types';
 
+/** Rounder than the dashboard: touch targets read better with more radius. */
+export const supportRadii = {
+  ...radii,
+  control: 10,
+  card: 14,
+  cardLg: 18,
+  /** Message bubbles. */
+  bubble: 18,
+  /** The tight corner on a bubble's sender side. */
+  bubbleTail: 6,
+  sheet: 24,
+  pill: 999,
+} as const;
+
+export interface SupportShadows {
+  /** Floating launcher button. */
+  launcher: ViewStyle;
+  /** The bottom sheet itself. */
+  sheet: ViewStyle;
+  /** Unread badge, so it lifts off the button. */
+  badge: ViewStyle;
+}
+
+/**
+ * The launcher sits on the host app's own background rather than on an SDK
+ * surface, so the two themes need different treatment: on near-black a
+ * solid fill needs a hairline to separate from the background and a black
+ * shadow, while on white the accent-tinted shadow does that work and a
+ * borderless mark has to be darkened to stay legible.
+ */
+export interface LauncherPalette {
+  /** Hairline drawn over the solid fill. */
+  solidRing: string;
+  /** Mark color for the borderless (minimal) variant. */
+  minimalMark: string;
+}
+
 export interface SupportTheme {
   name: ThemeName;
   colors: ThemeColors;
   spacing: typeof spacing;
-  radii: typeof radii;
+  radii: typeof supportRadii;
   motion: typeof motion;
+  shadows: SupportShadows;
+  launcher: LauncherPalette;
 }
 
-export const supportDarkTheme: SupportTheme = {
-  name: 'dark',
-  colors: darkColors,
-  spacing,
-  radii,
-  motion,
-};
+// Color helpers come first: the themes below are built at module load, so
+// anything they reach for has to already be initialized. (A `const` used
+// before its definition survives tsc but lands as `undefined` on Hermes.)
+const HEX = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
 
-export const supportLightTheme: SupportTheme = {
-  name: 'light',
-  colors: lightColors,
-  spacing,
-  radii,
-  motion,
-};
+function parseHex(color: string): [number, number, number] | null {
+  const match = HEX.exec(color.trim());
+  const digits = match?.[1];
+  if (digits === undefined) return null;
+  const hex =
+    digits.length === 3
+      ? digits
+          .split('')
+          .map((c) => c + c)
+          .join('')
+      : digits;
+  return [
+    parseInt(hex.slice(0, 2), 16),
+    parseInt(hex.slice(2, 4), 16),
+    parseInt(hex.slice(4, 6), 16),
+  ];
+}
+
+function mix([r, g, b]: [number, number, number], target: number, amount: number) {
+  const channel = (c: number) => Math.round(c + (target - c) * amount);
+  return `rgb(${channel(r)}, ${channel(g)}, ${channel(b)})`;
+}
+
+function shadowsFor(name: ThemeName, accent: string): SupportShadows {
+  const dark = name === 'dark';
+  return {
+    launcher: {
+      // Tinting the launcher's shadow with the accent is what makes it read
+      // as lifted rather than pasted on.
+      shadowColor: dark ? '#000000' : accent,
+      shadowOpacity: dark ? 0.45 : 0.3,
+      shadowRadius: 14,
+      shadowOffset: { width: 0, height: 6 },
+      elevation: 8,
+    },
+    sheet: {
+      shadowColor: '#000000',
+      shadowOpacity: dark ? 0.5 : 0.16,
+      shadowRadius: 24,
+      shadowOffset: { width: 0, height: -6 },
+      elevation: 24,
+    },
+    badge: {
+      shadowColor: '#000000',
+      shadowOpacity: 0.25,
+      shadowRadius: 3,
+      shadowOffset: { width: 0, height: 1 },
+      elevation: 3,
+    },
+  };
+}
+
+function launcherFor(name: ThemeName, accent: string): LauncherPalette {
+  const rgb = parseHex(accent);
+  return {
+    solidRing:
+      name === 'dark' ? 'rgba(255, 255, 255, 0.14)' : 'rgba(0, 0, 0, 0.06)',
+    // On a dark app background the raw accent is too close to the surface
+    // to read as a glyph; lift it toward white.
+    minimalMark:
+      name === 'dark' && rgb !== null ? mix(rgb, 255, 0.35) : accent,
+  };
+}
+
+function buildTheme(name: ThemeName, colors: ThemeColors): SupportTheme {
+  return {
+    name,
+    colors,
+    spacing,
+    radii: supportRadii,
+    motion,
+    shadows: shadowsFor(name, colors.accent),
+    launcher: launcherFor(name, colors.accent),
+  };
+}
+
+export const supportDarkTheme: SupportTheme = buildTheme('dark', darkColors);
+export const supportLightTheme: SupportTheme = buildTheme('light', lightColors);
+
+/**
+ * Derives the accent family from a single brand color: a pressed shade, the
+ * 12% wash used behind chips and own-message bubbles, and a foreground that
+ * stays legible on top (dark text on light brands, white on dark ones).
+ */
+function withAccent(theme: SupportTheme, accent: string): SupportTheme {
+  const rgb = parseHex(accent);
+  if (!rgb) return theme;
+  const [r, g, b] = rgb;
+  // Relative luminance, sRGB coefficients — good enough to pick a foreground.
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  const colors: ThemeColors = {
+    ...theme.colors,
+    accent,
+    accentHover: mix(rgb, theme.name === 'dark' ? 255 : 0, 0.12),
+    accentMuted: `rgba(${r}, ${g}, ${b}, 0.12)`,
+    accentForeground: luminance > 0.62 ? '#111113' : '#FFFFFF',
+    statusOpen: accent,
+    statusOpenBg: `rgba(${r}, ${g}, ${b}, 0.10)`,
+    focusRing: accent,
+  };
+  return {
+    ...theme,
+    colors,
+    shadows: shadowsFor(theme.name, accent),
+    launcher: launcherFor(theme.name, accent),
+  };
+}
 
-export function resolveTheme(name: ThemeName | undefined): SupportTheme {
-  return name === 'light' ? supportLightTheme : supportDarkTheme;
+/**
+ * @param name  "light" | "dark" (default dark).
+ * @param accentColor Optional brand color (hex) replacing the default accent.
+ */
+export function resolveTheme(
+  name: ThemeName | undefined,
+  accentColor?: string,
+): SupportTheme {
+  const base = name === 'light' ? supportLightTheme : supportDarkTheme;
+  return accentColor ? withAccent(base, accentColor) : base;
 }