@appsupportkit/support-sdk 0.1.0

package/src/components/screens/HomeScreen.tsx

@@ -0,0 +1,234 @@
+import { ScrollView, Text, View } from 'react-native';
+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 {
+  EmptyState,
+  ErrorState,
+  PressableRow,
+  SkeletonBlock,
+  textStyles,
+  typeColor,
+  typeIcon,
+} from '../primitives';
+
+const COMPOSE_TYPES: QueryType[] = ['feedback', 'feature_request', 'bug_report'];
+
+function ThreadRow({
+  thread,
+  theme,
+  onPress,
+}: {
+  thread: Thread;
+  theme: SupportTheme;
+  onPress: () => void;
+}) {
+  const preview = thread.last_message?.body ?? '';
+  return (
+    <PressableRow
+      onPress={onPress}
+      theme={theme}
+      accessibilityLabel={`${QUERY_TYPE_LABEL[thread.type]} thread`}
+      style={{
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: theme.colors.border,
+      }}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+        {thread.unread_count > 0 && (
+          <View
+            style={{
+              width: 6,
+              height: 6,
+              borderRadius: 3,
+              backgroundColor: theme.colors.accent,
+            }}
+          />
+        )}
+        <Text style={{ fontSize: 11, fontWeight: '500', color: typeColor(thread.type, theme) }}>
+          {QUERY_TYPE_LABEL[thread.type]}
+        </Text>
+        <Text style={[textStyles.meta(theme), { marginLeft: 'auto' }]}>
+          {thread.last_message
+            ? relativeTime(thread.last_message.created_at)
+            : relativeTime(thread.created_at)}
+        </Text>
+      </View>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 3 }}>
+        <Text
+          numberOfLines={1}
+          style={{
+            flex: 1,
+            fontSize: 13,
+            color:
+              thread.unread_count > 0
+                ? theme.colors.textPrimary
+                : theme.colors.textSecondary,
+            fontWeight: thread.unread_count > 0 ? '500' : '400',
+          }}
+        >
+          {preview}
+        </Text>
+        <Chevron color={theme.colors.textTertiary} />
+      </View>
+    </PressableRow>
+  );
+}
+
+export function HomeScreen({
+  theme,
+  threads,
+  loading,
+  error,
+  onRetry,
+  onCompose,
+  onOpenThread,
+  onClose,
+}: {
+  theme: SupportTheme;
+  threads: Thread[] | null;
+  loading: boolean;
+  error: string | null;
+  onRetry: () => void;
+  onCompose: (type: QueryType) => void;
+  onOpenThread: (thread: Thread) => void;
+  onClose: () => void;
+}) {
+  const open = (threads ?? []).filter((t) => t.status === 'open');
+  const resolved = (threads ?? []).filter((t) => t.status === 'resolved');
+
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Header */}
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: 16,
+          paddingBottom: 12,
+        }}
+      >
+        <Text style={textStyles.title(theme)}>Support</Text>
+        <PressableRow
+          onPress={onClose}
+          theme={theme}
+          accessibilityLabel="Close"
+          style={{ marginLeft: 'auto', padding: 6, borderRadius: theme.radii.control }}
+        >
+          <CloseIcon color={theme.colors.textSecondary} size={13} />
+        </PressableRow>
+      </View>
+
+      <ScrollView style={{ flex: 1 }}>
+        {/* Compose actions */}
+        <View
+          style={{
+            marginHorizontal: 16,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            borderRadius: theme.radii.card,
+            backgroundColor: theme.colors.surface,
+            overflow: 'hidden',
+          }}
+        >
+          {COMPOSE_TYPES.map((type, i) => (
+            <PressableRow
+              key={type}
+              onPress={() => onCompose(type)}
+              theme={theme}
+              accessibilityLabel={`New ${QUERY_TYPE_LABEL[type].toLowerCase()}`}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                paddingHorizontal: 14,
+                paddingVertical: 12,
+                borderTopWidth: i === 0 ? 0 : 1,
+                borderTopColor: theme.colors.border,
+              }}
+            >
+              {typeIcon(type, typeColor(type, theme))}
+              <Text style={{ fontSize: 14, color: theme.colors.textPrimary, flex: 1 }}>
+                {QUERY_TYPE_LABEL[type]}
+              </Text>
+              <Chevron color={theme.colors.textTertiary} />
+            </PressableRow>
+          ))}
+        </View>
+
+        {/* Threads */}
+        {error ? (
+          <ErrorState message={error} onRetry={onRetry} theme={theme} />
+        ) : loading && threads === null ? (
+          <View style={{ paddingHorizontal: 16, paddingTop: 24, gap: 14 }}>
+            <SkeletonBlock width={80} height={12} theme={theme} />
+            <SkeletonBlock width="100%" height={40} theme={theme} />
+            <SkeletonBlock width="100%" height={40} theme={theme} />
+          </View>
+        ) : (threads ?? []).length === 0 ? (
+          <EmptyState message="No queries yet" theme={theme} />
+        ) : (
+          <>
+            {open.length > 0 && (
+              <>
+                <Text
+                  style={{
+                    fontSize: 11,
+                    fontWeight: '500',
+                    textTransform: 'uppercase',
+                    letterSpacing: 0.4,
+                    color: theme.colors.textTertiary,
+                    paddingHorizontal: 16,
+                    paddingTop: 20,
+                    paddingBottom: 6,
+                  }}
+                >
+                  Open
+                </Text>
+                {open.map((t) => (
+                  <ThreadRow
+                    key={t.id}
+                    thread={t}
+                    theme={theme}
+                    onPress={() => onOpenThread(t)}
+                  />
+                ))}
+              </>
+            )}
+            {resolved.length > 0 && (
+              <>
+                <Text
+                  style={{
+                    fontSize: 11,
+                    fontWeight: '500',
+                    textTransform: 'uppercase',
+                    letterSpacing: 0.4,
+                    color: theme.colors.textTertiary,
+                    paddingHorizontal: 16,
+                    paddingTop: 20,
+                    paddingBottom: 6,
+                  }}
+                >
+                  Resolved
+                </Text>
+                {resolved.map((t) => (
+                  <ThreadRow
+                    key={t.id}
+                    thread={t}
+                    theme={theme}
+                    onPress={() => onOpenThread(t)}
+                  />
+                ))}
+              </>
+            )}
+            <View style={{ height: 16 }} />
+          </>
+        )}
+      </ScrollView>
+    </View>
+  );
+}

package/src/components/screens/ThreadScreen.tsx

@@ -0,0 +1,227 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import type { SupportTheme } from '../../theme';
+import type { Thread } from '../../types';
+import { USER_MESSAGE_MAX, USER_MESSAGE_MIN } from '../../types';
+import { formatDate, relativeTime } from '../../utils';
+import { Chevron } from '../icons';
+import {
+  PressableRow,
+  PrimaryButton,
+  StatusIndicator,
+  textStyles,
+  TypeChipView,
+} from '../primitives';
+
+export function ThreadScreen({
+  theme,
+  thread,
+  onBack,
+  onSend,
+}: {
+  theme: SupportTheme;
+  thread: Thread;
+  onBack: () => void;
+  /** Resolves true on success. */
+  onSend: (message: string) => Promise<boolean>;
+}) {
+  const [draft, setDraft] = useState('');
+  const [sending, setSending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const scrollRef = useRef<ScrollView>(null);
+
+  const resolved = thread.status === 'resolved';
+  const trimmed = draft.trim();
+  const valid =
+    trimmed.length >= USER_MESSAGE_MIN && trimmed.length <= USER_MESSAGE_MAX;
+
+  useEffect(() => {
+    scrollRef.current?.scrollToEnd({ animated: false });
+  }, [thread.messages.length]);
+
+  async function handleSend() {
+    if (!valid || sending || resolved) return;
+    setSending(true);
+    setFailed(false);
+    const ok = await onSend(trimmed);
+    setSending(false);
+    if (ok) setDraft('');
+    else setFailed(true);
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      {/* Header */}
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8,
+          paddingHorizontal: 12,
+          paddingBottom: 10,
+          borderBottomWidth: 1,
+          borderBottomColor: theme.colors.border,
+        }}
+      >
+        <PressableRow
+          onPress={onBack}
+          theme={theme}
+          accessibilityLabel="Back"
+          style={{ padding: 6, borderRadius: theme.radii.control }}
+        >
+          <Chevron color={theme.colors.textSecondary} direction="left" size={12} />
+        </PressableRow>
+        <TypeChipView type={thread.type} theme={theme} />
+        <StatusIndicator status={thread.status} theme={theme} />
+        <Text style={[textStyles.meta(theme), { marginLeft: 'auto' }]}>
+          {relativeTime(thread.created_at)}
+        </Text>
+      </View>
+
+      {/* Messages */}
+      <ScrollView
+        ref={scrollRef}
+        style={{ flex: 1 }}
+        contentContainerStyle={{ padding: 16, gap: 10 }}
+      >
+        {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 }} />
+          </View>
+        )}
+      </ScrollView>
+
+      {/* Composer */}
+      <View
+        style={{
+          borderTopWidth: 1,
+          borderTopColor: theme.colors.border,
+          paddingHorizontal: 16,
+          paddingTop: 10,
+        }}
+      >
+        {resolved ? (
+          <Text
+            style={[
+              textStyles.meta(theme),
+              { textAlign: 'center', paddingVertical: 8 },
+            ]}
+          >
+            This thread is resolved and read-only
+          </Text>
+        ) : (
+          <>
+            <TextInput
+              value={draft}
+              onChangeText={(v) => {
+                setDraft(v);
+                setFailed(false);
+              }}
+              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,
+                  },
+                ]}
+              >
+                {draft.length}/{USER_MESSAGE_MAX}
+              </Text>
+              {failed && (
+                <Text style={{ fontSize: 11, color: theme.colors.statusDanger }}>
+                  Couldn&apos;t send — try again
+                </Text>
+              )}
+              <View style={{ marginLeft: 'auto' }}>
+                <PrimaryButton
+                  label={sending ? 'Sending…' : 'Send'}
+                  onPress={handleSend}
+                  disabled={!valid || sending}
+                  theme={theme}
+                />
+              </View>
+            </View>
+          </>
+        )}
+      </View>
+    </KeyboardAvoidingView>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,24 @@
+export { SupportButton } from './components/SupportButton';
+export {
+  supportDarkTheme,
+  supportLightTheme,
+  resolveTheme,
+  type SupportTheme,
+} from './theme';
+export { SupportApiError } from './api';
+export type {
+  MessageSender,
+  QueryStatus,
+  QueryType,
+  SupportButtonProps,
+  SupportUser,
+  Thread,
+  ThreadMessage,
+  ThreadsResponse,
+  ThemeName,
+} from './types';
+export {
+  QUERY_TYPE_LABEL,
+  USER_MESSAGE_MAX,
+  USER_MESSAGE_MIN,
+} from './types';

package/src/theme.ts

@@ -0,0 +1,39 @@
+// The SDK consumes the same design tokens as the admin dashboard, so both
+// surfaces look like one product.
+import {
+  darkColors,
+  lightColors,
+  motion,
+  radii,
+  spacing,
+  type ThemeColors,
+} from '@appsupportkit/design-tokens';
+import type { ThemeName } from './types';
+
+export interface SupportTheme {
+  name: ThemeName;
+  colors: ThemeColors;
+  spacing: typeof spacing;
+  radii: typeof radii;
+  motion: typeof motion;
+}
+
+export const supportDarkTheme: SupportTheme = {
+  name: 'dark',
+  colors: darkColors,
+  spacing,
+  radii,
+  motion,
+};
+
+export const supportLightTheme: SupportTheme = {
+  name: 'light',
+  colors: lightColors,
+  spacing,
+  radii,
+  motion,
+};
+
+export function resolveTheme(name: ThemeName | undefined): SupportTheme {
+  return name === 'light' ? supportLightTheme : supportDarkTheme;
+}

package/src/types.ts

@@ -0,0 +1,71 @@
+export type QueryType = 'feedback' | 'feature_request' | 'bug_report';
+export type QueryStatus = 'open' | 'resolved';
+export type MessageSender = 'user' | 'admin';
+export type ThemeName = 'dark' | 'light';
+
+export interface SupportUser {
+  /** Display name shown to the support team. */
+  name: string;
+  /** Whether the user is on a paid plan. */
+  isPaid: boolean;
+  /** RevenueCat app user id — identifies the user's threads. */
+  revenuecatId: string;
+  /** Host app version, e.g. "2.4.1". */
+  appVersion: string;
+}
+
+export interface SupportButtonProps {
+  /** App name as registered in the admin dashboard. Required. */
+  appName: string;
+  /** Per-app API key (sk_support_…). Required. Keep it in secret config. */
+  apiKey: string;
+  /** The current end user. Required. */
+  user: SupportUser;
+  /**
+   * Base URL of the Supabase project hosting the support backend,
+   * e.g. "https://abcd1234.supabase.co". Required — the SDK talks to its
+   * Edge Functions.
+   */
+  supabaseUrl: string;
+  /** Visual theme. Matches the admin dashboard tokens. Default "dark". */
+  theme?: ThemeName;
+}
+
+export interface ThreadMessage {
+  id: string;
+  sender: MessageSender;
+  body: string;
+  created_at: string;
+  admin_name: string | null;
+}
+
+export interface Thread {
+  id: string;
+  type: QueryType;
+  status: QueryStatus;
+  created_at: string;
+  resolved_at: string | null;
+  resolved_by_name: string | null;
+  app_version: string;
+  unread_count: number;
+  last_message: {
+    body: string;
+    sender: MessageSender;
+    created_at: string;
+  } | null;
+  messages: ThreadMessage[];
+}
+
+export interface ThreadsResponse {
+  threads: Thread[];
+  total_unread: number;
+}
+
+export const QUERY_TYPE_LABEL: Record<QueryType, string> = {
+  feedback: 'Feedback',
+  feature_request: 'Feature request',
+  bug_report: 'Bug report',
+};
+
+export const USER_MESSAGE_MIN = 10;
+export const USER_MESSAGE_MAX = 300;

package/src/utils.ts

@@ -0,0 +1,63 @@
+/** "2h ago" relative time — mirrors the web dashboard's formatting. */
+export function relativeTime(iso: string): string {
+  const then = new Date(iso).getTime();
+  const seconds = Math.max(0, Math.floor((Date.now() - then) / 1000));
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  const weeks = Math.floor(days / 7);
+  if (weeks < 5) return `${weeks}w ago`;
+  const months = Math.floor(days / 30);
+  if (months < 12) return `${months}mo ago`;
+  return `${Math.floor(days / 365)}y ago`;
+}
+
+export function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+/** Dev-mode prop validation with actionable messages. */
+export function validateProps(props: {
+  appName?: unknown;
+  apiKey?: unknown;
+  supabaseUrl?: unknown;
+  user?: unknown;
+}): string | null {
+  if (typeof props.appName !== 'string' || props.appName.length === 0) {
+    return 'SupportButton: `appName` is required — the app name registered in the admin dashboard.';
+  }
+  if (typeof props.apiKey !== 'string' || props.apiKey.length === 0) {
+    return 'SupportButton: `apiKey` is required — the key shown once when the app was registered.';
+  }
+  if (
+    typeof props.supabaseUrl !== 'string' ||
+    !/^https?:\/\//.test(props.supabaseUrl)
+  ) {
+    return 'SupportButton: `supabaseUrl` is required — your Supabase project URL, e.g. "https://abcd1234.supabase.co".';
+  }
+  const user = props.user as Record<string, unknown> | undefined;
+  if (!user || typeof user !== 'object') {
+    return 'SupportButton: `user` is required — { name, isPaid, revenuecatId, appVersion }.';
+  }
+  if (typeof user.name !== 'string' || user.name.length === 0) {
+    return 'SupportButton: `user.name` is required (string).';
+  }
+  if (typeof user.isPaid !== 'boolean') {
+    return 'SupportButton: `user.isPaid` is required (boolean).';
+  }
+  if (typeof user.revenuecatId !== 'string' || user.revenuecatId.length === 0) {
+    return 'SupportButton: `user.revenuecatId` is required (string) — the RevenueCat app user id.';
+  }
+  if (typeof user.appVersion !== 'string' || user.appVersion.length === 0) {
+    return 'SupportButton: `user.appVersion` is required (string), e.g. "2.4.1".';
+  }
+  return null;
+}