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/TopicPanel/RecursiveTopicDeleteButton.tsx

@@ -1,13 +1,13 @@
-import * as q from '../../../../../backend/src/Model'
-import CustomIconButton from '../../helper/CustomIconButton'
 import Delete from '@mui/icons-material/Delete'
 import React, { useCallback } from 'react'
 import { Badge } from '@mui/material'
+import * as q from '../../../../../backend/src/Model'
+import CustomIconButton from '../../helper/CustomIconButton'
 
-export const RecursiveTopicDeleteButton = (props: {
+export function RecursiveTopicDeleteButton(props: {
   node?: q.TreeNode<any>
   deleteTopicAction: (node: q.TreeNode<any>, a: boolean, limit: number) => void
-}) => {
+}) {
   const onClick = useCallback(
     (event: React.MouseEvent) => {
       if (props.node) {

app/src/components/Sidebar/TopicPanel/Topic.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import * as q from '../../../../../backend/src/Model'
 import Button from '@mui/material/Button'
 import { withStyles } from '@mui/styles'
 import { Theme } from '@mui/material/styles'
-import { treeActions } from '../../../actions'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import * as q from '../../../../../backend/src/Model'
+import { treeActions } from '../../../actions'
 import { TopicViewModel } from '../../../model/TopicViewModel'
 
 interface Props {
@@ -18,7 +18,7 @@ interface Props {
 
 const styles = (theme: Theme) => ({
   button: {
-    textTransform: 'none' as 'none',
+    textTransform: 'none' as const,
     padding: '3px 5px 3px 5px',
     minWidth: '30px',
   },
@@ -61,10 +61,8 @@ class Topic extends React.PureComponent<Props, {}> {
   }
 }
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(treeActions, dispatch),
-  }
-}
+const mapDispatchToProps = (dispatch: any) => ({
+  actions: bindActionCreators(treeActions, dispatch),
+})
 
 export default connect(null, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Topic) as any)

app/src/components/Sidebar/TopicPanel/TopicDeleteButton.tsx

@@ -1,12 +1,12 @@
-import * as q from '../../../../../backend/src/Model'
-import CustomIconButton from '../../helper/CustomIconButton'
 import Delete from '@mui/icons-material/Delete'
 import React from 'react'
+import * as q from '../../../../../backend/src/Model'
+import CustomIconButton from '../../helper/CustomIconButton'
 
-export const TopicDeleteButton = (props: {
+export function TopicDeleteButton(props: {
   node?: q.TreeNode<any>
   deleteTopicAction: (node: q.TreeNode<any>) => void
-}) => {
+}) {
   const { node } = props
   if (!node || !node.message || !node.message.payload) {
     return null

app/src/components/Sidebar/TopicPanel/TopicPanel.tsx

@@ -1,16 +1,17 @@
+import React, { useMemo, useCallback } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
 import * as q from '../../../../../backend/src/Model'
 import Copy from '../../helper/Copy'
 import Panel from '../Panel'
-import React, { useMemo, useCallback } from 'react'
 import Topic from './Topic'
-const TopicAny = Topic as any
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
 import { RecursiveTopicDeleteButton } from './RecursiveTopicDeleteButton'
 import { TopicDeleteButton } from './TopicDeleteButton'
 import { TopicTypeButton } from './TopicTypeButton'
 import { sidebarActions } from '../../../actions'
 
+const TopicAny = Topic as any
+
 const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActions }) => {
   const { node } = props
 
@@ -25,7 +26,7 @@ const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActi
 
   return useMemo(
     () => (
-      <Panel disabled={!Boolean(node)}>
+      <Panel disabled={!node}>
         <span>
           Topic {copyTopic}
           <TopicDeleteButton node={node} deleteTopicAction={deleteTopic} />
@@ -39,10 +40,8 @@ const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActi
   )
 }
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(sidebarActions, dispatch),
-  }
-}
+const mapDispatchToProps = (dispatch: any) => ({
+  actions: bindActionCreators(sidebarActions, dispatch),
+})
 
 export default connect(undefined, mapDispatchToProps)(TopicPanel)

app/src/components/Sidebar/TopicPanel/TopicTypeButton.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useMemo } from 'react'
-import * as q from '../../../../../backend/src/Model'
 import ClickAwayListener from '@mui/material/ClickAwayListener'
 import Grow from '@mui/material/Grow'
 import Button from '@mui/material/Button'
@@ -8,10 +7,11 @@ import Popper from '@mui/material/Popper'
 import MenuItem from '@mui/material/MenuItem'
 import MenuList from '@mui/material/MenuList'
 import WarningRounded from '@mui/icons-material/WarningRounded'
-import { MessageDecoder, decoders } from '../../../decoders'
 import { Tooltip } from '@mui/material'
+import * as q from '../../../../../backend/src/Model'
+import { MessageDecoder, decoders } from '../../../decoders'
 
-export const TopicTypeButton = (props: { node?: q.TreeNode<any> }) => {
+export function TopicTypeButton(props: { node?: q.TreeNode<any> }) {
   const { node } = props
   if (!node || !node.message || !node.message.payload) {
     return null
@@ -87,9 +87,10 @@ export const TopicTypeButton = (props: { node?: q.TreeNode<any> }) => {
 }
 
 function DecoderStatus({ node, decoder, format }: { node: q.TreeNode<any>; decoder: MessageDecoder; format: string }) {
-  const decoded = useMemo(() => {
-    return node.message?.payload && decoder.decode(node.message?.payload, format)
-  }, [node.message, decoder, format])
+  const decoded = useMemo(
+    () => node.message?.payload && decoder.decode(node.message?.payload, format),
+    [node.message, decoder, format]
+  )
 
   return decoded?.error ? (
     <Tooltip title={decoded.error}>