Add LLM-powered assistant for MQTT topic interaction (OpenAI & Gemini) (#1028)

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/DetailsTab.tsx

@@ -19,6 +19,7 @@ import DeleteIcon from '@mui/icons-material/Delete'
 import DeleteSweepIcon from '@mui/icons-material/DeleteSweep'
 import Info from '@mui/icons-material/Info'
 import SimpleBreadcrumb from './SimpleBreadcrumb'
+import AIAssistant from './AIAssistant'
 
 interface Props {
   node?: q.TreeNode<any>
@@ -195,7 +196,10 @@ function DetailsTab(props: Props) {
           </Box>
         </Box>
       )}
-      
+
+      {/* AI Assistant - Always available when a node is selected */}
+      {node && <AIAssistant node={node} />}
+
       {/* About Section - always visible at bottom */}
       <Box className={classes.aboutSection}>
         <Button
@@ -235,6 +239,11 @@ const styles = (theme: Theme) => ({
     paddingTop: theme.spacing(2),
     borderTop: `1px solid ${theme.palette.divider}`,
   },
+  aboutSection: {
+    marginTop: theme.spacing(3),
+    paddingTop: theme.spacing(2),
+    borderTop: `1px solid ${theme.palette.divider}`,
+  },
   // Topic section
   topicSection: {
     display: 'flex',