@upstep/react-native 0.6.16 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.7.0
+
+- Native support chat in the existing feedback sheet, with signed customer identities and anonymous session persistence.
+- Quick replies, issue forms, resolution checks and a required contact card before team handoff.
+- Larger text, softer colors and white/black themes.
+
 ## 0.6.16
 
 - Fix TypeScript compatibility across React Native versions when rendering the feedback-sheet backdrop.

package/README.md

@@ -5,7 +5,7 @@ The [Upstep](https://upstep.dev) feedback SDK for React Native: a launcher butto
 ## Install
 
 ```bash
-npm install @upstep/react-native react-native-safe-area-context
+npm install @upstep/react-native@^0.7.0 react-native-safe-area-context @react-native-async-storage/async-storage
 ```
 
 `react-native-safe-area-context` is a required peer dependency (the sheet needs it for safe-area insets). Get an API key by creating a free project at [upstep.dev](https://upstep.dev).
@@ -56,7 +56,7 @@ If `expo-sensors` isn't installed, the hook is a no-op — safe to call uncondit
 | `apiKey` | `string` | — | **Required.** Your project's API key. |
 | `userId` | `string` | — | End-user id from your app, used to deduplicate votes per user. Call `identify(userId)` if it's only known after login. |
 | `baseUrl` | `string` | `https://upstep.dev` | Only needed for self-hosted or staging setups. |
-| `accentColor` | `string` | `#D97757` | Any CSS color, used for the launcher button and highlights. |
+| `accentColor` | `string` | `#5B7168` | Any CSS color, used for the launcher button and highlights. |
 | `theme` | `"light" \| "dark" \| "auto"` | `"auto"` | `"auto"` follows the device color scheme. |
 
 ## API
@@ -72,3 +72,18 @@ If `expo-sensors` isn't installed, the hook is a no-op — safe to call uncondit
 - [Full documentation](https://upstep.dev/#integrate)
 - [Dashboard / sign up](https://upstep.dev/login)
 - [@upstep/js](https://www.npmjs.com/package/@upstep/js) for web apps
+
+## Native AI and team support
+
+Version 0.7.0 adds a native Support tab to the existing feedback sheet. Enable Customer support for a paid project in UpStep, then use the existing provider and launcher. No WebView or separate chat package is needed. Set `chat={false}` on `FeedbackProvider` to hide support.
+
+```tsx
+<FeedbackProvider apiKey="YOUR_PROJECT_KEY" chat={true} supportIdentityToken={signedToken}>
+  <FeedbackButton />
+  <FeedbackSheet />
+</FeedbackProvider>
+```
+
+`supportIdentityToken` is optional: generate a short-lived project-scoped JWT on your authenticated backend using the signing secret from Support settings. Never put that secret in the app. Pass a new token on login and `undefined` on logout. `userId` is for feedback voting and does not authenticate private chat. Anonymous chat sessions persist using AsyncStorage.
+
+Chat includes large text, soft message bubbles, quick replies, issue detail cards and resolution confirmations. The team contact form appears after AI understands an unresolved issue, and requires name/email before handoff. Tickets include a reference and the business contact email.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.6.16",
-  "description": "Upstep feedback SDK for React Native",
+  "version": "0.7.0",
+  "description": "Native UpStep feedback and AI support chat for React Native",
   "homepage": "https://upstep.dev",
   "repository": {
     "type": "git",
@@ -19,7 +19,8 @@
     }
   },
   "dependencies": {
-    "@upstep/types": "0.5.6"
+    "@upstep/types": "0.7.0",
+    "@upstep/js": "0.7.0"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1.18",
@@ -40,6 +41,10 @@
     "upstep"
   ],
   "license": "MIT",
+  "files": [
+    "src",
+    "CHANGELOG.md"
+  ],
   "scripts": {
     "type-check": "tsc --noEmit"
   }

package/src/FeedbackContext.tsx

@@ -13,23 +13,30 @@ import type {
   FeedbackWithComments,
   UpstepConfig,
   VoteValue,
+  SupportConfiguration,
 } from "@upstep/types";
 import { UpstepApiClient } from "./api";
 
 // Enable LayoutAnimation on Android
 if (Platform.OS === "android") {
-  const um = UIManager as unknown as { setLayoutAnimationEnabledExperimental?: (v: boolean) => void };
+  const um = UIManager as unknown as {
+    setLayoutAnimationEnabledExperimental?: (v: boolean) => void;
+  };
   um.setLayoutAnimationEnabledExperimental?.(true);
 }
 
-const DEFAULT_ACCENT = "#D97757";
+const DEFAULT_ACCENT = "#5B7168";
 
 interface UpstepContextValue {
   client: UpstepApiClient;
   feedItems: Feedback[];
   feedLoading: boolean;
   loadFeed: () => Promise<void>;
-  submit: (title: string, content: string, type?: FeedbackType) => Promise<void>;
+  submit: (
+    title: string,
+    content: string,
+    type?: FeedbackType,
+  ) => Promise<void>;
   vote: (feedbackId: string, value: VoteValue) => Promise<void>;
   getItem: (feedbackId: string) => Promise<FeedbackWithComments>;
   isOpen: boolean;
@@ -39,6 +46,8 @@ interface UpstepContextValue {
   accentColor: string;
   theme: "light" | "dark" | "auto";
   showBranding: boolean;
+  supportConfig: SupportConfiguration | null;
+  supportRevision: number;
 }
 
 const UpstepContext = createContext<UpstepContextValue | null>(null);
@@ -51,12 +60,37 @@ export function FeedbackProvider({
   const [feedItems, setFeedItems] = useState<Feedback[]>([]);
   const [feedLoading, setFeedLoading] = useState(true);
   const [isOpen, setIsOpen] = useState(false);
+  const [supportConfig, setSupportConfig] =
+    useState<SupportConfiguration | null>(null);
+  const [supportRevision, setSupportRevision] = useState(0);
   const [showBranding, setShowBranding] = useState(true);
 
   useEffect(() => {
     client.setUserId(config.userId);
   }, [client, config.userId]);
 
+  useEffect(() => {
+    let active = true;
+    void client.support.identify(config.supportIdentityToken).then(() => {
+      if (active) setSupportRevision((v) => v + 1);
+    });
+    if (config.chat === false) {
+      setSupportConfig(null);
+      return () => {
+        active = false;
+      };
+    }
+    void client.support
+      .configuration()
+      .then((value) => {
+        if (active) setSupportConfig(value);
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [client, config.chat, config.supportIdentityToken]);
+
   const loadFeed = useCallback(async () => {
     setFeedLoading(true);
     try {
@@ -70,7 +104,9 @@ export function FeedbackProvider({
     }
   }, [client]);
 
-  useEffect(() => { loadFeed(); }, [loadFeed]);
+  useEffect(() => {
+    loadFeed();
+  }, [loadFeed]);
 
   const submit = useCallback(
     async (title: string, content: string, type?: FeedbackType) => {
@@ -80,39 +116,42 @@ export function FeedbackProvider({
       await client.submitFeedback(payload);
       await loadFeed();
     },
-    [client, loadFeed]
+    [client, loadFeed],
   );
 
-  const vote = useCallback(async (feedbackId: string, value: VoteValue) => {
-    // Capture snapshot for rollback, then animate into new sorted position
-    let snapshot: Feedback[] = [];
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setFeedItems((prev) => {
-      snapshot = prev;
-      const updated = prev.map((f) => {
-        if (f.id !== feedbackId) return f;
-        const wasVoted = f.userVote === "UP";
-        return {
-          ...f,
-          upvotes: wasVoted ? f.upvotes - 1 : f.upvotes + 1,
-          userVote: wasVoted ? null : ("UP" as VoteValue),
-        };
+  const vote = useCallback(
+    async (feedbackId: string, value: VoteValue) => {
+      // Capture snapshot for rollback, then animate into new sorted position
+      let snapshot: Feedback[] = [];
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      setFeedItems((prev) => {
+        snapshot = prev;
+        const updated = prev.map((f) => {
+          if (f.id !== feedbackId) return f;
+          const wasVoted = f.userVote === "UP";
+          return {
+            ...f,
+            upvotes: wasVoted ? f.upvotes - 1 : f.upvotes + 1,
+            userVote: wasVoted ? null : ("UP" as VoteValue),
+          };
+        });
+        return [...updated].sort((a, b) => b.upvotes - a.upvotes);
       });
-      return [...updated].sort((a, b) => b.upvotes - a.upvotes);
-    });
 
-    try {
-      await client.vote(feedbackId, value);
-    } catch {
-      // API failed — animate back to original order
-      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-      setFeedItems(snapshot);
-    }
-  }, [client]);
+      try {
+        await client.vote(feedbackId, value);
+      } catch {
+        // API failed — animate back to original order
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        setFeedItems(snapshot);
+      }
+    },
+    [client],
+  );
 
   const getItem = useCallback(
     (feedbackId: string) => client.getItem(feedbackId),
-    [client]
+    [client],
   );
 
   const openSheet = useCallback(() => {
@@ -125,17 +164,28 @@ export function FeedbackProvider({
 
   const identify = useCallback(
     (userId: string | undefined) => client.setUserId(userId),
-    [client]
+    [client],
   );
 
   return (
     <UpstepContext.Provider
       value={{
-        client, feedItems, feedLoading, loadFeed, submit, vote, getItem,
-        isOpen, openSheet, closeSheet, identify,
+        client,
+        feedItems,
+        feedLoading,
+        loadFeed,
+        submit,
+        vote,
+        getItem,
+        isOpen,
+        openSheet,
+        closeSheet,
+        identify,
         accentColor: config.accentColor ?? DEFAULT_ACCENT,
         theme: config.theme ?? "auto",
         showBranding,
+        supportConfig,
+        supportRevision,
       }}
     >
       {children}