refactor: update AgentChat component for OpenAI integration and enhance markdown support

Signed-off-by: Andre Bossard <anbossar@microsoft.com>

Author: abossard

backend/agents.py

@@ -405,21 +405,34 @@ async def run_agent(self, request: AgentRequest) -> AgentResponse:
             agent = create_react_agent(self.llm, self.tools)
 
             # System message to guide the agent's behavior
-            system_msg = (
-                "You are a support ticket management assistant. "
-                "Use the CSV tools: csv_list_tickets, csv_search_tickets, csv_get_ticket, csv_ticket_fields. "
-                "You MUST use the available tools to perform all actions - NEVER simulate or invent data. "
-                "\n\n"
-                "TICKET CAPABILITIES:\n"
-                "- List tickets with filters (status, assigned_group, has_assignee)\n"
-                "- Search tickets across summary/description/notes/resolution/requester/group/city\n"
-                "- Get a ticket by id (UUID) including notes and resolution\n"
-                "- Inspect available ticket fields (schema)\n"
-                "\n"
-                "When users ask about tickets, call the csv_* tools and summarize results. "
-                "If a field is not present, state that explicitly. "
-                "Always confirm actions based on actual tool results."
-            )
+            tool_lines = []
+            for t in self.tools:
+                name = t.name if hasattr(t, 'name') else str(t)
+                desc = (t.description if hasattr(t, 'description') else "") or ""
+                tool_lines.append(f"- `{name}`: {desc}".strip())
+            tools_md = "\n".join(tool_lines) if tool_lines else "- (none)"
+
+            system_msg = f"""
+Du bist ein freundlicher CSV-Ticket-Assistent. Sprich **Deutsch**.
+
+Antwortstil:
+- Starte immer mit einer kurzen Begrüßung.
+- Liste sofort die verfügbaren Tools (Markdown-Bullets).
+- Nutze **Markdown** mit klaren Überschriften (##), Bullet-Listen und Tabellen, wenn sinnvoll.
+- Für JSON-Daten nutze fenced Code-Blöcke:
+  ```json
+  {{"example": "value"}}
+  ```
+- Halte Antworten knapp und gut strukturiert.
+
+Verfügbare Tools:
+{tools_md}
+
+Verhalten:
+- Verwende ausschließlich die csv_* Tools für Ticket-Informationen. Keine Daten erfinden.
+- Falls Daten fehlen, sage das explizit.
+- Fasse Ergebnisse klar zusammen; für Listen sind kompakte Tabellen ideal.
+"""
 
             # Execute agent with user prompt
             print(f"\n{'='*60}")

frontend/package.json

@@ -23,7 +23,9 @@
     "@nivo/stream": "^0.99.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^7.9.6"
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.9.6",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.42.1",

frontend/src/features/agent/AgentChat.jsx

@@ -1,8 +1,8 @@
 /**
  * AgentChat Component
  *
- * Chat interface for Azure OpenAI LangGraph Agent
- * Agent has access to task tools and ticket MCP tools
+ * Chat interface for OpenAI LangGraph Agent
+ * Agent has access to CSV ticket tools
  *
  * Following principles:
  * - Pure functions for message formatting (calculations)
@@ -31,6 +31,8 @@ import {
     Wrench20Regular,
 } from '@fluentui/react-icons'
 import { useEffect, useRef, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import { agentChat } from '../../services/api'
 
 const useStyles = makeStyles({
@@ -105,6 +107,46 @@ const useStyles = makeStyles({
     wordBreak: 'break-word',
     whiteSpace: 'pre-wrap',
   },
+  messageContentMarkdown: {
+    whiteSpace: 'normal',
+    lineHeight: 1.5,
+  },
+  markdown: {
+    '& h1, & h2, & h3': {
+      margin: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalXS}`,
+      fontWeight: tokens.fontWeightSemibold,
+    },
+    '& ul, & ol': {
+      paddingLeft: tokens.spacingHorizontalL,
+      margin: `${tokens.spacingVerticalXS} 0`,
+    },
+    '& table': {
+      width: '100%',
+      borderCollapse: 'collapse',
+      marginTop: tokens.spacingVerticalXS,
+    },
+    '& th, & td': {
+      border: `1px solid ${tokens.colorNeutralStroke1}`,
+      padding: tokens.spacingHorizontalXS,
+      textAlign: 'left',
+    },
+    '& pre': {
+      backgroundColor: tokens.colorNeutralBackground3,
+      padding: tokens.spacingHorizontalM,
+      borderRadius: tokens.borderRadiusSmall,
+      overflowX: 'auto',
+    },
+    '& code': {
+      fontFamily: 'monospace',
+      backgroundColor: tokens.colorNeutralBackground3,
+      padding: '0 4px',
+      borderRadius: tokens.borderRadiusSmall,
+    },
+    '& a': {
+      color: tokens.colorBrandForegroundLink,
+      textDecoration: 'underline',
+    },
+  },
   userContent: {
     backgroundColor: tokens.colorBrandBackground2,
   },
@@ -230,7 +272,7 @@ export default function AgentChat() {
                 <Text weight="semibold" size={500}>
                   AI Agent
                 </Text>
-                <Badge color="informative" appearance="filled">Azure OpenAI</Badge>
+                <Badge color="informative" appearance="filled">OpenAI</Badge>
               </div>
               <div className={styles.headerControls}>
                 <Text size={200}>Powered by LangGraph + GPT</Text>
@@ -252,12 +294,12 @@ export default function AgentChat() {
           {messages.length === 0 && !error && (
             <div className={styles.emptyState}>
               <Bot24Regular style={{ fontSize: '48px', marginBottom: tokens.spacingVerticalM }} />
-              <Text size={400}>Start a conversation with the AI Agent</Text>
+              <Text size={400}>Starte eine Unterhaltung mit dem AI Agenten</Text>
               <Text size={300} style={{ marginTop: tokens.spacingVerticalS, display: 'block' }}>
-                The agent can manage tasks and tickets for you!
+                Der Agent kann Tickets durchsuchen und Details anzeigen.
               </Text>
               <Text size={200} style={{ marginTop: tokens.spacingVerticalM, display: 'block' }}>
-                Try: "Create a task to review the documentation" or "List all tasks"
+                Versuche: "Suche Tickets mit 'VPN'" oder "Zeige Ticket [Ticket-ID]"
               </Text>
             </div>
           )}
@@ -285,9 +327,15 @@ export default function AgentChat() {
               <div
                 className={`${styles.messageContent} ${
                   message.role === 'user' ? styles.userContent : styles.assistantContent
-                }`}
+                } ${message.role !== 'user' ? styles.messageContentMarkdown : ''}`}
               >
-                <Text>{message.content}</Text>
+                {message.role === 'user' ? (
+                  <Text style={{ whiteSpace: 'pre-wrap' }}>{message.content}</Text>
+                ) : (
+                  <div className={styles.markdown}>
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
+                  </div>
+                )}
                 {message.error && (
                   <div className={styles.errorDetails}>
                     <Text weight="semibold" size={200} style={{ color: tokens.colorPaletteRedForeground1 }}>