Enable opt-in telemetry

src/pages/home.tsx

@@ -11,6 +11,9 @@ import { isPreviewOpenAtom } from "@/atoms/viewAtoms";
 import { useState, useEffect } from "react";
 import { useStreamChat } from "@/hooks/useStreamChat";
 import { HomeChatInput } from "@/components/chat/HomeChatInput";
+import { usePostHog } from "posthog-js/react";
+import { PrivacyBanner } from "@/components/TelemetryBanner";
+
 export default function HomePage() {
   const [inputValue, setInputValue] = useAtom(homeChatInputValueAtom);
   const navigate = useNavigate();
@@ -21,7 +24,7 @@ export default function HomePage() {
   const setIsPreviewOpen = useSetAtom(isPreviewOpenAtom);
   const [isLoading, setIsLoading] = useState(false);
   const { streamMessage } = useStreamChat({ hasChatId: false });
-
+  const { capture } = usePostHog();
   // Get the appId from search params
   const appId = search.appId ? Number(search.appId) : null;
 
@@ -50,6 +53,7 @@ export default function HomePage() {
       setSelectedAppId(result.app.id);
       setIsPreviewOpen(false);
       await refreshApps(); // Ensure refreshApps is awaited if it's async
+      capture("home:chat-submit");
       navigate({ to: "/chat", search: { id: result.chatId } });
     } catch (error) {
       console.error("Failed to create chat:", error);
@@ -173,6 +177,7 @@ export default function HomePage() {
           ))}
         </div>
       </div>
+      <PrivacyBanner />
     </div>
   );
 }

src/pages/settings.tsx

@@ -5,12 +5,14 @@ import ConfirmationDialog from "@/components/ConfirmationDialog";
 import { IpcClient } from "@/ipc/ipc_client";
 import { showSuccess, showError } from "@/lib/toast";
 import { AutoApproveSwitch } from "@/components/AutoApproveSwitch";
-
+import { TelemetrySwitch } from "@/components/TelemetrySwitch";
+import { useSettings } from "@/hooks/useSettings";
 export default function SettingsPage() {
   const { theme, setTheme } = useTheme();
   const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
   const [isResetting, setIsResetting] = useState(false);
   const [appVersion, setAppVersion] = useState<string | null>(null);
+  const { settings } = useSettings();
 
   useEffect(() => {
     // Fetch app version
@@ -103,6 +105,27 @@ export default function SettingsPage() {
             </div>
           </div>
 
+          <div className="space-y-6">
+            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
+              <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+                Telemetry
+              </h2>
+              <div className="space-y-2">
+                <TelemetrySwitch />
+                <div className="text-sm text-gray-500 dark:text-gray-400">
+                  This records anonymous usage data to improve the product.
+                </div>
+              </div>
+
+              <div className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400">
+                <span className="mr-2 font-medium">Telemetry ID:</span>
+                <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded text-gray-800 dark:text-gray-200 font-mono">
+                  {settings ? settings.telemetryUserId : "n/a"}
+                </span>
+              </div>
+            </div>
+          </div>
+
           <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
             <ProviderSettingsGrid configuredProviders={[]} />
           </div>