discard tool use; more timestamps

catalog/app/components/Assistant/Model/Assistant.tsx

@@ -30,7 +30,7 @@ function useConstructAssistantAPI() {
   )
   const [state, dispatch] = Actor.useActorLayer(
     Conversation.ConversationActor,
-    Eff.Effect.succeed(Conversation.init),
+    Conversation.init,
     layerEff,
   )
 

catalog/app/components/Assistant/Model/Conversation.ts

@@ -15,7 +15,7 @@ const MODULE = 'Conversation'
 // TODO: make this a globally available service?
 const genId = Eff.Effect.sync(uuid.v4)
 
-interface ToolCall {
+export interface ToolCall {
   readonly name: string
   readonly input: Record<string, any>
   readonly fiber: Eff.Fiber.RuntimeFiber<void>
@@ -49,12 +49,16 @@ export type Event = Eff.Data.TaggedEnum<{
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const Event = Eff.Data.taggedEnum<Event>()
 
+interface StateBase {
+  readonly events: Event[]
+  readonly timestamp: Date
+}
+
 export type State = Eff.Data.TaggedEnum<{
   /**
    * Waiting for user input
    */
-  Idle: {
-    readonly events: Event[]
+  Idle: StateBase & {
     readonly error: Eff.Option.Option<{
       message: string
       details: string
@@ -64,16 +68,14 @@ export type State = Eff.Data.TaggedEnum<{
   /**
    * Waiting for assistant (LLM) to respond
    */
-  WaitingForAssistant: {
-    readonly events: Event[]
+  WaitingForAssistant: StateBase & {
     readonly requestFiber: Eff.Fiber.RuntimeFiber<boolean>
   }
 
   /**
    * Tool use in progress
    */
-  ToolUse: {
-    readonly events: Event[]
+  ToolUse: StateBase & {
     // TODO: use HashMap?
     readonly calls: Record<string, ToolCall>
     // readonly retries: number
@@ -112,9 +114,12 @@ export type Action = Eff.Data.TaggedEnum<{
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const Action = Eff.Data.taggedEnum<Action>()
 
-export const init = State.Idle({
-  events: [],
-  error: Eff.Option.none(),
+export const init = Eff.Effect.gen(function* () {
+  return State.Idle({
+    timestamp: new Date(yield* Eff.Clock.currentTimeMillis),
+    events: [],
+    error: Eff.Option.none(),
+  })
 })
 
 const llmRequest = (events: Event[]) =>
@@ -153,9 +158,10 @@ export const ConversationActor = Eff.Effect.succeed(
       Idle: {
         Ask: (state, action, dispatch) =>
           Eff.Effect.gen(function* () {
+            const timestamp = new Date(yield* Eff.Clock.currentTimeMillis)
             const event = Event.Message({
               id: yield* genId,
-              timestamp: new Date(yield* Eff.Clock.currentTimeMillis),
+              timestamp,
               role: 'user',
               content: Content.text(action.content),
             })
@@ -167,10 +173,13 @@ export const ConversationActor = Eff.Effect.succeed(
               (r) => Eff.Effect.succeed(Action.LLMResponse(r)),
               (error) => Eff.Effect.succeed(Action.LLMError({ error })),
             )
-            return State.WaitingForAssistant({ events, requestFiber })
+            return State.WaitingForAssistant({ events, timestamp, requestFiber })
           }),
         Clear: () =>
-          Eff.Effect.succeed(State.Idle({ events: [], error: Eff.Option.none() })),
+          Eff.Effect.gen(function* () {
+            const timestamp = new Date(yield* Eff.Clock.currentTimeMillis)
+            return State.Idle({ events: [], timestamp, error: Eff.Option.none() })
+          }),
         Discard: (state, { id }) =>
           Eff.Effect.succeed({
             ...state,
@@ -184,6 +193,7 @@ export const ConversationActor = Eff.Effect.succeed(
           Eff.Effect.gen(function* () {
             return State.Idle({
               events: state.events,
+              timestamp: new Date(yield* Eff.Clock.currentTimeMillis),
               error: Eff.Option.some({
                 message: 'Error while interacting with LLM. Please try again.',
                 details: `${error}`,
@@ -210,7 +220,8 @@ export const ConversationActor = Eff.Effect.succeed(
               )
             }
 
-            if (!toolUses.length) return State.Idle({ events, error: Eff.Option.none() })
+            if (!toolUses.length)
+              return State.Idle({ events, timestamp, error: Eff.Option.none() })
 
             const ctxService = yield* Context.ConversationContext
             const { tools } = yield* ctxService.context
@@ -229,7 +240,7 @@ export const ConversationActor = Eff.Effect.succeed(
               }
             }
 
-            return State.ToolUse({ events, calls })
+            return State.ToolUse({ events, timestamp: state.timestamp, calls })
           }),
         Abort: (state) =>
           Eff.Effect.gen(function* () {
@@ -259,7 +270,8 @@ export const ConversationActor = Eff.Effect.succeed(
               events = events.concat(event)
             }
 
-            if (Object.keys(calls).length) return State.ToolUse({ events, calls })
+            if (Object.keys(calls).length)
+              return State.ToolUse({ events, timestamp: state.timestamp, calls })
 
             // all calls completed, send results back to LLM
             const requestFiber = yield* Actor.forkRequest(
@@ -268,7 +280,12 @@ export const ConversationActor = Eff.Effect.succeed(
               (r) => Eff.Effect.succeed(Action.LLMResponse(r)),
               (error) => Eff.Effect.succeed(Action.LLMError({ error })),
             )
-            return State.WaitingForAssistant({ events, requestFiber })
+            return State.WaitingForAssistant({
+              events,
+
+              timestamp: new Date(yield* Eff.Clock.currentTimeMillis),
+              requestFiber,
+            })
           }),
         Abort: (state) =>
           Eff.Effect.gen(function* () {

catalog/app/components/Assistant/UI/Chat/Chat.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import * as M from '@material-ui/core'
 // import * as Lab from '@material-ui/lab'
 
+import JsonDisplay from 'components/JsonDisplay'
 import Markdown from 'components/Markdown'
 
 import * as Model from '../../Model'
@@ -53,6 +54,7 @@ const useMessageContainerStyles = M.makeStyles((t) => ({
   contents: {
     ...t.typography.body2,
     color: t.palette.text.primary,
+    maxWidth: 'calc(50vw - 112px)',
     padding: `${t.spacing(1.5)}px`,
   },
   footer: {
@@ -131,19 +133,26 @@ function MessageAction({ children, onClick }: MessageActionProps) {
 
 type ConversationDispatch = (action: Model.Conversation.Action) => void
 
-interface MessageSharedProps {
+interface ConversationDispatchProps {
   dispatch: ConversationDispatch
+}
+
+interface ConversationStateProps {
   state: Model.Conversation.State['_tag']
 }
 
-function Message({
+type MessageEventProps = ConversationDispatchProps &
+  ConversationStateProps &
+  ReturnType<typeof Model.Conversation.Event.Message>
+
+function MessageEvent({
   state,
   id,
   timestamp,
   dispatch,
   role,
   content,
-}: MessageSharedProps & ReturnType<typeof Model.Conversation.Event.Message>) {
+}: MessageEventProps) {
   const discard = React.useMemo(
     () =>
       state === 'Idle' ? () => dispatch(Model.Conversation.Action.Discard({ id })) : null,
@@ -152,7 +161,7 @@ function Message({
   return (
     <MessageContainer
       role={role}
-      actions={<>{discard && <MessageAction onClick={discard}>discard</MessageAction>}</>}
+      actions={discard && <MessageAction onClick={discard}>discard</MessageAction>}
       timestamp={timestamp}
     >
       {Model.Content.MessageContentBlock.$match(content, {
@@ -164,44 +173,79 @@ function Message({
   )
 }
 
-type ToolUseEvent = ReturnType<typeof Model.Conversation.Event.ToolUse>
-interface ToolUseProps
-  extends MessageSharedProps,
-    Omit<ToolUseEvent, '_tag' | 'timestamp' | 'id' | 'result'> {
-  result?: ToolUseEvent['result']
+type ToolUseEventProps = ConversationDispatchProps &
+  ConversationStateProps &
+  ReturnType<typeof Model.Conversation.Event.ToolUse>
+
+function ToolUseEvent({
+  state,
+  id,
+  timestamp,
+  toolUseId,
+  name,
+  input,
+  result,
+  dispatch,
+}: ToolUseEventProps) {
+  const discard = React.useMemo(
+    () =>
+      state === 'Idle' ? () => dispatch(Model.Conversation.Action.Discard({ id })) : null,
+    [dispatch, id, state],
+  )
+  const details = React.useMemo(
+    () => ({ toolUseId, input, result }),
+    [toolUseId, input, result],
+  )
+  // FIXME: JsonDisplay expansion doesn't work
+  return (
+    <MessageContainer
+      role="assistant"
+      timestamp={timestamp}
+      actions={discard && <MessageAction onClick={discard}>discard</MessageAction>}
+    >
+      <span>
+        Tool Use: <b>{name}</b> ({result.status})
+      </span>
+      <M.Box py={0.5}>
+        {/* @ts-expect-error */}
+        <JsonDisplay name="details" value={details} />
+      </M.Box>
+    </MessageContainer>
+  )
 }
 
-function ToolUse({
-  // id,
-  // timestamp,
+interface ToolUseStateProps
+  extends ConversationDispatchProps,
+    Model.Conversation.ToolCall {
+  toolUseId: string
+  timestamp: Date
+}
+
+function ToolUseState({
+  timestamp,
   toolUseId,
   name,
   input,
-  result, // dispatch,
-}: ToolUseProps) {
-  const details = (
-    <>
-      <b>Tool Use ID:</b> {toolUseId}
-      <br />
-      <b>Tool Name:</b> {name}
-      <br />
-      <b>Input:</b>
-      <pre>{JSON.stringify(input, null, 2)}</pre>
-      {!!result && (
-        <>
-          <b>Result:</b>
-          <pre>{JSON.stringify(result, null, 2)}</pre>
-        </>
-      )}
-    </>
+  dispatch,
+}: ToolUseStateProps) {
+  const abort = React.useCallback(
+    () => dispatch(Model.Conversation.Action.Abort()),
+    [dispatch],
   )
+  const details = React.useMemo(() => ({ toolUseId, input }), [toolUseId, input])
   return (
-    <MessageContainer role="assistant">
-      <M.Tooltip title={details}>
-        <span>
-          Tool Use: <b>{name}</b> ({result?.status ?? 'in progress'})
-        </span>
-      </M.Tooltip>
+    <MessageContainer
+      role="assistant"
+      timestamp={timestamp}
+      actions={<MessageAction onClick={abort}>abort</MessageAction>}
+    >
+      <span>
+        Tool Use: <b>{name}</b> (in progress)
+      </span>
+      <M.Box py={0.5}>
+        {/* @ts-expect-error */}
+        <JsonDisplay name="details" value={details} />
+      </M.Box>
     </MessageContainer>
   )
 }
@@ -319,15 +363,15 @@ export default function Chat({ state, dispatch }: ChatProps) {
             .map(
               Model.Conversation.Event.$match({
                 Message: (event) => (
-                  <Message
+                  <MessageEvent
                     state={state._tag}
                     key={event.id}
                     dispatch={dispatch}
                     {...event}
                   />
                 ),
                 ToolUse: (event) => (
-                  <ToolUse
+                  <ToolUseEvent
                     state={state._tag}
                     key={event.id}
                     dispatch={dispatch}
@@ -340,7 +384,7 @@ export default function Chat({ state, dispatch }: ChatProps) {
             Idle: (s) =>
               Eff.Option.match(s.error, {
                 onSome: (e) => (
-                  <MessageContainer role="assistant">
+                  <MessageContainer role="assistant" timestamp={s.timestamp}>
                     Error occurred:
                     {e.message}
                     {e.details}
@@ -349,14 +393,17 @@ export default function Chat({ state, dispatch }: ChatProps) {
                 ),
                 onNone: () => null,
               }),
-            WaitingForAssistant: () => (
-              <MessageContainer role="assistant">Processing...</MessageContainer>
+            WaitingForAssistant: (s) => (
+              // TODO: abort
+              <MessageContainer role="assistant" timestamp={s.timestamp}>
+                Processing...
+              </MessageContainer>
             ),
-            ToolUse: ({ calls }) =>
+            ToolUse: ({ calls, timestamp }) =>
               Object.entries(calls).map(([id, call]) => (
-                <ToolUse
-                  state={state._tag}
+                <ToolUseState
                   key={id}
+                  timestamp={timestamp}
                   dispatch={dispatch}
                   toolUseId={id}
                   {...call}