vibefast-cli 1.1.5 → 1.3.0

package/recipes/chatbot/apps/native/src/features/chatbot/components/markdown/code-block.tsx

@@ -1,16 +1,43 @@
+// vibefast license: c1e9fcd2-muhammad
 import { Feather } from '@expo/vector-icons';
 import React, { useCallback, useState } from 'react';
 import {
   type ImageStyle,
   Pressable,
+  ScrollView,
+  Text,
   type TextStyle,
   View,
   type ViewStyle,
 } from 'react-native';
-import SyntaxHighlighter from 'react-native-syntax-highlighter';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
+import ts from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';
+import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
+import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
+import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash';
+import css from 'react-syntax-highlighter/dist/esm/languages/hljs/css';
+import xml from 'react-syntax-highlighter/dist/esm/languages/hljs/xml';
 
 import { translate } from '@/lib';
 
+// Register languages for the Light build
+SyntaxHighlighter.registerLanguage('javascript', js);
+SyntaxHighlighter.registerLanguage('js', js);
+SyntaxHighlighter.registerLanguage('typescript', ts);
+SyntaxHighlighter.registerLanguage('ts', ts);
+SyntaxHighlighter.registerLanguage('tsx', ts);
+SyntaxHighlighter.registerLanguage('jsx', js);
+SyntaxHighlighter.registerLanguage('python', python);
+SyntaxHighlighter.registerLanguage('py', python);
+SyntaxHighlighter.registerLanguage('json', json);
+SyntaxHighlighter.registerLanguage('bash', bash);
+SyntaxHighlighter.registerLanguage('sh', bash);
+SyntaxHighlighter.registerLanguage('shell', bash);
+SyntaxHighlighter.registerLanguage('css', css);
+SyntaxHighlighter.registerLanguage('html', xml);
+SyntaxHighlighter.registerLanguage('xml', xml);
+
 type CodeBlockProps = {
   containerStyle: ViewStyle | TextStyle | ImageStyle;
   content: string;
@@ -26,44 +53,51 @@ type CodeBlockProps = {
   onCopyCode: (code: string) => Promise<void>;
 };
 
+/**
+ * Custom renderer for React Native - converts syntax highlighter output to Text components
+ */
+function createNativeRenderer(fontFamily: string, fontSize: number) {
+  return function renderer({
+    rows,
+    stylesheet,
+  }: {
+    rows: any[];
+    stylesheet: Record<string, any>;
+  }) {
+    return rows.map((row, i) => {
+      const children = row.children?.map((child: any, j: number) => {
+        if (child.type === 'text') {
+          return child.value;
+        }
+        const className = child.properties?.className?.[0] || '';
+        const style = stylesheet[className] || {};
+        return (
+          <Text
+            key={j}
+            style={{
+              fontFamily,
+              fontSize,
+              color: style.color,
+              fontWeight: style.fontWeight,
+              fontStyle: style.fontStyle,
+            }}
+          >
+            {child.children?.map((c: any) => c.value).join('') || ''}
+          </Text>
+        );
+      });
+
+      return (
+        <Text key={i} style={{ fontFamily, fontSize }}>
+          {children}
+        </Text>
+      );
+    });
+  };
+}
+
 /**
  * CodeBlock component for rendering syntax-highlighted code with collapse/expand functionality.
- *
- * Features:
- * - Syntax highlighting using react-native-syntax-highlighter
- * - Copy to clipboard functionality
- * - Collapse/expand animation with FlashList preparation
- * - Smooth 220ms easeInEaseOut animation
- * - Independent animation for multiple code blocks
- *
- * Requirements addressed:
- * - 9.1: Prepare FlashList for layout animation before collapse
- * - 9.2: Animate height change over 220ms with easeInEaseOut
- * - 9.3: Animate each code block independently
- * - 9.4: Restore full content with same animation timing
- * - 9.5: Complete animation without interruption during scroll
- *
- * @param props - CodeBlock component props
- * @returns Rendered code block with syntax highlighting and controls
- *
- * @example
- * ```tsx
- * <CodeBlock
- *   containerStyle={styles.code_block}
- *   content="const hello = 'world';"
- *   language="javascript"
- *   codeSyntaxTheme={atomOneDark}
- *   monospaceFontFamily="Menlo"
- *   subtleText="#888"
- *   codeContentStyle={styles.codeContent}
- *   codeActionsContainerStyle={styles.actions}
- *   codeActionButtonBaseStyle={styles.button}
- *   codeToggleButtonSpacingStyle={styles.spacing}
- *   codeContentContainerStyle={styles.container}
- *   onCopyCode={copyToClipboard}
- *   onPrepareLayoutAnimation={prepareFlashList}
- * />
- * ```
  */
 export const CodeBlock = React.memo(function CodeBlock({
   containerStyle,
@@ -81,14 +115,12 @@ export const CodeBlock = React.memo(function CodeBlock({
 }: CodeBlockProps) {
   const [isCollapsed, setIsCollapsed] = useState(false);
 
-  /**
-   * Toggle collapsed state without animation.
-   * LayoutAnimation causes scroll jitter, so we disable it.
-   */
   const toggleCollapsed = useCallback(() => {
     setIsCollapsed((prev) => !prev);
   }, []);
 
+  const renderer = createNativeRenderer(monospaceFontFamily, 15);
+
   return (
     <View
       style={[
@@ -146,18 +178,19 @@ export const CodeBlock = React.memo(function CodeBlock({
         pointerEvents={isCollapsed ? 'none' : 'auto'}
       >
         {isCollapsed ? null : (
-          <SyntaxHighlighter
-            language={language.length > 0 ? language : 'plaintext'}
-            style={codeSyntaxTheme}
-            highlighter="hljs"
-            fontFamily={monospaceFontFamily}
-            fontSize={15}
-            PreTag={View}
-            CodeTag={View}
-            customStyle={codeContentStyle}
-          >
-            {content}
-          </SyntaxHighlighter>
+          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            <SyntaxHighlighter
+              language={language.length > 0 ? language : 'plaintext'}
+              style={codeSyntaxTheme}
+              renderer={renderer}
+              customStyle={{
+                ...codeContentStyle,
+                backgroundColor: 'transparent',
+              }}
+            >
+              {content}
+            </SyntaxHighlighter>
+          </ScrollView>
         )}
       </View>
     </View>

package/recipes/chatbot/recipe.json

@@ -1,10 +1,10 @@
 {
   "name": "chatbot",
-  "version": "1.1.0",
+  "version": "1.0.0",
   "description": "AI-powered chat assistant",
   "copy": [
     {
-      "from": "apps/native/src/app/(root)/(protected)/chatbot",
+      "from": "apps/native/src/app/chatbot",
       "to": "apps/native/src/app/(root)/(protected)/chatbot"
     },
     {
@@ -16,8 +16,8 @@
       "to": "apps/native/src/api-client/chatbot.ts"
     },
     {
-      "from": "packages/backend/convex/chatbot",
-      "to": "packages/backend/convex/chatbot"
+      "from": "packages/backend/convex/agents.ts",
+      "to": "packages/backend/convex/agents.ts"
     },
     {
       "from": "packages/backend/convex/chatbotAgent.ts",
@@ -28,38 +28,19 @@
       "to": "packages/backend/convex/chatbotHistory.ts"
     },
     {
-      "from": "packages/backend/convex/agents.ts",
-      "to": "packages/backend/convex/agents.ts"
-    },
-    {
-      "from": "packages/backend/convex/lib/rateLimit.ts",
-      "to": "packages/backend/convex/lib/rateLimit.ts"
-    },
-    {
-      "from": "packages/backend/convex/lib/telemetry.ts",
-      "to": "packages/backend/convex/lib/telemetry.ts"
-    },
-    {
-      "from": "packages/backend/convex/ragKnowledge.ts",
-      "to": "packages/backend/convex/ragKnowledge.ts"
-    },
-    {
-      "from": "packages/backend/convex/tools/index.ts",
-      "to": "packages/backend/convex/tools/index.ts"
-    },
-    {
-      "from": "packages/backend/convex/tools/knowledgeRetrieval.ts",
-      "to": "packages/backend/convex/tools/knowledgeRetrieval.ts"
-    },
-    {
-      "from": "packages/backend/convex/tools/tavilySearch.ts",
-      "to": "packages/backend/convex/tools/tavilySearch.ts"
+      "from": "packages/backend/convex/tools",
+      "to": "packages/backend/convex/tools"
     },
     {
-      "from": "packages/backend/convex/tools/userProfile.ts",
-      "to": "packages/backend/convex/tools/userProfile.ts"
+      "from": "packages/backend/convex/chatbot",
+      "to": "packages/backend/convex/chatbot"
     }
   ],
+  "configuration": {
+    "apiClient": {
+      "exports": ["export { type ChatbotApi, chatbotApi } from './chatbot';"]
+    }
+  },
   "nav": {
     "href": "/(root)/(protected)/chatbot",
     "label": "AI Chatbot",
@@ -71,78 +52,31 @@
     "expo": [
       "convex",
       "expo-clipboard",
+      "markdown-it",
       "react-native-markdown-display",
-      "react-native-reanimated@~4.1.1",
-      "react-native-safe-area-context@~5.6.0"
-    ],
-    "npm": [
-      "markdown-it@14.1.0",
-      "react-native-syntax-highlighter@2.1.0",
-      "react-syntax-highlighter@6.0.4"
+      "react-syntax-highlighter",
+      "react-native-reanimated",
+      "react-native-safe-area-context"
     ]
   },
   "env": [
     {
       "key": "OPENAI_API_KEY",
-      "description": "OpenAI API key used by the backend agent and knowledge tools.",
-      "example": "sk-abc123def456",
-      "link": "https://platform.openai.com/account/api-keys",
-      "file": "packages/backend/.env.local"
-    },
-    {
-      "key": "GOOGLE_GENERATIVE_AI_API_KEY",
-      "description": "Google Generative AI key that unlocks the Gemini-backed assistant.",
-      "example": "AIzaSyExampleGeneratedKey",
-      "link": "https://aistudio.google.com/api-keys",
-      "file": "packages/backend/.env.local"
-    },
-    {
-      "key": "TAVILY_API_KEY",
-      "description": "API key for Tavily web search results used by the agent tools.",
-      "example": "tavily_abc123",
-      "link": "https://app.tavily.com/",
-      "file": "packages/backend/.env.local"
-    },
-    {
-      "key": "CHAT_LATENCY_TELEMETRY_MODE",
-      "description": "Optional telemetry mode to sample chat latency (off | sample | debug).",
-      "example": "sample",
-      "file": "apps/native/.env.local"
+      "description": "OpenAI API key for chat completions",
+      "example": "sk-...",
+      "link": "https://platform.openai.com/api-keys",
+      "file": "packages/backend/.env.local",
+      "required": true
     }
   ],
-  "configuration": {
-    "env": {
-      "client": {
-        "schema": [
-          "  CHAT_LATENCY_TELEMETRY_MODE: z.enum(['off', 'sample', 'debug']).optional().default('off'),"
-        ],
-        "env": [
-          "  CHAT_LATENCY_TELEMETRY_MODE: process.env.CHAT_LATENCY_TELEMETRY_MODE ?? 'off',"
-        ]
-      }
-    }
-  },
   "manualSteps": [
     {
-      "title": "Create an OpenAI API key (optional, use OpenAI or Gemini)",
-      "description": "Sign into https://platform.openai.com and create/copy a server API key for the chat agent. You can also use Gemini instead.",
-      "link": "https://platform.openai.com/account/api-keys"
-    },
-    {
-      "title": "Create a Google Generative AI key (optional, use Gemini or OpenAI)",
-      "description": "Enable Generative AI APIs and issue a new API key in Google AI Studio. You can use Gemini instead of OpenAI, or add both.",
-      "link": "https://aistudio.google.com/api-keys"
-    },
-    {
-      "title": "Create a Tavily search key (optional, for web search)",
-      "description": "Register at Tavily if you want web search tools for the chatbot.",
-      "link": "https://app.tavily.com/"
+      "title": "Configure Convex Environment Variables",
+      "description": "Run: npx convex env set OPENAI_API_KEY sk-your-key\\nOr set it in the Convex dashboard"
     },
     {
-      "title": "Store the keys in your .env",
-      "description": "Add at least one LLM key; you can add both. Tavily is optional for web search.",
-      "file": ".env",
-      "content": "# Add one or both providers:\nOPENAI_API_KEY=sk-...\nGOOGLE_GENERATIVE_AI_API_KEY=...\n# Optional web search:\nTAVILY_API_KEY=...\n# Optional telemetry:\nCHAT_LATENCY_TELEMETRY_MODE=sample"
+      "title": "Deploy Convex Schema",
+      "description": "Run: npx convex dev\\nThis will sync the schema with Convex"
     }
   ]
 }