feat: enhance DevTools with context and prompt display

quiltdata · Oct 16, 2024 · b5252c2 · b5252c2
1 parent 5dee9b8
commit b5252c2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/catalog/app/components/Assistant/Model/Conversation.ts b/catalog/app/components/Assistant/Model/Conversation.ts
@@ -360,7 +360,7 @@ to your advantage.
 Use GitHub Flavored Markdown syntax for formatting when appropriate.
 `
 
-const constructPrompt = (
+export const constructPrompt = (
   events: Event[],
   context: Context.ContextShape,
 ): Eff.Effect.Effect<LLM.Prompt> =>

diff --git a/catalog/app/components/Assistant/UI/Chat/Chat.tsx b/catalog/app/components/Assistant/UI/Chat/Chat.tsx
@@ -350,6 +350,8 @@ const useStyles = M.makeStyles((t) => ({
     top: t.spacing(1),
   },
   devTools: {
+    height: '50%',
+    overflow: 'auto',
     padding: t.spacing(1),
   },
   historyContainer: {
@@ -420,7 +422,7 @@ export default function Chat({ state, dispatch }: ChatProps) {
         onToggleDevTools={toggleDevTools}
         className={classes.menu}
       />
-      <M.Slide direction="down" in={devToolsOpen}>
+      <M.Slide direction="down" mountOnEnter unmountOnExit in={devToolsOpen}>
         <M.Paper square className={classes.devTools}>
           <DevTools state={state} dispatch={dispatch} onToggle={toggleDevTools} />
         </M.Paper>

diff --git a/catalog/app/components/Assistant/UI/Chat/DevTools.tsx b/catalog/app/components/Assistant/UI/Chat/DevTools.tsx
@@ -1,11 +1,8 @@
-import cx from 'classnames'
 import * as Eff from 'effect'
 import * as React from 'react'
 import * as M from '@material-ui/core'
 
 import JsonDisplay from 'components/JsonDisplay'
-import Markdown from 'components/Markdown'
-import usePrevious from 'utils/usePrevious'
 
 import * as Model from '../../Model'
 
@@ -16,9 +13,25 @@ interface DevToolsProps {
 }
 
 export default function DevTools({ state, dispatch, onToggle }: DevToolsProps) {
+  const context = Model.Context.useAggregatedContext()
+
+  const prompt = React.useMemo(
+    () =>
+      Eff.Effect.runSync(
+        Model.Conversation.constructPrompt(
+          state.events.filter((e) => !e.discarded),
+          context,
+        ),
+      ),
+    [state, context],
+  )
+
   return (
     <>
-      <JsonDisplay name="State" value={state} defaultExpanded={1} />
+      <JsonDisplay name="Context" value={context} />
+      <JsonDisplay name="State" value={state} />
+      <JsonDisplay name="Prompt" value={prompt} />
+
       <M.Button onClick={onToggle}>Close</M.Button>
     </>
   )