main -> development

.github/workflows/api-tests.yml

@@ -16,6 +16,23 @@ permissions:
 jobs:
   api-tests:
     runs-on: ubuntu-latest
+
+    services:
+      postgres:
+        image: pgvector/pgvector:pg15
+        env:
+          POSTGRES_DB: packrat_test
+          POSTGRES_USER: test_user
+          POSTGRES_PASSWORD: test_password
+          POSTGRES_HOST_AUTH_METHOD: trust
+        ports:
+          - 5433:5432
+        options: >-
+          --health-cmd "pg_isready -U test_user -d packrat_test"
+          --health-interval 5s
+          --health-timeout 5s
+          --health-retries 5
+
     steps:
       - uses: actions/checkout@v4
 
@@ -28,5 +45,33 @@ jobs:
           PACKRAT_NATIVEWIND_UI_GITHUB_TOKEN: ${{ secrets.PACKRAT_NATIVEWIND_UI_GITHUB_TOKEN }}
         run: bun install
 
+      - name: Run database migrations
+        env:
+          NEON_DATABASE_URL: postgres://test_user:test_password@localhost:5433/packrat_test
+        run: |
+          cd packages/api
+          bun run migrate
+
       - name: Run API tests
+        env:
+          # Test database configuration
+          NEON_DATABASE_URL: postgres://test_user:test_password@localhost:5433/packrat_test
+          NEON_DATABASE_URL_READONLY: postgres://test_user:test_password@localhost:5433/packrat_test
+          # Other test environment variables (from test setup)
+          ENVIRONMENT: development
+          SENTRY_DSN: https://test@test.ingest.sentry.io/test
+          JWT_SECRET: secret
+          PASSWORD_RESET_SECRET: secret
+          GOOGLE_CLIENT_ID: test-client-id
+          ADMIN_USERNAME: admin
+          ADMIN_PASSWORD: admin-password
+          PACKRAT_API_KEY: test-api-key
+          EMAIL_PROVIDER: resend
+          RESEND_API_KEY: key
+          EMAIL_FROM: test@example.com
+          OPENAI_API_KEY: sk-test-key
+          AI_PROVIDER: openai
+          PERPLEXITY_API_KEY: pplx-test-key
+          OPENWEATHER_KEY: test-weather-key
+          WEATHER_API_KEY: test-weather-key
         run: bun test --cwd packages/api

apps/expo/app.config.ts

@@ -6,7 +6,7 @@ export default (): ExpoConfig =>
     {
       name: 'PackRat',
       slug: 'packrat',
-      version: '2.0.4',
+      version: '2.0.5',
       scheme: 'packrat',
       web: {
         bundler: 'metro',

apps/expo/app/(app)/ai-chat.tsx

@@ -1,11 +1,12 @@
 import { type UIMessage, useChat } from '@ai-sdk/react';
-import { Button, Text } from '@packrat/ui/nativewindui';
+import { ActivityIndicator, Button, Text } from '@packrat/ui/nativewindui';
 import { Icon } from '@roninoss/icons';
 import { FlashList } from '@shopify/flash-list';
 import { DefaultChatTransport, type TextUIPart } from 'ai';
 import { fetch as expoFetch } from 'expo/fetch';
 import { clientEnvs } from 'expo-app/env/clientEnvs';
 import { ChatBubble } from 'expo-app/features/ai/components/ChatBubble';
+import { ErrorState } from 'expo-app/features/ai/components/ErrorState';
 import { tokenAtom } from 'expo-app/features/auth/atoms/authAtoms';
 import { LocationSelector } from 'expo-app/features/weather/components/LocationSelector';
 import { useActiveLocation } from 'expo-app/features/weather/hooks';
@@ -17,7 +18,6 @@ import { useAtomValue } from 'jotai';
 import * as React from 'react';
 import { useEffect } from 'react';
 import {
-  Alert,
   Dimensions,
   Keyboard,
   type NativeSyntheticEvent,
@@ -72,9 +72,7 @@ export default function AIChat() {
   const insets = useSafeAreaInsets();
   const { progress } = useReanimatedKeyboardAnimation();
   const textInputHeight = useSharedValue(17);
-  const translateX = useSharedValue(0);
   const params = useLocalSearchParams();
-  const [showSuggestions, setShowSuggestions] = React.useState(true);
   const { activeLocation } = useActiveLocation();
   const listRef = React.useRef<FlashList<UIMessage>>(null);
 
@@ -92,7 +90,9 @@ export default function AIChat() {
 
   const token = useAtomValue(tokenAtom);
   const [input, setInput] = React.useState('');
-  const { messages, error, sendMessage, status } = useChat({
+  const [lastUserMessage, setLastUserMessage] = React.useState('');
+  const [previousMessages, setPreviousMessages] = React.useState<UIMessage[]>([]);
+  const { messages, setMessages, error, sendMessage, status } = useChat({
     transport: new DefaultChatTransport({
       fetch: expoFetch as unknown as typeof globalThis.fetch,
       api: `${clientEnvs.EXPO_PUBLIC_API_URL}/api/chat`,
@@ -114,29 +114,21 @@ export default function AIChat() {
         parts: [{ type: 'text', text: getContextualGreeting(context) }],
       } as UIMessage,
     ],
-    onFinish: () => {
-      // Hide suggestions after user sends a message
-      setShowSuggestions(false);
-    },
   });
 
-  const isLoading = status === 'streaming';
+  const isLoading = status === 'submitted' || status === 'streaming';
 
-  const handleSubmit = () => {
-    sendMessage({ text: input });
+  const handleSubmit = (text?: string) => {
+    const messageText = text || input;
+    setLastUserMessage(messageText);
+    setPreviousMessages(messages);
+    sendMessage({ text: messageText });
     setInput('');
   };
 
-  React.useEffect(() => {
-    if (error) {
-      Alert.alert(error.message);
-    }
-  }, [error]);
-
-  const handleSuggestionPress = (suggestion: string) => {
-    sendMessage({ text: suggestion });
-    setInput('');
-    setShowSuggestions(false);
+  const handleRetry = () => {
+    setMessages(previousMessages);
+    sendMessage({ text: lastUserMessage });
   };
 
   const toolbarHeightStyle = useAnimatedStyle(() => ({
@@ -174,7 +166,6 @@ export default function AIChat() {
         behavior="padding"
       >
         <FlashList
-          // inverted
           ref={listRef}
           estimatedItemSize={70}
           ListHeaderComponent={
@@ -193,14 +184,14 @@ export default function AIChat() {
           }
           ListFooterComponent={
             <>
-              {showSuggestions && messages.length <= 2 && (
+              {messages.length < 2 && (
                 <View className="px-4 py-4">
                   <Text className="mb-2 text-xs text-muted-foreground">SUGGESTIONS</Text>
                   <View className="flex-row flex-wrap gap-2">
                     {getContextualSuggestions(context).map((suggestion) => (
                       <TouchableOpacity
                         key={suggestion}
-                        onPress={() => handleSuggestionPress(suggestion)}
+                        onPress={() => handleSubmit(suggestion)}
                         className="mb-2 rounded-full border border-border bg-card px-3 py-2"
                       >
                         <Text className="text-sm text-foreground">{suggestion}</Text>
@@ -209,6 +200,14 @@ export default function AIChat() {
                   </View>
                 </View>
               )}
+              {status === 'submitted' && (
+                <ActivityIndicator
+                  size="small"
+                  color={colors.primary}
+                  className="self-start ml-4 mb-8"
+                />
+              )}
+              {status === 'error' && <ErrorState error={error} onRetry={() => handleRetry()} />}
               <Animated.View style={toolbarHeightStyle} />
             </>
           }
@@ -224,10 +223,10 @@ export default function AIChat() {
             let userQuery: TextUIPart['text'] | undefined;
             if (item.role === 'assistant' && index > 1) {
               const userMessage = messages[index - 1];
-              userQuery = userMessage.parts.find((p) => p.type === 'text')?.text;
+              userQuery = userMessage?.parts.find((p) => p.type === 'text')?.text;
             }
 
-            return <ChatBubble item={item} translateX={translateX} userQuery={userQuery} />;
+            return <ChatBubble item={item} userQuery={userQuery} />;
           }}
         />
       </KeyboardAvoidingView>
@@ -238,7 +237,6 @@ export default function AIChat() {
           handleInputChange={setInput} // Pass the setter directly.
           handleSubmit={() => {
             handleSubmit();
-            setShowSuggestions(false);
           }}
           isLoading={isLoading}
           placeholder={
@@ -332,9 +330,7 @@ function Composer({
         />
         <View className="absolute bottom-3 right-5">
           {isLoading ? (
-            <View className="h-7 w-7 items-center justify-center">
-              <Text className="text-xs text-primary">...</Text>
-            </View>
+            <ActivityIndicator size="small" color={colors.primary} />
           ) : input.length > 0 ? (
             <Button
               onPress={handleSubmit}

apps/expo/atoms/atomWithKvStorage.ts

@@ -0,0 +1,26 @@
+import Storage from 'expo-sqlite/kv-store';
+import { atom } from 'jotai';
+
+export const atomWithKvStorage = <T>(key: string, initialValue: T) => {
+  const baseAtom = atom(initialValue);
+
+  baseAtom.onMount = (setValue) => {
+    (async () => {
+      const item = await Storage.getItem(key);
+      setValue(item ? JSON.parse(item) : initialValue);
+    })();
+  };
+
+  const derivedAtom = atom(
+    (get) => get(baseAtom),
+    (get, set, update) => {
+      const nextValue = typeof update === 'function' ? update(get(baseAtom)) : update;
+
+      set(baseAtom, nextValue);
+
+      Storage.setItem(key, JSON.stringify(nextValue));
+    },
+  );
+
+  return derivedAtom;
+};

apps/expo/components/Markdown.tsx

@@ -0,0 +1,53 @@
+import { useColorScheme } from '@packrat-ai/nativewindui';
+import RNMarkdown from '@ronradtke/react-native-markdown-display';
+
+export function Markdown({ children }: { children: string }) {
+  const { colors } = useColorScheme();
+
+  const markdownStyles = {
+    body: {
+      color: colors.foreground,
+      fontSize: 16,
+    },
+    heading1: {
+      color: colors.foreground,
+      fontSize: 28,
+      fontWeight: '700',
+      marginTop: 24,
+      marginBottom: 16,
+    },
+    heading2: {
+      color: colors.foreground,
+      fontSize: 24,
+      fontWeight: '600',
+      marginTop: 20,
+      marginBottom: 12,
+    },
+    heading3: {
+      color: colors.foreground,
+      fontSize: 20,
+      fontWeight: '600',
+      marginTop: 16,
+      marginBottom: 8,
+    },
+    paragraph: {
+      marginTop: 0,
+      marginBottom: 16,
+    },
+    strong: {
+      fontWeight: '600' as const,
+    },
+    link: {
+      color: colors.primary,
+      textDecorationLine: 'underline' as const,
+    },
+    blockquote: {
+      backgroundColor: colors.grey6,
+      borderLeftColor: colors.primary,
+      borderLeftWidth: 4,
+      paddingLeft: 16,
+    },
+  };
+
+  return <RNMarkdown style={markdownStyles}>{children}</RNMarkdown>;
+}

apps/expo/components/initial/ItemCard.tsx

@@ -21,7 +21,7 @@ type ItemCardProps = {
 
 export function ItemCard({ item, onPress }: ItemCardProps) {
   // Get weight unit
-  const weightUnit = (item as PackItem).weightUnit || (item as CatalogItem).defaultWeightUnit;
+  const weightUnit = (item as PackItem).weightUnit || (item as CatalogItem).weightUnit;
 
   // Use the utility functions
   const totalWeight = calculateTotalWeight(item);
@@ -36,12 +36,22 @@ export function ItemCard({ item, onPress }: ItemCardProps) {
       onPress={() => onPress(item)}
     >
       <View className="flex-row">
-        {item.image ? (
-          <Image source={{ uri: item.image }} className="h-24 w-24" resizeMode="cover" />
+        {(item as PackItem).image || (item as CatalogItem).images?.[0] ? (
+          <Image
+            source={{ uri: (item as PackItem).image || (item as CatalogItem).images?.[0] }}
+            className="h-24 w-24"
+            resizeMode="cover"
+          />
         ) : (
           <View className="h-24 w-24 items-center justify-center bg-muted">
             <Icon
-              name={getCategoryIcon(item.category) as MaterialIconName}
+              name={
+                getCategoryIcon(
+                  (item as PackItem).category ||
+                    (item as CatalogItem).categories?.[0] ||
+                    'miscellaneous',
+                ) as MaterialIconName
+              }
               size={32}
               color="text-muted-foreground"
             />
@@ -64,7 +74,13 @@ export function ItemCard({ item, onPress }: ItemCardProps) {
           </View>
 
           <View className="mb-2 flex-row items-center">
-            <CategoryBadge category={item.category} />
+            <CategoryBadge
+              category={
+                (item as PackItem).category ||
+                (item as CatalogItem).categories?.[0] ||
+                'miscellaneous'
+              }
+            />
             {isItemConsumable && (
               <View className="ml-2 rounded-full bg-amber-100 px-2 py-0.5">
                 <Text className="text-xs text-amber-800">Consumable</Text>