feat(ui): add debug mode of answer engine (#2705)

* feat(ui): add debug mode of answer engine * update: debug toggle * [autofix.ci] apply automated fixes * update: enableDebug * update: use ResizablePanel * [autofix.ci] apply automated fixes * update: scroll * update: toggle full screen * Update ee/tabby-ui/lib/experiment-flags.ts Co-authored-by: Meng Zhang <[email protected]> * rename * remove vaul * rename * update --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Meng Zhang <[email protected]>
TabbyML · Jul 24, 2024 · c60c817 · c60c817
1 parent ac313f3
commit c60c817
Show file tree

Hide file tree

Showing 7 changed files with 522 additions and 193 deletions.
diff --git a/ee/tabby-ui/app/(dashboard)/experiments/components/feature-list.tsx b/ee/tabby-ui/app/(dashboard)/experiments/components/feature-list.tsx
@@ -2,6 +2,7 @@
 
 import {
   useEnableCodeBrowserQuickActionBar,
+  useEnableDeveloperMode,
   useEnableSearch
 } from '@/lib/experiment-flags'
 import { Switch } from '@/components/ui/switch'
@@ -10,6 +11,7 @@ export default function FeatureList() {
   const [quickActionBar, toggleQuickActionBar] =
     useEnableCodeBrowserQuickActionBar()
   const [search, toggleSearch] = useEnableSearch()
+  const [developerMode, toggleDeveloperMode] = useEnableDeveloperMode()
   return (
     <>
       {!quickActionBar.loading && (
@@ -39,6 +41,22 @@ export default function FeatureList() {
           <Switch checked={search.value} onCheckedChange={toggleSearch} />
         </div>
       )}
+      {!developerMode.loading && (
+        <div className="flex items-center space-x-4 rounded-md border p-4">
+          <div className="flex-1 space-y-1">
+            <p className="text-sm font-medium leading-none">
+              {developerMode.title}
+            </p>
+            <p className="text-sm text-muted-foreground">
+              {developerMode.description}
+            </p>
+          </div>
+          <Switch
+            checked={developerMode.value}
+            onCheckedChange={toggleDeveloperMode}
+          />
+        </div>
+      )}
     </>
   )
 }
diff --git a/ee/tabby-ui/app/search/components/dev-panel.tsx b/ee/tabby-ui/app/search/components/dev-panel.tsx
@@ -0,0 +1,75 @@
+import React, { lazy, Suspense, useEffect, useRef } from 'react'
+
+import { useEnableDeveloperMode } from '@/lib/experiment-flags'
+import { useCurrentTheme } from '@/lib/hooks/use-current-theme'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { IconChevronDown, IconClose } from '@/components/ui/icons'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { ListSkeleton } from '@/components/skeleton'
+
+const ReactJsonView = lazy(() => import('react-json-view'))
+
+interface DevPanelProps {
+  isFullScreen: boolean
+  onToggleFullScreen: (fullScreen: boolean) => void
+  value: object | undefined
+  onClose: () => void
+}
+
+export const DevPanel: React.FC<DevPanelProps> = ({
+  value,
+  isFullScreen,
+  onToggleFullScreen,
+  onClose
+}) => {
+  const [enableDeveloperMode] = useEnableDeveloperMode()
+  const { theme } = useCurrentTheme()
+  const scrollAreaRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (value) {
+      scrollAreaRef.current?.children?.[1]?.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      })
+    }
+  }, [value])
+
+  if (!enableDeveloperMode?.value) return null
+
+  if (!open) return null
+
+  return (
+    <div className="flex h-full flex-col px-3 pt-2">
+      <div className="flex items-center justify-end pb-2">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={e => onToggleFullScreen(!isFullScreen)}
+          >
+            <IconChevronDown
+              className={cn('transition-all', isFullScreen ? '' : 'rotate-180')}
+            />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <IconClose />
+          </Button>
+        </div>
+      </div>
+      <Suspense fallback={<ListSkeleton className="p-2" />}>
+        {value ? (
+          <ScrollArea className="flex-1" ref={scrollAreaRef}>
+            <ReactJsonView
+              theme={theme === 'dark' ? 'tomorrow' : 'rjv-default'}
+              src={value}
+              style={{ fontSize: '0.75rem' }}
+              collapseStringsAfterLength={120}
+            />
+          </ScrollArea>
+        ) : null}
+      </Suspense>
+    </div>
+  )
+}