feature/imporve accessibiblity

frontend/README.md

@@ -13,9 +13,9 @@ If you are developing a production application, we recommend updating the config
 
 ```js
 export default tseslint.config([
-  globalIgnores(['dist']),
+  globalIgnores(["dist"]),
   {
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     extends: [
       // Other configs...
 
@@ -30,40 +30,40 @@ export default tseslint.config([
     ],
     languageOptions: {
       parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
         tsconfigRootDir: import.meta.dirname,
       },
       // other options...
     },
   },
-])
+]);
 ```
 
 You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
 
 ```js
 // eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+import reactX from "eslint-plugin-react-x";
+import reactDom from "eslint-plugin-react-dom";
 
 export default tseslint.config([
-  globalIgnores(['dist']),
+  globalIgnores(["dist"]),
   {
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     extends: [
       // Other configs...
       // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
+      reactX.configs["recommended-typescript"],
       // Enable lint rules for React DOM
       reactDom.configs.recommended,
     ],
     languageOptions: {
       parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
         tsconfigRootDir: import.meta.dirname,
       },
       // other options...
     },
   },
-])
+]);
 ```

frontend/eslint.config.js

@@ -1,23 +1,23 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { globalIgnores } from 'eslint/config'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { globalIgnores } from "eslint/config";
 
 export default tseslint.config([
-  globalIgnores(['dist']),
+  globalIgnores(["dist"]),
   {
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     extends: [
       js.configs.recommended,
       tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
+      reactHooks.configs["recommended-latest"],
       reactRefresh.configs.vite,
     ],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
   },
-])
+]);

frontend/src/App.module.css

@@ -3,7 +3,7 @@
   height: 100%;
   max-width: 1200px;
   max-height: 800px;
-  background: #FFFFFD;
+  background: #fffffd;
   display: flex;
   border-radius: 12px;
   overflow: hidden;
@@ -60,12 +60,14 @@ main {
   margin-bottom: 0.75rem;
   cursor: pointer;
   border: 1px solid #e5e7eb;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  transition:
+    background-color 0.2s,
+    box-shadow 0.2s;
 }
 
 .historyItem:hover {
   background-color: #f9fafb;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
 .historyItemContent {
@@ -94,4 +96,4 @@ main {
   font-size: 0.875rem;
   color: #6b7280;
   margin-left: 1rem;
-}
+}

frontend/src/App.tsx

@@ -1,26 +1,35 @@
-import Chat from './components/Chat';
-import Sidebar from './components/Sidebar';
-import styles from './App.module.css';
-import { useState } from 'react';
+import Chat from "./components/Chat";
+import Sidebar from "./components/Sidebar";
+import styles from "./App.module.css";
+import { useState } from "react";
 
 const saveSessionToHistory = () => {
-  const history = JSON.parse(localStorage.getItem('apiconf_chat_history') || '[]');
-  const sessionId = localStorage.getItem('apiconf_session_id');
-
+  const history = JSON.parse(
+    localStorage.getItem("apiconf_chat_history") || "[]",
+  );
+  const sessionId = localStorage.getItem("apiconf_session_id");
+
   // Avoid adding duplicate or empty sessions
-  if (sessionId && !history.some((item: { sessionId: string }) => item.sessionId === sessionId)) {
+  if (
+    sessionId &&
+    !history.some((item: { sessionId: string }) => item.sessionId === sessionId)
+  ) {
     const timestamp = new Date().toLocaleString();
-    const preview = localStorage.getItem(`session_preview_${sessionId}`) || 'New Chat';
+    const preview =
+      localStorage.getItem(`session_preview_${sessionId}`) || "New Chat";
     history.unshift({ sessionId, timestamp, preview });
-    localStorage.setItem('apiconf_chat_history', JSON.stringify(history.slice(0, 20))); // Increased limit
+    localStorage.setItem(
+      "apiconf_chat_history",
+      JSON.stringify(history.slice(0, 20)),
+    ); // Increased limit
   }
 };
 
 const SettingsComponent = () => <div>Settings view coming soon.</div>;
 
 const App: React.FC = () => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [view, setView] = useState<'chat' | 'settings'>('chat'); // Simplified view
+  const [view, setView] = useState<"chat" | "settings">("chat"); // Simplified view
   const [resetSignal, setResetSignal] = useState(0);
 
   const toggleSidebar = () => {
@@ -32,23 +41,24 @@ const App: React.FC = () => {
   };
 
   // Get active session ID from local storage to pass to sidebar
-  const activeSessionId = localStorage.getItem('apiconf_session_id');
+  const activeSessionId = localStorage.getItem("apiconf_session_id");
 
   const handleNewChat = () => {
     saveSessionToHistory();
-    const newSessionId = Math.random().toString(36).substring(2, 15) + Date.now().toString(36);
-    localStorage.setItem('apiconf_session_id', newSessionId);
-    setView('chat');
+    const newSessionId =
+      Math.random().toString(36).substring(2, 15) + Date.now().toString(36);
+    localStorage.setItem("apiconf_session_id", newSessionId);
+    setView("chat");
     if (window.innerWidth <= 768) setSidebarOpen(false); // Close sidebar on mobile
-    setResetSignal(s => s + 1);
+    setResetSignal((s) => s + 1);
   };
 
   const handleRestoreSession = (sessionId: string) => {
     saveSessionToHistory(); // Save the current session before restoring another
-    localStorage.setItem('apiconf_session_id', sessionId);
-    setView('chat');
+    localStorage.setItem("apiconf_session_id", sessionId);
+    setView("chat");
     if (window.innerWidth <= 768) setSidebarOpen(false); // Close sidebar on mobile
-    setResetSignal(s => s + 1);
+    setResetSignal((s) => s + 1);
   };
 
   return (
@@ -61,8 +71,10 @@ const App: React.FC = () => {
         activeSessionId={activeSessionId}
       />
       <main>
-        {view === 'chat' && <Chat onMenuClick={toggleSidebar} resetSignal={resetSignal} />}
-        {view === 'settings' && <SettingsComponent />}
+        {view === "chat" && (
+          <Chat onMenuClick={toggleSidebar} resetSignal={resetSignal} />
+        )}
+        {view === "settings" && <SettingsComponent />}
       </main>
     </div>
   );

frontend/src/components/Chat.module.css

@@ -13,8 +13,12 @@
   font-weight: 600;
   color: #1e293b;
   flex-shrink: 0;
-}
 
+
+h1 {
+      font-size: clamp(1rem, 4vw, 1.15rem);
+}
+}
 .content {
   flex: 1;
   display: flex;
@@ -163,7 +167,9 @@
   border-radius: 12px;
   border: 1px solid #e2e8f0;
 }
-
+.inputForm:focus-within{
+  outline:1px solid #0000ff;
+}
 .inputField {
   flex: 1;
   padding: 12px;
@@ -204,6 +210,17 @@
   cursor: pointer;
   margin-right: 16px;
 }
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 
 @media (max-width: 768px) {
   .chat {
@@ -213,8 +230,10 @@
   }
 
   .chatHeader {
-    padding: 16px 12px;
-    font-size: 16px;
+    display: flex;
+    align-items: center;
+
+
   }
 
   .content {
@@ -241,6 +260,4 @@
   .menuButton {
     display: block;
   }
-
 }
-