From ccfbd0006f21158744a66471f7663f8116bbc7b7 Mon Sep 17 00:00:00 2001
From: nl_0 <nl.imbecile@gmail.com>
Date: Wed, 16 Oct 2024 12:19:10 +0200
Subject: [PATCH] feat: enhance DevTools with context and prompt display

---
 .../Assistant/Model/Conversation.ts           |  2 +-
 .../app/components/Assistant/UI/Chat/Chat.tsx |  4 +++-
 .../components/Assistant/UI/Chat/DevTools.tsx | 21 +++++++++++++++----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/catalog/app/components/Assistant/Model/Conversation.ts b/catalog/app/components/Assistant/Model/Conversation.ts
index 48e9c47c47a..5fcbb1ef578 100644
--- 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
index ac21f3f5f91..e535e8d9847 100644
--- 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
index 005265a3be1..5e369f76dd2 100644
--- 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>
     </>
   )