init

.dockerignore

@@ -0,0 +1,15 @@
+node_modules
+npm-debug.log
+build
+.git
+.gitignore
+README.md
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.vscode
+.idea
+*.md

Dockerfile

@@ -0,0 +1,34 @@
+# Build stage
+FROM node:18-alpine as build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy source code
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Production stage
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Install http-server
+RUN npm install -g http-server
+
+# Copy built assets from build stage
+COPY --from=build /app/build ./build
+
+# Expose port 3000
+EXPOSE 3000
+
+# Start the app using http-server
+CMD ["http-server", "build", "-p", "3000", "-a", "0.0.0.0"]

README.md

@@ -1,81 +1,10 @@
 ---
-title: BizInsights Frontend
-emoji: 🐠
-colorFrom: indigo
-colorTo: red
-sdk: static
+title: BizFrontend
+emoji: 🦀
+colorFrom: yellow
+colorTo: yellow
+sdk: docker
 pinned: false
-app_build_command: npm run build
-app_file: build/index.html
 ---
 
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

package.json

@@ -1,20 +1,32 @@
 {
-  "name": "react-template",
+  "name": "chat-interface",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.0",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "@types/jest": "^27.5.2",
+    "@types/jspdf": "^1.3.3",
+    "@types/node": "^16.18.38",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "jspdf": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
+  "homepage": ".",
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "GENERATE_SOURCEMAP=false INLINE_RUNTIME_CHUNK=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

public/index.html

@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Agent Marketplace</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

public/static.json

@@ -0,0 +1,14 @@
+{
+  "root": "/",
+  "clean_urls": true,
+  "routes": {
+    "/**": "index.html"
+  },
+  "headers": {
+    "/**": {
+      "Cache-Control": "no-cache, no-store, must-revalidate",
+      "Pragma": "no-cache",
+      "Expires": "0"
+    }
+  }
+}

src/.env

@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://localhost:8080

src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/{App.test.js → App.test.tsx}

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 

src/App.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { AgentProvider, useAgent } from './contexts/AgentContext';
+import ChatInterface from './components/ChatInterface';
+import AgentSelector from './components/AgentSelector';
+import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
+
+const theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#7C3AED', // violet
+      light: '#A78BFA',
+      dark: '#5B21B6',
+      contrastText: '#ffffff',
+    },
+    secondary: {
+      main: '#06B6D4', // cyan
+      light: '#67E8F9',
+      dark: '#0E7490',
+      contrastText: '#003543',
+    },
+    background: {
+      default: '#f7f9fc',
+      paper: '#ffffff',
+    },
+  },
+  shape: {
+    borderRadius: 12,
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  },
+});
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <AgentProvider>
+        <AppContent />
+      </AgentProvider>
+    </ThemeProvider>
+  );
+}
+
+// Separate component to use the useAgent hook
+function AppContent() {
+  const { selectedAgent } = useAgent();
+  
+  return (
+    <>
+      {selectedAgent ? (
+        <ChatInterface />
+      ) : (
+        <AgentSelector />
+      )}
+    </>
+  );
+}
+
+export default App;

src/components/AgentSelector.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { useAgent } from '../contexts/AgentContext';
+import {
+  Container,
+  Typography,
+  Grid,
+  Card,
+  CardActionArea,
+  Box,
+  Chip,
+  Avatar,
+} from '@mui/material';
+
+const AgentSelector: React.FC = () => {
+  const { availableAgents, setSelectedAgent } = useAgent();
+
+  return (
+    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
+      {/* Hero Section */}
+      <Box
+        sx={{
+          py: { xs: 6, md: 10 },
+          px: 2,
+          background: 'linear-gradient(135deg, rgba(25,118,210,0.1) 0%, rgba(220,0,78,0.06) 100%)',
+          borderBottom: theme => `1px solid ${theme.palette.divider}`,
+        }}
+      >
+        <Container maxWidth="lg">
+          <Typography variant="h2" component="h1" align="center" gutterBottom sx={{ fontWeight: 700 }}>
+            Agent Marketplace
+          </Typography>
+          <Typography variant="h6" color="text.secondary" align="center" sx={{ maxWidth: 800, mx: 'auto' }}>
+            Your AI copilot for insights. Choose an agent to get started.
+          </Typography>
+        </Container>
+      </Box>
+
+      {/* Agents Grid */}
+      <Container maxWidth="lg" sx={{ mt: { xs: 3, md: 6 }, pb: 6 }}>
+        <Grid container spacing={4}>
+          {availableAgents.map((agent) => (
+            <Grid item xs={12} sm={6} md={4} key={agent.id}>
+              <Card
+                elevation={2}
+                sx={{
+                  height: '100%',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  borderRadius: 3,
+                  border: theme => `1px solid ${theme.palette.divider}`,
+                  transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                  position: 'relative',
+                  '&:hover': {
+                    transform: 'translateY(-6px)',
+                    boxShadow: 8,
+                  },
+                }}
+              >
+                {agent.upcoming && (
+                  <Box sx={{ position: 'absolute', top: 12, right: 12 }}>
+                    <Chip size="small" color="secondary" label="Upcoming" />
+                  </Box>
+                )}
+
+                <CardActionArea
+                  disabled={agent.upcoming}
+                  onClick={() => !agent.upcoming && setSelectedAgent(agent)}
+                  sx={{
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    textAlign: 'center',
+                    p: 3,
+                    opacity: agent.upcoming ? 0.7 : 1,
+                    cursor: agent.upcoming ? 'not-allowed' : 'pointer',
+                  }}
+                >
+                  <Avatar
+                    src={agent.avatar}
+                    alt={agent.name}
+                    sx={{
+                      width: 88,
+                      height: 88,
+                      mb: 2,
+                      border: '3px solid',
+                      borderColor: 'primary.main',
+                      boxShadow: 2,
+                    }}
+                  />
+                  <Typography variant="h6" component="div" gutterBottom>
+                    {agent.name}
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary">
+                    {agent.description}
+                  </Typography>
+                </CardActionArea>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+    </Box>
+  );
+};
+
+export default AgentSelector;

src/components/ChatInterface.tsx

@@ -0,0 +1,284 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useAgent } from '../contexts/AgentContext';
+import ReportRenderer from './ReportRenderer';
+import {
+  Box,
+  Typography,
+  IconButton,
+  Avatar,
+  Paper,
+  TextField,
+  InputAdornment,
+  List,
+  ListItem,
+  ListItemAvatar,
+  AppBar,
+  Toolbar,
+  Chip,
+} from '@mui/material';
+import SendIcon from '@mui/icons-material/Send';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+
+const ChatInterface: React.FC = () => {
+  const { selectedAgent, setSelectedAgent } = useAgent();
+  type QuickReplyButton = { title: string; payload: string };
+  type CustomMultiSelect = {
+    type: 'multi_select_chips';
+    options: string[];
+    columns?: number;
+    hint?: string;
+    selections?: string[]; // maintained client-side
+  };
+  type ChatMessage = {
+    sender: 'user' | 'bot';
+    text?: string;
+    buttons?: QuickReplyButton[];
+    custom?: CustomMultiSelect;
+  };
+
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+
+  const sendMessage = async (outgoing: string) => {
+    if (!outgoing.trim()) return;
+    setIsLoading(true);
+    try {
+      console.log('[DEBUG] Sending message to Rasa REST webhook...', outgoing);
+      const res = await fetch(`http://localhost:5005/webhooks/rest/webhook`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sender: 'web-user', message: outgoing }),
+      });
+
+      if (!res.ok) throw new Error(`Backend error: ${res.status} ${res.statusText}`);
+      const data = await res.json();
+      console.log('[DEBUG] Rasa response:', data);
+
+      // Map Rasa messages to our ChatMessage structure (support text + buttons + custom multi-select)
+      const botMessages: ChatMessage[] = Array.isArray(data)
+        ? data
+            .map((m: any): ChatMessage | null => {
+              const text = typeof m?.text === 'string' ? m.text : undefined;
+              const buttons = Array.isArray(m?.buttons)
+                ? m.buttons
+                    .filter((b: any) => typeof b?.title === 'string' && typeof b?.payload === 'string')
+                    .map((b: any) => ({ title: b.title as string, payload: b.payload as string }))
+                : undefined;
+              let custom: ChatMessage['custom'] = undefined;
+              if (m?.custom && typeof m.custom === 'object' && m.custom.type === 'multi_select_chips') {
+                const opts = Array.isArray(m.custom.options) ? m.custom.options.filter((o: any) => typeof o === 'string') : [];
+                custom = {
+                  type: 'multi_select_chips',
+                  options: opts,
+                  columns: typeof m.custom.columns === 'number' ? m.custom.columns : undefined,
+                  hint: typeof m.custom.hint === 'string' ? m.custom.hint : undefined,
+                  selections: [],
+                };
+              }
+              if (!text && (!buttons || buttons.length === 0) && !custom) return null;
+              return { sender: 'bot', text, buttons, custom } as ChatMessage;
+            })
+            .filter(Boolean) as ChatMessage[]
+        : [];
+
+      if (botMessages.length > 0) {
+        setMessages(prev => [...prev, ...botMessages]);
+      }
+    } catch (error) {
+      console.error('[DEBUG] sendMessage error:', error);
+      setMessages(prev => [...prev, { text: '❌ Something went wrong.', sender: 'bot' }]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSendMessage = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!inputValue.trim()) return;
+    const userMessage = inputValue;
+    setMessages(prev => [...prev, { text: userMessage, sender: 'user' }]);
+    setInputValue('');
+    await sendMessage(userMessage);
+  };
+
+  const handleQuickReply = async (btn: QuickReplyButton) => {
+    // If this is a Continue button after a multi-select, append selections
+    const lastMultiIndex = [...messages]
+      .map((m, idx) => ({ m, idx }))
+      .reverse()
+      .find(item => item.m.custom?.type === 'multi_select_chips')?.idx;
+
+    const lastMulti = lastMultiIndex !== undefined ? messages[lastMultiIndex] : undefined;
+    const selections = lastMulti?.custom?.selections ?? [];
+
+    if (btn.payload.startsWith('/')) {
+      if (selections.length > 0 && btn.payload.includes('continue')) {
+        // Send Rasa intent payload with inline JSON entity containing selections
+        const payloadWithSelections = `${btn.payload}${JSON.stringify({ selections })}`;
+        setMessages(prev => [
+          ...prev,
+          { text: `${btn.title}\n${selections.join(', ')}`, sender: 'user' },
+        ]);
+        await sendMessage(payloadWithSelections);
+        return;
+      }
+    }
+
+    // Default behavior: show the button title as user message, send payload
+    setMessages(prev => [...prev, { text: btn.title, sender: 'user' }]);
+    await sendMessage(btn.payload);
+  };
+
+  const toggleMultiSelect = (messageIndex: number, option: string) => {
+    setMessages(prev => {
+      const next = [...prev];
+      const msg = next[messageIndex];
+      if (!msg?.custom || msg.custom.type !== 'multi_select_chips') return prev;
+      const current = new Set(msg.custom.selections || []);
+      if (current.has(option)) {
+        current.delete(option);
+      } else {
+        current.add(option);
+      }
+      msg.custom = { ...msg.custom, selections: Array.from(current) };
+      next[messageIndex] = { ...msg };
+      return next;
+    });
+  };
+  const scrollToBottom = () => messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  useEffect(() => { scrollToBottom(); }, [messages, isLoading]);
+
+  if (!selectedAgent) return null;
+
+  return (
+    <Box sx={{ display: 'flex', height: '100vh', justifyContent: 'center', alignItems: 'center', bgcolor: 'background.default', p: { xs: 1.5, md: 2 } }}>
+      <Paper elevation={4} sx={{ width: '100%', maxWidth: 900, height: { xs: '90vh', md: '85vh' }, display: 'flex', flexDirection: 'column', borderRadius: 4, overflow: 'hidden' }}>
+        <AppBar position="static" color="transparent" elevation={0} sx={{ borderBottom: theme => `1px solid ${theme.palette.divider}`, bgcolor: 'background.paper' }}>
+          <Toolbar sx={{ gap: 1 }}>
+            <IconButton edge="start" onClick={() => setSelectedAgent(null)} sx={{ mr: 1 }}>
+              <ArrowBackIcon />
+            </IconButton>
+            <Avatar src={selectedAgent.avatar} alt={selectedAgent.name} sx={{ width: 32, height: 32, mr: 2 }} />
+            <Typography variant="h6" sx={{ flexGrow: 1 }}>{selectedAgent.name}</Typography>
+          </Toolbar>
+        </AppBar>
+
+        <Box ref={chatContainerRef} sx={{ flex: 1, overflowY: 'auto', p: { xs: 1.5, md: 2 }, bgcolor: 'background.paper' }}>
+          <List>
+            {messages.map((msg, i) => (
+              <ListItem key={i} sx={{ justifyContent: msg.sender === 'user' ? 'flex-end' : 'flex-start', alignItems: 'flex-start' }}>
+                {msg.sender === 'bot' && <ListItemAvatar><Avatar src={selectedAgent.avatar} /></ListItemAvatar>}
+                <Paper sx={{
+                  p: 1.25,
+                  px: 1.5,
+                  maxWidth: '70%',
+                  bgcolor: 'grey.100',
+                  color: 'text.primary',
+                  borderRadius: 3,
+                  boxShadow: 1,
+                }}>
+                  {msg.text && (
+                    <ReportRenderer content={msg.text} isBotMessage={msg.sender === 'bot'} />
+                  )}
+                  {msg.custom?.type === 'multi_select_chips' && (
+                    <Box sx={{ mt: msg.text ? 1 : 0 }}>
+                      {msg.custom.hint && (
+                        <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                          {msg.custom.hint}
+                        </Typography>
+                      )}
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          flexWrap: 'wrap',
+                          gap: 1,
+                          // Each chip takes equal width per column if columns provided
+                          '& > .multi-chip': {
+                            flex: msg.custom.columns ? `0 0 ${100 / msg.custom.columns}%` : '0 0 auto',
+                          },
+                        }}
+                      >
+                        {msg.custom.options.map((opt) => {
+                          const selected = !!msg.custom?.selections?.includes(opt);
+                          return (
+                            <Box key={opt} className="multi-chip">
+                              <Chip
+                                label={opt}
+                                color={selected ? 'primary' : 'default'}
+                                variant={selected ? 'filled' : 'outlined'}
+                                onClick={() => toggleMultiSelect(i, opt)}
+                                sx={{ borderRadius: 999, width: '100%' }}
+                              />
+                            </Box>
+                          );
+                        })}
+                      </Box>
+                    </Box>
+                  )}
+                  {msg.buttons && msg.buttons.length > 0 && (
+                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: msg.text ? 1 : 0 }}>
+                      {msg.buttons.map((b, idx) => (
+                        <Chip
+                          key={idx}
+                          label={b.title}
+                          color="primary"
+                          variant="outlined"
+                          onClick={() => handleQuickReply(b)}
+                          sx={{ borderRadius: 999 }}
+                        />
+                      ))}
+                    </Box>
+                  )}
+                </Paper>
+              </ListItem>
+            ))}
+            {isLoading && (
+              <ListItem>
+                <ListItemAvatar><Avatar src={selectedAgent.avatar} /></ListItemAvatar>
+                <Paper sx={{ p: 1.25, px: 1.5, bgcolor: 'grey.100', color: 'text.primary', borderRadius: 3 }}>
+                  <Typography>Typing...</Typography>
+                </Paper>
+              </ListItem>
+            )}
+            <div ref={messagesEndRef} />
+          </List>
+        </Box>
+
+        <Box component="form" onSubmit={handleSendMessage} sx={{ display: 'flex', gap: 1, p: 1.5, bgcolor: 'background.paper', borderTop: theme => `1px solid ${theme.palette.divider}` }}>
+          <TextField
+            fullWidth
+            variant="outlined"
+            placeholder="Type a message..."
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.altKey) {
+                e.preventDefault();
+                handleSendMessage(e);
+              } else if (e.key === 'Enter' && e.altKey) {
+                return;
+              }
+            }}
+            multiline
+            maxRows={4}
+            InputProps={{
+              sx: { borderRadius: 999, bgcolor: 'background.default' },
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton type="submit" color="primary" disabled={!inputValue.trim()} sx={{ bgcolor: (theme) => (!inputValue.trim() ? 'transparent' : theme.palette.primary.light + '33'), ':hover': { bgcolor: (theme) => theme.palette.primary.light + '55' } }}>
+                    <SendIcon />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+        </Box>
+      </Paper>
+    </Box>
+  );
+};
+
+export default ChatInterface;

src/components/ReportRenderer.tsx

@@ -0,0 +1,389 @@
+import React from 'react';
+import {
+  Box,
+  Typography,
+  Card,
+  CardContent,
+  Chip,
+  List,
+  ListItem,
+  ListItemText,
+  Link,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  IconButton,
+  Collapse,
+} from '@mui/material';
+import {
+  ExpandMore,
+  ExpandLess,
+  Code as CodeIcon,
+  Link as LinkIcon,
+  TableChart as TableIcon,
+} from '@mui/icons-material';
+
+interface ResponseRendererProps {
+  content: string;
+  isBotMessage?: boolean;
+}
+
+const ResponseRenderer: React.FC<ResponseRendererProps> = ({ content, isBotMessage = true }) => {
+  const [expandedSections, setExpandedSections] = React.useState<{ [key: string]: boolean }>({});
+
+  const toggleSection = (sectionId: string) => {
+    setExpandedSections(prev => ({
+      ...prev,
+      [sectionId]: !prev[sectionId]
+    }));
+  };
+
+  // Parse different content types
+  const parseContent = (text: string) => {
+    const sections: Array<{
+      type: 'header' | 'subheader' | 'text' | 'list' | 'code' | 'table' | 'link' | 'metric' | 'highlight';
+      content?: string;
+      level?: number;
+      items?: string[];
+      language?: string;
+      headers?: string[];
+      rows?: string[][];
+      url?: string;
+      title?: string;
+    }> = [];
+
+    const lines = text.split('\n');
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+
+      if (!line) {
+        sections.push({ type: 'text', content: '' });
+        continue;
+      }
+
+      // Headers
+      if (line.startsWith('# ')) {
+        sections.push({ type: 'header', content: line.substring(2), level: 1 });
+      } else if (line.startsWith('## ')) {
+        sections.push({ type: 'subheader', content: line.substring(3), level: 2 });
+      } else if (line.startsWith('### ')) {
+        sections.push({ type: 'subheader', content: line.substring(4), level: 3 });
+      }
+      // Bold text as highlights
+      else if (line.startsWith('**') && line.endsWith('**')) {
+        sections.push({ type: 'highlight', content: line.substring(2, line.length - 2) });
+      }
+      // Lists
+      else if (line.startsWith('• ') || line.startsWith('- ') || line.startsWith('* ')) {
+        const listItems = [line.substring(2)];
+        let j = i + 1;
+        while (j < lines.length && (lines[j].trim().startsWith('• ') || lines[j].trim().startsWith('- ') || lines[j].trim().startsWith('* '))) {
+          listItems.push(lines[j].trim().substring(2));
+          j++;
+        }
+        i = j - 1; // Skip processed lines
+        sections.push({ type: 'list', content: '', items: listItems });
+      }
+      // Code blocks
+      else if (line.startsWith('```')) {
+        const language = line.substring(3).trim();
+        let codeContent = '';
+        let j = i + 1;
+        while (j < lines.length && !lines[j].trim().startsWith('```')) {
+          codeContent += lines[j] + '\n';
+          j++;
+        }
+        i = j; // Skip processed lines
+        sections.push({ type: 'code', content: codeContent.trim(), language });
+      }
+      // Table detection (simple format: | col1 | col2 |)
+      else if (line.includes('|') && lines[i + 1]?.includes('|') && lines[i + 1]?.includes('-')) {
+        const headers = line.split('|').map(h => h.trim()).filter(h => h);
+        let j = i + 2;
+        const rows: string[][] = [];
+        while (j < lines.length && lines[j].trim().includes('|')) {
+          const row = lines[j].split('|').map(cell => cell.trim()).filter(cell => cell);
+          if (row.length > 0) rows.push(row);
+          j++;
+        }
+        i = j - 1;
+        sections.push({ type: 'table', content: '', headers, rows });
+      }
+      // Links
+      else if (line.match(/https?:\/\/[^\s]+/)) {
+        const urlMatch = line.match(/(https?:\/\/[^\s]+)/);
+        if (urlMatch) {
+          const url = urlMatch[1];
+          const title = line.replace(url, '').trim();
+          sections.push({ type: 'link', content: title, url });
+        } else {
+          sections.push({ type: 'text', content: line });
+        }
+      }
+      // Key metrics (• Key: Value format)
+      else if (line.includes('•') && line.includes(':')) {
+        sections.push({ type: 'metric', content: line });
+      }
+      // Regular text
+      else {
+        sections.push({ type: 'text', content: line });
+      }
+    }
+
+    return sections;
+  };
+
+  const sections = parseContent(content);
+
+  const renderSection = (section: any, index: number) => {
+    const sectionId = `section-${index}`;
+
+    switch (section.type) {
+      case 'header':
+        return (
+          <Box key={index} sx={{ mb: 3 }}>
+            <Typography
+              variant="h4"
+              component="h1"
+              sx={{
+                color: 'primary.main',
+                fontWeight: 'bold',
+                mb: 2,
+                borderBottom: '2px solid',
+                borderColor: 'primary.light',
+                pb: 1
+              }}
+            >
+              {section.content}
+            </Typography>
+          </Box>
+        );
+
+      case 'subheader':
+        return (
+          <Box key={index} sx={{ mb: 2 }}>
+            <Typography
+              variant={section.level === 2 ? "h5" : "h6"}
+              component="h2"
+              sx={{
+                color: 'secondary.main',
+                fontWeight: '600',
+                mb: 1.5,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1
+              }}
+            >
+              <Box sx={{
+                width: section.level === 2 ? 4 : 3,
+                height: section.level === 2 ? 4 : 3,
+                bgcolor: 'primary.main',
+                borderRadius: '50%'
+              }} />
+              {section.content}
+            </Typography>
+          </Box>
+        );
+
+      case 'highlight':
+        return (
+          <Box key={index} sx={{ mb: 2 }}>
+            <Chip
+              label={section.content}
+              color="primary"
+              variant="filled"
+              sx={{
+                fontSize: '0.9rem',
+                fontWeight: 'bold',
+                mb: 1,
+                '& .MuiChip-label': {
+                  px: 2,
+                  py: 1
+                }
+              }}
+            />
+          </Box>
+        );
+
+      case 'list':
+        return (
+          <Card key={index} sx={{ mb: 2, bgcolor: 'background.paper' }}>
+            <CardContent sx={{ p: 2 }}>
+              <List dense>
+                {section.items.map((item: string, itemIndex: number) => (
+                  <ListItem key={itemIndex} sx={{ px: 0, py: 0.5 }}>
+                    <Box sx={{
+                      width: 6,
+                      height: 6,
+                      bgcolor: 'primary.main',
+                      borderRadius: '50%',
+                      mr: 2,
+                      mt: 0.5
+                    }} />
+                    <ListItemText
+                      primary={item}
+                      sx={{
+                        '& .MuiListItemText-primary': {
+                          fontSize: '0.9rem',
+                          lineHeight: 1.4
+                        }
+                      }}
+                    />
+                  </ListItem>
+                ))}
+              </List>
+            </CardContent>
+          </Card>
+        );
+
+      case 'code':
+        const isExpanded = expandedSections[sectionId];
+        const shouldShowExpand = section.content.length > 200;
+
+        return (
+          <Card key={index} sx={{ mb: 2, bgcolor: 'grey.900', color: 'common.white' }}>
+            <CardContent sx={{ p: 2 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <CodeIcon sx={{ fontSize: 18, color: 'primary.main' }} />
+                  <Typography variant="caption" sx={{ color: 'grey.400' }}>
+                    {section.language || 'Code'}
+                  </Typography>
+                </Box>
+                {shouldShowExpand && (
+                  <IconButton
+                    size="small"
+                    onClick={() => toggleSection(sectionId)}
+                    sx={{ color: 'grey.400' }}
+                  >
+                    {isExpanded ? <ExpandLess /> : <ExpandMore />}
+                  </IconButton>
+                )}
+              </Box>
+              <Collapse in={isExpanded || !shouldShowExpand}>
+                <Box sx={{
+                  bgcolor: 'grey.800',
+                  p: 1.5,
+                  borderRadius: 1,
+                  fontFamily: 'monospace',
+                  fontSize: '0.8rem',
+                  overflow: 'auto',
+                  maxHeight: isExpanded ? 'none' : '150px'
+                }}>
+                  <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+                    {section.content}
+                  </pre>
+                </Box>
+              </Collapse>
+            </CardContent>
+          </Card>
+        );
+
+      case 'table':
+        return (
+          <Card key={index} sx={{ mb: 2 }}>
+            <CardContent sx={{ p: 0 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', p: 2, borderBottom: '1px solid', borderColor: 'divider' }}>
+                <TableIcon sx={{ mr: 1, color: 'primary.main' }} />
+                <Typography variant="subtitle2">Data Table</Typography>
+              </Box>
+              <TableContainer>
+                <Table size="small">
+                  <TableHead>
+                    <TableRow sx={{ bgcolor: 'primary.light' }}>
+                      {section.headers.map((header: string, headerIndex: number) => (
+                        <TableCell key={headerIndex} sx={{ fontWeight: 'bold', color: 'primary.contrastText' }}>
+                          {header}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {section.rows.map((row: string[], rowIndex: number) => (
+                      <TableRow key={rowIndex} sx={{ '&:nth-of-type(odd)': { bgcolor: 'action.hover' } }}>
+                        {row.map((cell: string, cellIndex: number) => (
+                          <TableCell key={cellIndex}>{cell}</TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </CardContent>
+          </Card>
+        );
+
+      case 'link':
+        return (
+          <Box key={index} sx={{ mb: 2 }}>
+            <Link
+              href={section.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 1,
+                color: 'primary.main',
+                textDecoration: 'none',
+                '&:hover': {
+                  textDecoration: 'underline'
+                }
+              }}
+            >
+              <LinkIcon sx={{ fontSize: 16 }} />
+              {section.content || section.url}
+            </Link>
+          </Box>
+        );
+
+      case 'metric':
+        const [label, value] = section.content.split(':').map((s: string) => s.trim());
+        return (
+          <Card key={index} sx={{ mb: 2, bgcolor: 'success.light', color: 'success.contrastText' }}>
+            <CardContent sx={{ p: 2 }}>
+              <Typography variant="body2" sx={{ mb: 0.5, opacity: 0.8 }}>
+                {label.replace('•', '').trim()}
+              </Typography>
+              <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+                {value}
+              </Typography>
+            </CardContent>
+          </Card>
+        );
+
+      case 'text':
+      default:
+        return section.content ? (
+          <Typography
+            key={index}
+            variant="body1"
+            sx={{
+              mb: 2,
+              lineHeight: 1.6,
+              color: isBotMessage ? 'text.primary' : 'text.secondary'
+            }}
+          >
+            {section.content}
+          </Typography>
+        ) : null;
+    }
+  };
+
+  return (
+    <Box sx={{
+      maxWidth: '100%',
+      '& > *': {
+        mb: 1.5
+      }
+    }}>
+      {sections.map((section: any, index: number) => renderSection(section, index))}
+    </Box>
+  );
+};
+
+export default ResponseRenderer;

src/contexts/AgentContext.tsx

@@ -0,0 +1,63 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+export type Agent = {
+  id: string;
+  name: string;
+  description?: string;
+  avatar?: string;
+  upcoming?: boolean;
+};
+
+type AgentContextValue = {
+  selectedAgent: Agent | null;
+  setSelectedAgent: (a: Agent | null) => void;
+  availableAgents: Agent[];  // Add availableAgents to the context type
+};
+const AgentContext = createContext<AgentContextValue | undefined>(undefined);
+
+export const AgentProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  // Define your agents list
+  const [availableAgents] = useState<Agent[]>([
+    {
+      id: 'agent-grapher',
+      name: 'Agent Grapher',
+      description: 'Advanced data visualization and analysis assistant',
+      avatar: 'https://api.iconify.design/mdi/chart-line.svg?color=%237C3AED',
+    },
+    {
+      id: 'rival-lens',
+      name: 'Bizinsight',
+      description: 'Business insights and competitive analysis bot',
+      avatar: 'https://api.iconify.design/mdi/brain.svg?color=%2306B6D4',
+    },
+    {
+      id: 'lexa-legal',
+      name: 'Lexa (Legal Assistant)',
+      description: 'Legal Assistant',
+      avatar: 'https://api.iconify.design/mdi/scale-balance.svg?color=%235B21B6',
+      upcoming: true,
+    }
+  ]);
+
+  const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
+
+  return (
+    <AgentContext.Provider 
+      value={{ 
+        selectedAgent, 
+        setSelectedAgent,
+        availableAgents  // Include availableAgents in the context value
+      }}
+    >
+      {children}
+    </AgentContext.Provider>
+  );
+};
+
+export const useAgent = (): AgentContextValue => {
+  const ctx = useContext(AgentContext);
+  if (!ctx) {
+    throw new Error('useAgent must be used within an AgentProvider');
+  }
+  return ctx;
+};

src/{index.js → index.tsx}

@@ -4,7 +4,9 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
 root.render(
   <React.StrictMode>
     <App />

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/{reportWebVitals.js → reportWebVitals.ts}

@@ -1,4 +1,6 @@
-const reportWebVitals = onPerfEntry => {
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}