@appsupportkit/support-sdk 0.2.0 → 0.4.0

package/lib/typescript/components/screens/HomeScreen.d.ts

@@ -1,14 +0,0 @@
-import type { SupportTheme } from '../../theme';
-import type { QueryType, Thread } from '../../types';
-export declare function HomeScreen({ theme, threads, loading, refreshing, error, onRefresh, onCompose, onOpenThread, onClose, }: {
-    theme: SupportTheme;
-    threads: Thread[] | null;
-    loading: boolean;
-    refreshing: boolean;
-    error: string | null;
-    onRefresh: () => void;
-    onCompose: (type: QueryType) => void;
-    onOpenThread: (thread: Thread) => void;
-    onClose: () => void;
-}): import("react").JSX.Element;
-//# sourceMappingURL=HomeScreen.d.ts.map

package/lib/typescript/components/screens/HomeScreen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HomeScreen.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/HomeScreen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AA+IrD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,UAAU,EACV,KAAK,EACL,SAAS,EACT,SAAS,EACT,YAAY,EACZ,OAAO,GACR,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,+BAyHA"}

package/lib/typescript/components/screens/ThreadScreen.d.ts

@@ -1,10 +0,0 @@
-import type { SupportTheme } from '../../theme';
-import type { Thread } from '../../types';
-export declare function ThreadScreen({ theme, thread, onBack, onSend, }: {
-    theme: SupportTheme;
-    thread: Thread;
-    onBack: () => void;
-    /** Resolves null on success, or a user-facing error message. */
-    onSend: (message: string) => Promise<string | null>;
-}): import("react").JSX.Element;
-//# sourceMappingURL=ThreadScreen.d.ts.map

package/lib/typescript/components/screens/ThreadScreen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThreadScreen.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/ThreadScreen.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,aAAa,CAAC;AA2KzD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,gEAAgE;IAChE,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACrD,+BA4MA"}

package/src/components/screens/ComposeScreen.tsx

@@ -1,233 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import {
-  Animated,
-  Easing,
-  KeyboardAvoidingView,
-  Platform,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
-import type { SupportTheme } from '../../theme';
-import type { QueryType } from '../../types';
-import { QUERY_TYPE_LABEL, USER_MESSAGE_MAX, USER_MESSAGE_MIN } from '../../types';
-import { CheckIcon, Chevron } from '../icons';
-import {
-  IconButton,
-  PrimaryButton,
-  textStyles,
-  TypeGlyph,
-} from '../primitives';
-
-const PROMPT: Record<QueryType, string> = {
-  feedback: 'What should we know?',
-  feature_request: 'What would you like to see?',
-  bug_report: 'What happened, and what did you expect?',
-};
-
-const SUBTITLE: Record<QueryType, string> = {
-  feedback: 'Good or bad — it goes straight to the team.',
-  feature_request: 'Tell us what you are trying to do.',
-  bug_report: 'Steps, screen, and what you expected all help.',
-};
-
-/** Scales in once on success — the only celebratory motion in the SDK. */
-function SentMark({ theme }: { theme: SupportTheme }) {
-  const scale = useRef(new Animated.Value(0.6)).current;
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.timing(scale, {
-        toValue: 1,
-        duration: 320,
-        easing: Easing.bezier(0.16, 1, 0.3, 1),
-        useNativeDriver: true,
-      }),
-      Animated.timing(opacity, {
-        toValue: 1,
-        duration: 200,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true,
-      }),
-    ]).start();
-  }, [scale, opacity]);
-
-  return (
-    <Animated.View
-      style={{
-        width: 56,
-        height: 56,
-        borderRadius: 28,
-        backgroundColor: theme.colors.statusResolvedBg,
-        borderWidth: 1,
-        borderColor: theme.colors.statusResolved,
-        alignItems: 'center',
-        justifyContent: 'center',
-        opacity,
-        transform: [{ scale }],
-      }}
-    >
-      <CheckIcon color={theme.colors.statusResolved} size={20} />
-    </Animated.View>
-  );
-}
-
-export function ComposeScreen({
-  theme,
-  type,
-  onBack,
-  onSubmit,
-}: {
-  theme: SupportTheme;
-  type: QueryType;
-  onBack: () => void;
-  /** Resolves null on success, or a user-facing error message. */
-  onSubmit: (message: string) => Promise<string | null>;
-}) {
-  const [message, setMessage] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-  const [failedMessage, setFailedMessage] = useState<string | null>(null);
-  const [sent, setSent] = useState(false);
-
-  const trimmed = message.trim();
-  const valid =
-    trimmed.length >= USER_MESSAGE_MIN && trimmed.length <= USER_MESSAGE_MAX;
-  const overLimit = message.length > USER_MESSAGE_MAX;
-  const tooShort = trimmed.length > 0 && trimmed.length < USER_MESSAGE_MIN;
-
-  async function handleSubmit() {
-    if (!valid || submitting) return;
-    setSubmitting(true);
-    setFailedMessage(null);
-    const errorMessage = await onSubmit(trimmed);
-    setSubmitting(false);
-    if (errorMessage === null) setSent(true);
-    else setFailedMessage(errorMessage);
-  }
-
-  if (sent) {
-    return (
-      <View
-        style={{
-          flex: 1,
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: 14,
-          paddingHorizontal: 32,
-          paddingBottom: 40,
-        }}
-      >
-        <SentMark theme={theme} />
-        <Text style={textStyles.title(theme)}>Sent</Text>
-        <Text style={[textStyles.secondary(theme), { textAlign: 'center' }]}>
-          We&apos;ll reply right here. You&apos;ll find the conversation under
-          Open, and the button shows a badge when we answer.
-        </Text>
-        <View style={{ marginTop: 6 }}>
-          <PrimaryButton label="Done" onPress={onBack} theme={theme} />
-        </View>
-      </View>
-    );
-  }
-
-  return (
-    <KeyboardAvoidingView
-      style={{ flex: 1 }}
-      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-    >
-      {/* Header: back + the chosen type */}
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: 10,
-          paddingHorizontal: 12,
-          paddingBottom: 14,
-        }}
-      >
-        <IconButton
-          onPress={onBack}
-          theme={theme}
-          accessibilityLabel="Back to conversations"
-          size={32}
-        >
-          <Chevron color={theme.colors.textSecondary} direction="left" size={12} />
-        </IconButton>
-        <TypeGlyph type={type} theme={theme} size={32} />
-        <View style={{ flex: 1, gap: 1 }}>
-          <Text style={textStyles.heading(theme)}>{QUERY_TYPE_LABEL[type]}</Text>
-          <Text style={textStyles.meta(theme)}>{SUBTITLE[type]}</Text>
-        </View>
-      </View>
-
-      <View style={{ flex: 1, paddingHorizontal: 16 }}>
-        <TextInput
-          value={message}
-          onChangeText={(v) => {
-            setMessage(v);
-            setFailedMessage(null);
-          }}
-          multiline
-          autoFocus
-          editable={!submitting}
-          placeholder={PROMPT[type]}
-          placeholderTextColor={theme.colors.textTertiary}
-          style={{
-            minHeight: 140,
-            maxHeight: 240,
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-            borderRadius: theme.radii.card,
-            backgroundColor: theme.colors.surface,
-            color: theme.colors.textPrimary,
-            fontSize: 15,
-            lineHeight: 21,
-            padding: 14,
-            textAlignVertical: 'top',
-          }}
-        />
-
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 10,
-            paddingTop: 10,
-            paddingHorizontal: 2,
-            minHeight: 20,
-          }}
-        >
-          {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}
-          <Text
-            style={[
-              textStyles.meta(theme),
-              { marginLeft: 'auto' },
-              overLimit && { color: theme.colors.statusDanger },
-            ]}
-          >
-            {message.length}/{USER_MESSAGE_MAX}
-          </Text>
-        </View>
-
-        <View style={{ paddingTop: 12 }}>
-          <PrimaryButton
-            label={submitting ? 'Sending…' : 'Send'}
-            onPress={handleSubmit}
-            disabled={!valid || submitting}
-            theme={theme}
-            fullWidth
-          />
-        </View>
-      </View>
-    </KeyboardAvoidingView>
-  );
-}

package/src/components/screens/HomeScreen.tsx

@@ -1,287 +0,0 @@
-import { RefreshControl, 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,
-  IconButton,
-  PressableRow,
-  SectionLabel,
-  SkeletonBlock,
-  textStyles,
-  TypeGlyph,
-  UnreadPill,
-} from '../primitives';
-
-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,
-  onPress,
-  last,
-}: {
-  thread: Thread;
-  theme: SupportTheme;
-  onPress: () => void;
-  last: boolean;
-}) {
-  const unread = thread.unread_count > 0;
-  const preview = thread.last_message?.body ?? 'No messages yet';
-  const at = thread.last_message?.created_at ?? thread.created_at;
-
-  return (
-    <PressableRow
-      onPress={onPress}
-      theme={theme}
-      accessibilityLabel={
-        unread
-          ? `${QUERY_TYPE_LABEL[thread.type]} thread, ${thread.unread_count} unread`
-          : `${QUERY_TYPE_LABEL[thread.type]} thread`
-      }
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 12,
-        paddingHorizontal: 16,
-        paddingVertical: 13,
-        borderBottomWidth: last ? 0 : 1,
-        borderBottomColor: theme.colors.border,
-        opacity: thread.status === 'resolved' ? 0.75 : 1,
-      }}
-    >
-      <TypeGlyph type={thread.type} theme={theme} size={38} />
-
-      <View style={{ flex: 1, gap: 3 }}>
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-          <Text
-            numberOfLines={1}
-            style={{
-              flex: 1,
-              fontSize: 14,
-              fontWeight: unread ? '700' : '600',
-              letterSpacing: -0.1,
-              color: theme.colors.textPrimary,
-            }}
-          >
-            {QUERY_TYPE_LABEL[thread.type]}
-          </Text>
-          <Text style={textStyles.meta(theme)}>{relativeTime(at)}</Text>
-        </View>
-
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-          <Text
-            numberOfLines={1}
-            style={{
-              flex: 1,
-              fontSize: 13,
-              lineHeight: 18,
-              color: unread ? theme.colors.textPrimary : theme.colors.textSecondary,
-            }}
-          >
-            {thread.last_message?.sender === 'user' ? 'You: ' : ''}
-            {preview}
-          </Text>
-          {unread ? (
-            <UnreadPill count={thread.unread_count} theme={theme} />
-          ) : (
-            <Chevron color={theme.colors.textTertiary} />
-          )}
-        </View>
-      </View>
-    </PressableRow>
-  );
-}
-
-function ThreadGroup({
-  label,
-  threads,
-  theme,
-  onOpenThread,
-}: {
-  label: string;
-  threads: Thread[];
-  theme: SupportTheme;
-  onOpenThread: (thread: Thread) => void;
-}) {
-  if (threads.length === 0) return null;
-  return (
-    <View style={{ marginTop: 24 }}>
-      <SectionLabel theme={theme} style={{ paddingHorizontal: 16, paddingBottom: 8 }}>
-        {label}
-      </SectionLabel>
-      <View
-        style={{
-          marginHorizontal: 16,
-          borderWidth: 1,
-          borderColor: theme.colors.border,
-          borderRadius: theme.radii.card,
-          backgroundColor: theme.colors.surface,
-          overflow: 'hidden',
-        }}
-      >
-        {threads.map((thread, i) => (
-          <ThreadRow
-            key={thread.id}
-            thread={thread}
-            theme={theme}
-            onPress={() => onOpenThread(thread)}
-            last={i === threads.length - 1}
-          />
-        ))}
-      </View>
-    </View>
-  );
-}
-
-export function HomeScreen({
-  theme,
-  threads,
-  loading,
-  refreshing,
-  error,
-  onRefresh,
-  onCompose,
-  onOpenThread,
-  onClose,
-}: {
-  theme: SupportTheme;
-  threads: Thread[] | null;
-  loading: boolean;
-  refreshing: boolean;
-  error: string | null;
-  onRefresh: () => 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: 'flex-start',
-          paddingHorizontal: 16,
-          paddingTop: 4,
-          paddingBottom: 16,
-        }}
-      >
-        <View style={{ flex: 1, gap: 2 }}>
-          <Text style={textStyles.title(theme)}>Support</Text>
-          <Text style={textStyles.secondary(theme)}>
-            Start a conversation — we reply right here.
-          </Text>
-        </View>
-        <IconButton
-          onPress={onClose}
-          theme={theme}
-          accessibilityLabel="Close support"
-          size={32}
-        >
-          <CloseIcon color={theme.colors.textSecondary} size={12} />
-        </IconButton>
-      </View>
-
-      <ScrollView
-        style={{ flex: 1 }}
-        contentContainerStyle={{ paddingBottom: 24 }}
-        keyboardShouldPersistTaps="handled"
-        refreshControl={
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            tintColor={theme.colors.textTertiary}
-            colors={[theme.colors.accent]}
-            progressBackgroundColor={theme.colors.surface}
-          />
-        }
-      >
-        {/* 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: 12,
-                paddingHorizontal: 14,
-                paddingVertical: 12,
-                borderTopWidth: i === 0 ? 0 : 1,
-                borderTopColor: theme.colors.border,
-              }}
-            >
-              <TypeGlyph type={type} theme={theme} size={34} />
-              <View style={{ flex: 1, gap: 1 }}>
-                <Text style={textStyles.heading(theme)}>
-                  {QUERY_TYPE_LABEL[type]}
-                </Text>
-                <Text style={textStyles.meta(theme)}>{COMPOSE_HINT[type]}</Text>
-              </View>
-              <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} />
-        ) : loading && threads === null ? (
-          <View style={{ paddingHorizontal: 16, paddingTop: 28, gap: 12 }}>
-            <SkeletonBlock width={110} height={11} theme={theme} radius={4} />
-            <SkeletonBlock width="100%" height={64} theme={theme} radius={theme.radii.card} />
-            <SkeletonBlock width="100%" height={64} theme={theme} radius={theme.radii.card} />
-          </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."
-            theme={theme}
-          />
-        ) : (
-          <>
-            <ThreadGroup
-              label={`Open · ${open.length}`}
-              threads={open}
-              theme={theme}
-              onOpenThread={onOpenThread}
-            />
-            <ThreadGroup
-              label="Resolved"
-              threads={resolved}
-              theme={theme}
-              onOpenThread={onOpenThread}
-            />
-          </>
-        )}
-      </ScrollView>
-    </View>
-  );
-}