+
+ )
+}
diff --git a/frontend/src/components/Chat/InputBox.tsx b/frontend/src/components/Chat/InputBox.tsx
new file mode 100644
index 000000000..78ab4372a
--- /dev/null
+++ b/frontend/src/components/Chat/InputBox.tsx
@@ -0,0 +1,256 @@
+import { useState, KeyboardEvent, useRef } from 'react'
+import {
+ makeStyles,
+ Button,
+ tokens,
+ Caption1,
+} from '@fluentui/react-components'
+import { SendRegular, AttachRegular, DismissRegular } from '@fluentui/react-icons'
+import { MessageAttachment } from '../../types'
+
+const useStyles = makeStyles({
+ root: {
+ padding: `${tokens.spacingVerticalXL} ${tokens.spacingHorizontalXXL}`,
+ backgroundColor: tokens.colorNeutralBackground2,
+ },
+ inputContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalM,
+ maxWidth: '900px',
+ margin: '0 auto',
+ },
+ attachmentsContainer: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ gap: tokens.spacingHorizontalS,
+ marginBottom: tokens.spacingVerticalS,
+ },
+ attachmentChip: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: tokens.spacingHorizontalXXS,
+ padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+ backgroundColor: tokens.colorNeutralBackground3,
+ borderRadius: tokens.borderRadiusLarge,
+ border: `1px solid ${tokens.colorNeutralStroke1}`,
+ },
+ inputWrapper: {
+ position: 'relative',
+ display: 'flex',
+ alignItems: 'center',
+ backgroundColor: tokens.colorNeutralBackground3,
+ borderRadius: '28px',
+ border: `1px solid ${tokens.colorNeutralStroke1}`,
+ padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalL}`,
+ transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+ ':focus-within': {
+ borderTopColor: tokens.colorBrandStroke1 as any,
+ borderRightColor: tokens.colorBrandStroke1 as any,
+ borderBottomColor: tokens.colorBrandStroke1 as any,
+ borderLeftColor: tokens.colorBrandStroke1 as any,
+ boxShadow: `0 0 0 2px ${tokens.colorBrandBackground2}` as any,
+ },
+ },
+ textInput: {
+ flex: 1,
+ backgroundColor: 'transparent',
+ border: 'none',
+ outline: 'none',
+ fontSize: tokens.fontSizeBase300,
+ fontFamily: tokens.fontFamilyBase,
+ color: tokens.colorNeutralForeground1,
+ resize: 'none',
+ minHeight: '24px',
+ maxHeight: '120px',
+ overflowY: 'auto',
+ '::placeholder': {
+ color: tokens.colorNeutralForeground4,
+ },
+ '::-webkit-scrollbar': {
+ width: '8px',
+ },
+ '::-webkit-scrollbar-track': {
+ backgroundColor: 'transparent',
+ },
+ '::-webkit-scrollbar-thumb': {
+ backgroundColor: tokens.colorNeutralStroke1,
+ borderRadius: '4px',
+ },
+ },
+ iconButtonsLeft: {
+ display: 'flex',
+ gap: tokens.spacingHorizontalXS,
+ marginRight: tokens.spacingHorizontalS,
+ },
+ iconButtonsRight: {
+ display: 'flex',
+ gap: tokens.spacingHorizontalXS,
+ marginLeft: tokens.spacingHorizontalS,
+ },
+ iconButton: {
+ minWidth: '32px',
+ width: '32px',
+ height: '32px',
+ padding: 0,
+ borderRadius: '50%',
+ },
+ sendButton: {
+ minWidth: '32px',
+ width: '32px',
+ height: '32px',
+ padding: 0,
+ borderRadius: '50%',
+ },
+})
+
+interface InputBoxProps {
+ onSend: (originalValue: string, convertedValue: string | undefined, attachments: MessageAttachment[]) => void
+ disabled?: boolean
+}
+
+export default function InputBox({ onSend, disabled = false }: InputBoxProps) {
+ const styles = useStyles()
+ const [input, setInput] = useState('')
+ const [attachments, setAttachments] = useState
+
+
+ PyRIT Minimal Frontend (No Backend)
+
+ }
+ onClick={onNewChat}
+ >
+ New Chat
+
+
+
+ )
+}
diff --git a/frontend/src/components/Chat/MessageList.tsx b/frontend/src/components/Chat/MessageList.tsx
new file mode 100644
index 000000000..2f7d0b37c
--- /dev/null
+++ b/frontend/src/components/Chat/MessageList.tsx
@@ -0,0 +1,173 @@
+import { useEffect, useRef } from 'react'
+import {
+ makeStyles,
+ Text,
+ Avatar,
+ tokens,
+} from '@fluentui/react-components'
+import { Message } from '../../types'
+
+const useStyles = makeStyles({
+ root: {
+ flex: 1,
+ overflowY: 'auto',
+ padding: tokens.spacingVerticalXXL,
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalL,
+ },
+ message: {
+ display: 'flex',
+ gap: tokens.spacingHorizontalM,
+ maxWidth: '800px',
+ alignSelf: 'flex-start',
+ },
+ userMessage: {
+ alignSelf: 'flex-end',
+ flexDirection: 'row-reverse',
+ },
+ messageContent: {
+ backgroundColor: tokens.colorNeutralBackground3,
+ padding: tokens.spacingVerticalM,
+ borderRadius: tokens.borderRadiusMedium,
+ flex: 1,
+ },
+ userMessageContent: {
+ backgroundColor: tokens.colorBrandBackground,
+ },
+ messageText: {
+ whiteSpace: 'pre-wrap',
+ wordBreak: 'break-word',
+ },
+ timestamp: {
+ fontSize: tokens.fontSizeBase200,
+ color: tokens.colorNeutralForeground3,
+ marginTop: tokens.spacingVerticalXS,
+ },
+ loadingEllipsis: {
+ fontSize: tokens.fontSizeBase500,
+ animationName: {
+ '0%': { opacity: '0.3' },
+ '50%': { opacity: '1' },
+ '100%': { opacity: '0.3' },
+ },
+ animationDuration: '1.5s',
+ animationIterationCount: 'infinite',
+ },
+ attachmentsContainer: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ gap: tokens.spacingHorizontalS,
+ marginTop: tokens.spacingVerticalS,
+ },
+ attachmentPreview: {
+ maxWidth: '200px',
+ maxHeight: '200px',
+ borderRadius: tokens.borderRadiusMedium,
+ objectFit: 'cover',
+ border: `1px solid ${tokens.colorNeutralStroke1}`,
+ },
+ attachmentFile: {
+ padding: tokens.spacingVerticalS,
+ backgroundColor: tokens.colorNeutralBackground1,
+ borderRadius: tokens.borderRadiusMedium,
+ border: `1px solid ${tokens.colorNeutralStroke1}`,
+ },
+ emptyState: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ height: '100%',
+ gap: tokens.spacingVerticalM,
+ },
+})
+
+interface MessageListProps {
+ messages: Message[]
+}
+
+export default function MessageList({ messages }: MessageListProps) {
+ const styles = useStyles()
+ const messagesEndRef = useRef
+ {attachments.length > 0 && (
+
+
+ {attachments.map((att, index) => (
+
+ )}
+
+
+ {att.type === 'image' && '🖼️'}
+ {att.type === 'audio' && '🎵'}
+ {att.type === 'video' && '🎥'}
+ {att.type === 'file' && '📄'}
+ {' '}{att.name} ({formatFileSize(att.size)})
+
+ }
+ onClick={() => removeAttachment(index)}
+ />
+
+ ))}
+
+
+
+
+ }
+ onClick={() => fileInputRef.current?.click()}
+ disabled={disabled}
+ title="Attach files"
+ />
+
+
+
+ }
+ onClick={handleSend}
+ disabled={disabled || (!input.trim() && attachments.length === 0)}
+ title="Send message"
+ />
+
+
+ Welcome to PyRIT
+
+ Start a conversation to test AI safety and robustness
+
+
+ )
+ }
+
+ return (
+
+ {messages.map((message, index) => {
+ const isUser = message.role === 'user'
+ const timestamp = new Date(message.timestamp).toLocaleTimeString()
+
+ // Debug attachments
+ if (message.attachments && message.attachments.length > 0) {
+ console.log('Message has attachments:', message.attachments)
+ }
+
+ return (
+
+ )
+}
diff --git a/frontend/src/components/Layout/MainLayout.tsx b/frontend/src/components/Layout/MainLayout.tsx
new file mode 100644
index 000000000..fa4c0c34c
--- /dev/null
+++ b/frontend/src/components/Layout/MainLayout.tsx
@@ -0,0 +1,92 @@
+import {
+ makeStyles,
+ tokens,
+ Text,
+ Tooltip,
+ Button,
+} from '@fluentui/react-components'
+import { WeatherMoonRegular, WeatherSunnyRegular } from '@fluentui/react-icons'
+
+const useStyles = makeStyles({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100vh',
+ width: '100vw',
+ overflow: 'hidden',
+ },
+ topBar: {
+ height: '60px',
+ backgroundColor: tokens.colorNeutralBackground3,
+ borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ padding: `0 ${tokens.spacingHorizontalL}`,
+ gap: tokens.spacingHorizontalM,
+ },
+ leftSection: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: tokens.spacingHorizontalM,
+ },
+ logo: {
+ width: '40px',
+ height: '40px',
+ cursor: 'help',
+ },
+ title: {
+ fontSize: tokens.fontSizeHero700,
+ fontWeight: tokens.fontWeightSemibold,
+ color: tokens.colorBrandForeground1,
+ },
+ subtitle: {
+ fontSize: tokens.fontSizeBase200,
+ color: tokens.colorNeutralForeground3,
+ marginLeft: tokens.spacingHorizontalXS,
+ },
+ main: {
+ flex: 1,
+ display: 'flex',
+ flexDirection: 'column',
+ overflow: 'hidden',
+ },
+})
+
+interface MainLayoutProps {
+ children: React.ReactNode
+ onToggleTheme: () => void
+ isDarkMode: boolean
+}
+
+export default function MainLayout({
+ children,
+ onToggleTheme,
+ isDarkMode,
+}: MainLayoutProps) {
+ const styles = useStyles()
+
+ return (
+
+
+ )
+ })}
+
+
+ {message.content && (
+
+ {message.content}
+
+ )}
+ {message.attachments && message.attachments.length > 0 && (
+ {timestamp}
+
+
+ {message.attachments.map((att, attIndex) => (
+
+ )}
+
+ {att.type === 'image' && (
+ 
+ )}
+ {att.type === 'video' && (
+
+ )}
+ {att.type === 'audio' && (
+
+ )}
+ {att.type === 'file' && (
+
+ ))}
+
+ 📄 {att.name}
+
+ )}
+
+ {children}
+
+ )
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 000000000..d5fda85bd
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './styles/global.css'
+
+document.title = 'Co-PyRIT'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+
+ 
+
+ Co-PyRIT
+ Minimal Demo
+
+ :
+