Changes to add Fluent AI components and use them to construct chat view

Author: vipinnair22

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "typescript.tsdk": "src/frontend/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

src/frontend/package.json

@@ -5,18 +5,46 @@
   "main": "index.js",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "packageManager": "[email protected]",
   "dependencies": {
+    "@fluentui-copilot/react-copilot": "0.23.3",
+    "@fluentui-copilot/react-copilot-chat": "0.9.6",
+    "@fluentui-copilot/react-feedback-buttons": "0.9.6",
+    "@fluentui-copilot/react-provider": "0.9.4",
+    "@fluentui-copilot/react-reference": "0.13.10",
+    "@fluentui-copilot/react-sensitivity-label": "0.5.8",
+    "@fluentui/react-components": "9.60.0",
+    "@fluentui/react-icons": "2.0.279",
+    "@fluentui/react-theme": "9.1.24",
     "@vitejs/plugin-react": "4.4.1",
+    "copy-to-clipboard": "^3.3.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-markdown": "10.1.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-katex": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-supersub": "^1.0.0",
     "vite": "6.3.3"
+  },
+  "devDependencies": {
+    "@types/node": "22.14.1",
+    "@types/react": "18.3.20",
+    "@types/react-dom": "18.3.5",
+    "@types/react-syntax-highlighter": "15.5.13",
+    "typescript": "5.8.3"
   }
 }

src/frontend/pnpm-lock.yaml

@@ -0,0 +1,23 @@
+import React from "react";
+import { AgentPreview } from "./agents/AgentPreview";
+
+const App: React.FC = () => {
+  // Sample agent details - in a real application, this would come from an API
+  const mockAgentDetails = {
+    id: "sample-agent-1",
+    name: "Sample AI Agent",
+    description: "A helpful AI assistant",
+    logo: "Avatar_Default.svg",
+  };
+
+  return (
+    <div className="app-container">
+      <AgentPreview
+        resourceId="sample-resource-id"
+        agentDetails={mockAgentDetails}
+      />
+    </div>
+  );
+};
+
+export default App;

src/frontend/src/components/App.jsx

@@ -1,16 +1,21 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import MessageList from './MessageList';
 import ChatForm from './ChatForm';
 
-const ChatContainer = () => {
-  const [messages, setMessages] = useState([]);
-  const [isGenerating, setIsGenerating] = useState(false);
+interface Message {
+  content: string;
+  role: 'user' | 'assistant';
+}
 
-  const addMessage = (content, role) => {
+const ChatContainer: React.FC = () => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isGenerating, setIsGenerating] = useState<boolean>(false);
+
+  const addMessage = (content: string, role: 'user' | 'assistant'): void => {
     setMessages(prev => [...prev, { content, role }]);
   };
 
-  const handleSubmit = async (userMessage) => {
+  const handleSubmit = async (userMessage: string): Promise<void> => {
     if (!userMessage.trim()) return;
 
     // Add user message to the chat

src/frontend/src/components/App.tsx

@@ -1,17 +1,22 @@
-import React, { useState } from 'react';
+import React, { useState, FormEvent, ChangeEvent } from 'react';
 
-const ChatForm = ({ onSubmit, isGenerating }) => {
-  const [message, setMessage] = useState('');
+interface ChatFormProps {
+  onSubmit: (message: string) => void;
+  isGenerating: boolean;
+}
 
-  const handleSubmit = (e) => {
+const ChatForm: React.FC<ChatFormProps> = ({ onSubmit, isGenerating }) => {
+  const [message, setMessage] = useState<string>('');
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>): void => {
     e.preventDefault();
     if (message.trim() && !isGenerating) {
       onSubmit(message);
       setMessage('');
     }
   };
 
-  const clearChat = () => {
+  const clearChat = (): void => {
     // We'll implement this to match the existing functionality
     window.location.reload();
   };
@@ -23,29 +28,26 @@ const ChatForm = ({ onSubmit, isGenerating }) => {
           <button 
             type="button" 
             className="btn btn-outline-dark" 
-            onClick={clearChat}
-            aria-label="Start a new chat">
-            <i className="bi bi-arrow-repeat" aria-hidden="true"></i>
+            onClick={clearChat}>
+            <i className="bi bi-arrow-repeat"></i>
           </button>
-          <i className="bi bi-body-text input-group-text dark-border" aria-hidden="true"></i>
+          <i className="bi bi-body-text input-group-text dark-border"></i>
           <input 
             id="message" 
             name="message" 
             className="form-control form-control-sm dark-border" 
             type="text" 
-            placeholder="Your Message" 
-            aria-label="Ask ChatGPT"
+            placeholder="Your Message"
             value={message}
-            onChange={(e) => setMessage(e.target.value)}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setMessage(e.target.value)}
             disabled={isGenerating}
           />
           <button 
             type="submit" 
             className="btn btn-outline-dark" 
-            style={{ borderLeftWidth: 0 }} 
-            aria-label="Submit"
+            style={{ borderLeftWidth: 0 }}
             disabled={isGenerating}>
-            Send <i className="bi bi-send-fill" aria-hidden="true"></i>
+            Send <i className="bi bi-send-fill"></i>
           </button>
         </div>
       </form>

src/frontend/src/components/ChatContainer.jsx renamed to src/frontend/src/components/ChatContainer.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 
-const Message = ({ content, role }) => {
+interface MessageProps {
+  content: string;
+  role: 'user' | 'assistant';
+}
+
+const Message: React.FC<MessageProps> = ({ content, role }) => {
   const isUser = role === 'user';
 
   return (

src/frontend/src/components/ChatForm.jsx renamed to src/frontend/src/components/ChatForm.tsx

@@ -1,8 +1,17 @@
 import React, { useEffect, useRef } from 'react';
 import Message from './Message';
 
-const MessageList = ({ messages }) => {
-  const messagesEndRef = useRef(null);
+interface Message {
+  content: string;
+  role: 'user' | 'assistant';
+}
+
+interface MessageListProps {
+  messages: Message[];
+}
+
+const MessageList: React.FC<MessageListProps> = ({ messages }) => {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
 
   // Auto-scroll to the bottom when new messages arrive
   useEffect(() => {

src/frontend/src/components/Message.jsx renamed to src/frontend/src/components/Message.tsx

@@ -0,0 +1,12 @@
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}