Add observability for LLM topic context inclusion (#1038)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>
Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>

app/src/components/Sidebar/Publish/Publish.tsx

@@ -1,19 +1,19 @@
-import Editor from './Editor'
 import { AttachFileOutlined, FormatAlignLeft } from '@mui/icons-material'
-import Message from './Model/Message'
 import Navigation from '@mui/icons-material/Navigation'
-import PublishHistory from './PublishHistory'
 import React, { useCallback, useMemo, useState, useRef, memo } from 'react'
-import RetainSwitch from './RetainSwitch'
-import TopicInput from './TopicInput'
-import { AppState } from '../../../reducers'
 import { bindActionCreators } from 'redux'
 import { Button, Fab, Tooltip } from '@mui/material'
 import { connect } from 'react-redux'
+import { default as AceEditor } from 'react-ace'
+import Editor from './Editor'
+import Message from './Model/Message'
+import PublishHistory from './PublishHistory'
+import RetainSwitch from './RetainSwitch'
+import TopicInput from './TopicInput'
+import { AppState } from '../../../reducers'
 import { EditorModeSelect } from './EditorModeSelect'
 import { globalActions, publishActions } from '../../../actions'
 import { KeyCodes } from '../../../utils/KeyCodes'
-import { default as AceEditor } from 'react-ace'
 
 interface Props {
   connectionId?: string
@@ -56,7 +56,7 @@ function Publish(props: Props) {
     props.actions.publish(props.connectionId)
 
     const topic = props.topic || ''
-    const payload = props.payload
+    const { payload } = props
     if (props.connectionId && topic) {
       amendToHistory(topic, payload)
     }
@@ -101,87 +101,85 @@ function Publish(props: Props) {
   )
 }
 
-const EditorMode = memo(function EditorMode(props: {
-  payload?: string
-  editorMode: string
-  focusEditor: () => void
-  actions: typeof publishActions
-  globalActions: typeof globalActions
-  publish: () => void
-}) {
-  const updatePayload = props.actions.setPayload
+const EditorMode = memo(
+  (props: {
+    payload?: string
+    editorMode: string
+    focusEditor: () => void
+    actions: typeof publishActions
+    globalActions: typeof globalActions
+    publish: () => void
+  }) => {
+    const updatePayload = props.actions.setPayload
 
-  const updateMode = useCallback((e: React.ChangeEvent<{}>, value: string) => {
-    props.actions.setEditorMode(value)
-  }, [])
+    const updateMode = useCallback((e: React.ChangeEvent<{}>, value: string) => {
+      props.actions.setEditorMode(value)
+    }, [])
 
-  const openFile = useCallback(() => {
-    props.actions.openFile()
-  }, [])
+    const openFile = useCallback(() => {
+      props.actions.openFile()
+    }, [])
 
-  const formatJson = useCallback(() => {
-    if (props.payload) {
-      try {
-        const str = JSON.stringify(JSON.parse(props.payload), undefined, '  ')
-        updatePayload(str)
-      } catch (error) {
-        props.globalActions.showError(`Format error: ${(error as Error)?.message}`)
+    const formatJson = useCallback(() => {
+      if (props.payload) {
+        try {
+          const str = JSON.stringify(JSON.parse(props.payload), undefined, '  ')
+          updatePayload(str)
+        } catch (error) {
+          props.globalActions.showError(`Format error: ${(error as Error)?.message}`)
+        }
       }
-    }
-  }, [props.payload])
+    }, [props.payload])
 
-  return (
-    <div style={{ marginTop: '16px' }}>
-      <div style={{ width: '100%', lineHeight: '64px', textAlign: 'center' }}>
-        <EditorModeSelect value={props.editorMode} onChange={updateMode} focusEditor={props.focusEditor} />
-        <FormatJsonButton editorMode={props.editorMode} focusEditor={props.focusEditor} formatJson={formatJson} />
-        <OpenFileButton editorMode={props.editorMode} openFile={openFile} />
-        <div style={{ float: 'right' }}>
-          <PublishButton publish={props.publish} focusEditor={props.focusEditor} />
+    return (
+      <div style={{ marginTop: '16px' }}>
+        <div style={{ width: '100%', lineHeight: '64px', textAlign: 'center' }}>
+          <EditorModeSelect value={props.editorMode} onChange={updateMode} focusEditor={props.focusEditor} />
+          <FormatJsonButton editorMode={props.editorMode} focusEditor={props.focusEditor} formatJson={formatJson} />
+          <OpenFileButton editorMode={props.editorMode} openFile={openFile} />
+          <div style={{ float: 'right' }}>
+            <PublishButton publish={props.publish} focusEditor={props.focusEditor} />
+          </div>
         </div>
       </div>
-    </div>
-  )
-})
-
-const FormatJsonButton = React.memo(function FormatJsonButton(props: {
-  editorMode: string
-  focusEditor: () => void
-  formatJson: () => void
-}) {
-  if (props.editorMode !== 'json') {
-    return null
+    )
   }
+)
 
-  return (
-    <Tooltip title="Format JSON">
-      <Fab
-        style={{ width: '36px', height: '36px', margin: '0 8px' }}
-        onClick={props.formatJson}
-        onFocus={props.focusEditor}
-        id="sidebar-publish-format-json"
-      >
-        <FormatAlignLeft style={{ fontSize: '20px' }} />
-      </Fab>
-    </Tooltip>
-  )
-})
+const FormatJsonButton = React.memo(
+  (props: { editorMode: string; focusEditor: () => void; formatJson: () => void }) => {
+    if (props.editorMode !== 'json') {
+      return null
+    }
 
-const OpenFileButton = React.memo(function OpenFileButton(props: { editorMode: string; openFile: () => void }) {
-  return (
-    <Tooltip title="Open file">
-      <Fab
-        style={{ width: '36px', height: '36px', margin: '0 8px' }}
-        onClick={props.openFile}
-        id="sidebar-publish-open-file"
-      >
-        <AttachFileOutlined style={{ fontSize: '20px' }} />
-      </Fab>
-    </Tooltip>
-  )
-})
+    return (
+      <Tooltip title="Format JSON">
+        <Fab
+          style={{ width: '36px', height: '36px', margin: '0 8px' }}
+          onClick={props.formatJson}
+          onFocus={props.focusEditor}
+          id="sidebar-publish-format-json"
+        >
+          <FormatAlignLeft style={{ fontSize: '20px' }} />
+        </Fab>
+      </Tooltip>
+    )
+  }
+)
 
-const PublishButton = memo(function PublishButton(props: { publish: () => void; focusEditor: () => void }) {
+const OpenFileButton = React.memo((props: { editorMode: string; openFile: () => void }) => (
+  <Tooltip title="Open file">
+    <Fab
+      style={{ width: '36px', height: '36px', margin: '0 8px' }}
+      onClick={props.openFile}
+      id="sidebar-publish-open-file"
+    >
+      <AttachFileOutlined style={{ fontSize: '20px' }} />
+    </Fab>
+  </Tooltip>
+))
+
+const PublishButton = memo((props: { publish: () => void; focusEditor: () => void }) => {
   const handleClickPublish = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
@@ -204,20 +202,16 @@ const PublishButton = memo(function PublishButton(props: { publish: () => void;
   )
 })
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(publishActions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
-  }
-}
+const mapDispatchToProps = (dispatch: any) => ({
+  actions: bindActionCreators(publishActions, dispatch),
+  globalActions: bindActionCreators(globalActions, dispatch),
+})
 
-const mapStateToProps = (state: AppState) => {
-  return {
-    topic: state.publish.manualTopic,
-    payload: state.publish.payload,
-    editorMode: state.publish.editorMode,
-    retain: state.publish.retain,
-  }
-}
+const mapStateToProps = (state: AppState) => ({
+  topic: state.publish.manualTopic,
+  payload: state.publish.payload,
+  editorMode: state.publish.editorMode,
+  retain: state.publish.retain,
+})
 
 export default connect(mapStateToProps, mapDispatchToProps)(Publish)