Add: ability to debug in prod, easy link to access run log from conve…

…rsation debugger (#9014) * Add: ability to debug in prod, easy link to access run log from conversation debugger * Improve keyboard nav with poke search * Format comment
dust-tt · Nov 29, 2024 · 7e25a4e · 7e25a4e
1 parent e3dbdaf
commit 7e25a4e
Show file tree

Hide file tree

Showing 19 changed files with 397 additions and 128 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,4 +9,17 @@
   "eslint.run": "onSave",
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "github-actions.workflows.pinned.workflows": []
+  ,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescriptreact]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+
 }
diff --git a/front/components/UserMenu.tsx b/front/components/UserMenu.tsx
@@ -16,9 +16,11 @@ import {
 import { useSendNotification } from "@dust-tt/sparkle";
 import type { UserType, WorkspaceType } from "@dust-tt/types";
 import { isOnlyAdmin, isOnlyBuilder, isOnlyUser } from "@dust-tt/types";
+import { BugIcon } from "lucide-react";
+import { useRouter } from "next/router";
 import { useMemo } from "react";
 
-import { canForceUserRole, forceUserRole } from "@app/lib/development";
+import { forceUserRole, showDebugTools } from "@app/lib/development";
 import { useFeatureFlags } from "@app/lib/swr/workspaces";
 
 export function UserMenu({
@@ -28,6 +30,7 @@ export function UserMenu({
   user: UserType;
   owner: WorkspaceType;
 }) {
+  const router = useRouter();
   const { featureFlags } = useFeatureFlags({ workspaceId: owner.sId });
 
   const hasBetaAccess = featureFlags.some((flag: string) =>
@@ -92,9 +95,24 @@ export function UserMenu({
           </>
         )}
 
-        {canForceUserRole(owner) && (
+        {showDebugTools(owner) && (
           <>
             <DropdownMenuLabel label="Dev Tools" />
+            {router.route === "/w/[wId]/assistant/[cId]" && (
+              <DropdownMenuItem
+                label="Debug conversation"
+                onClick={() => {
+                  const regexp = new RegExp(`/w/([^/]+)/assistant/([^/]+)`);
+                  const match = window.location.href.match(regexp);
+                  if (match) {
+                    void router.push(
+                      `/poke/${match[1]}/conversations/${match[2]}`
+                    );
+                  }
+                }}
+                icon={BugIcon}
+              />
+            )}
             {!isOnlyAdmin(owner) && (
               <DropdownMenuItem
                 label="Become Admin"

diff --git a/front/components/assistant/conversation/ConversationTitle.tsx b/front/components/assistant/conversation/ConversationTitle.tsx
@@ -13,9 +13,6 @@ import {
 } from "@dust-tt/sparkle";
 import type { ConversationType } from "@dust-tt/types";
 import type { WorkspaceType } from "@dust-tt/types";
-import { isDevelopment } from "@dust-tt/types";
-import { BugIcon } from "lucide-react";
-import { useRouter } from "next/router";
 import type { MouseEvent } from "react";
 import React, { useRef, useState } from "react";
 import { useSWRConfig } from "swr";
@@ -34,7 +31,6 @@ export function ConversationTitle({
   shareLink: string;
   onDelete?: (conversationId: string) => void;
 }) {
-  const router = useRouter();
   const { mutate } = useSWRConfig();
 
   const [copyLinkSuccess, setCopyLinkSuccess] = useState<boolean>(false);
@@ -193,21 +189,6 @@ export function ConversationTitle({
                 />
               )}
             </div>
-            {isDevelopment() && (
-              <div className="hidden lg:flex">
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  tooltip="Debug in Poke"
-                  icon={BugIcon}
-                  onClick={() =>
-                    void router.push(
-                      `/poke/${conversation.owner.sId}/conversations/${conversation.sId}`
-                    )
-                  }
-                />
-              </div>
-            )}
             <Popover
               popoverTriggerAsChild
               trigger={

diff --git a/front/components/poke/PokeNavbar.tsx b/front/components/poke/PokeNavbar.tsx
@@ -1,7 +1,8 @@
-import { Button, Logo } from "@dust-tt/sparkle";
+import { Button, Logo, Spinner } from "@dust-tt/sparkle";
 import { isDevelopment } from "@dust-tt/types";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
 
 import { PokeButton } from "@app/components/poke/shadcn/ui/button";
 import {
@@ -37,70 +38,97 @@ export const PokeNavbar: React.FC = () => (
 export default PokeNavbar;
 
 export function PokeSearchCommand() {
+  const router = useRouter();
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const [isNavigating, setIsNavigating] = useState(false);
 
   const { isError, isLoading, results } = usePokeSearch({
     // Disable search until the user has typed at least 2 characters.
     disabled: searchTerm.length < 2,
     search: searchTerm,
   });
 
+  const navigateTo = useCallback(
+    async (link: string) => {
+      setIsNavigating(true);
+      await router.push(link);
+      setIsNavigating(false);
+    },
+    [router]
+  );
+
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
         setOpen((open) => !open);
+      } else if (
+        open &&
+        results.length > 0 &&
+        e.key === "Enter" &&
+        results[0].link
+      ) {
+        e.preventDefault();
+        void navigateTo(results[0].link);
       }
     };
     document.addEventListener("keydown", down);
     return () => document.removeEventListener("keydown", down);
-  }, []);
+  }, [navigateTo, open, results]);
 
   return (
     <>
       <PokeButton variant="outline" size="sm" onClick={() => setOpen(true)}>
-        Search
+        Search (⌘K)
       </PokeButton>
       <PokeCommandDialog
         open={open}
         onOpenChange={setOpen}
         className="bg-structure-50 sm:max-w-[600px]"
         shouldFilter={false}
       >
-        <PokeCommandInput
-          placeholder="Type a command or search..."
-          onValueChange={(value) => setSearchTerm(value)}
-          className="border-none focus:outline-none focus:ring-0"
-        />
-        <PokeCommandList>
-          {isLoading && <div className="p-4 text-sm">Searching...</div>}
-          {searchTerm &&
-            searchTerm.length >= 2 &&
-            !isError &&
-            !isLoading &&
-            results.length === 0 && (
-              <div className="p-4 text-sm">No results found.</div>
-            )}
-          {isError && <div className="p-4 text-sm">Something went wrong.</div>}
-          {searchTerm.length < 2 && (
-            <div className="p-4 text-sm">Enter at least 2 characters...</div>
-          )}
+        {isNavigating ? (
+          <div className="m-4 flex items-center justify-center">
+            <Spinner size="md" />
+          </div>
+        ) : (
+          <>
+            <PokeCommandInput
+              placeholder="Type a command or search..."
+              onValueChange={(value) => setSearchTerm(value)}
+              className="border-none focus:outline-none focus:ring-0"
+            />
+            <PokeCommandList>
+              {isLoading && <div className="p-4 text-sm">Searching...</div>}
+              {searchTerm &&
+                searchTerm.length >= 2 &&
+                !isError &&
+                !isLoading &&
+                results.length === 0 && (
+                  <div className="p-4 text-sm">No results found.</div>
+                )}
+              {isError && (
+                <div className="p-4 text-sm">Something went wrong.</div>
+              )}
+              {searchTerm.length < 2 && (
+                <div className="p-4 text-sm">
+                  Enter at least 2 characters...
+                </div>
+              )}
 
-          {results.map(({ id, link, name }) =>
-            link ? (
-              <Link href={link} key={id}>
-                <PokeCommandItem value={name}>
+              {results.map(({ id, link, name }) => (
+                <PokeCommandItem
+                  key={id}
+                  value={name}
+                  onClick={() => (link ? navigateTo(link) : null)}
+                >
                   {name} (id: {id})
                 </PokeCommandItem>
-              </Link>
-            ) : (
-              <PokeCommandItem key={id} value={name}>
-                {name} (id: {id})
-              </PokeCommandItem>
-            )
-          )}
-        </PokeCommandList>
+              ))}
+            </PokeCommandList>
+          </>
+        )}
       </PokeCommandDialog>
     </>
   );

diff --git a/front/lib/development.ts b/front/lib/development.ts
@@ -13,7 +13,7 @@ function isADustProdWorkspace(owner: LightWorkspaceType) {
   );
 }
 
-export function canForceUserRole(owner: LightWorkspaceType) {
+export function showDebugTools(owner: LightWorkspaceType) {
   return isDevelopment() || isADustProdWorkspace(owner);
 }
 
@@ -23,7 +23,7 @@ export async function forceUserRole(
   role: "user" | "builder" | "admin"
 ) {
   // Ideally we should check if the user is dust super user but we don't have this information in the front-end
-  if (!canForceUserRole(owner)) {
+  if (!showDebugTools(owner)) {
     return new Err("Not allowed");
   }