Started changes the file structure

app/backend/InputBackend.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import InputFrontend from './InputFrontend';
+import InputFrontend from '../components/InputFrontend';
-import ConversationFrontend from './ConversationFrontend';
+import ConversationFrontend from '../components/ConversationFrontend';
 import { Mistral } from '@mistralai/mistralai';
 
 

app/backend/InputOutputHandler.tsx

@@ -1,7 +1,7 @@
 "use client"
 import React, { useEffect, useRef, useState } from "react";
-import ConversationFrontend from "./ConversationFrontend";
+import ConversationFrontend from "../components/ConversationFrontend";
-import InputFrontend from "./InputFrontend";
+import InputFrontend from "../components/InputFrontend";
 
 const handleMicClick = () => {
   console.log('Mic clicked!');

app/components/AI.tsx

@@ -1,6 +1,6 @@
 // AI.tsx
 import React from 'react';
-import InputOutputBackend from './InputOutputHandler';
+import InputOutputBackend from '../backend/InputOutputHandler';
 
 const AI: React.FC = () => {
   return (

app/layout.tsx

@@ -1,4 +1,4 @@
-import Header from "./Header";
+import Header from "./components/Header";
 
 
 export const metadata = {

app/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 import React, { useState, useEffect, useRef } from 'react';
-import Header from './Header';
+import Header from './components/Header';
-import AI from './AI';
+import AI from './components/AI';
-import FAQ from './Faq'; // Ensure the import path is correct
+import FAQ from './components/Faq'; // Ensure the import path is correct
-import Documentation from './Documentation'; // Ensure the import path is correct
+import Documentation from './components/Documentation'; // Ensure the import path is correct
-import History from './History';
+import History from './components/History';
-import Models from './Models';
+import Models from './components/Models';
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {