first part of refactoring

app/backend/AudioRecorder.ts

@@ -1,34 +0,0 @@
-import React, { useState, useRef } from 'react'
-
-    export const AudioRecorder= () => {
-        const [isRecording, setIsRecording] = useState(false)
-        const [audioURL, setAudioURL] = useState<string | null>(null)
-        const mediaRecorderRef = useRef<MediaRecorder | null>(null)
-        const audioChunks = useRef<Blob[]>([])
-    
-        const startRecording = async () => {
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
-            const mediaRecorder = new MediaRecorder(stream)
-            mediaRecorderRef.current = mediaRecorder
-        
-            mediaRecorder.ondataavailable = (event) => {
-                audioChunks.current.push(event.data)
-            }
-        
-            mediaRecorder.onstop = () => {
-                const audioBlob = new Blob(audioChunks.current, { type: "audio/wav" })
-                const url = URL.createObjectURL(audioBlob)
-                setAudioURL(url)
-                audioChunks.current = []
-            }
-
-            mediaRecorder.start()
-            setIsRecording(true)
-        
-        }
-    
-        const stopRecording = () => {
-            mediaRecorderRef.current?.stop()
-           setIsRecording(false)
-        }
-    }

app/backend/ChatHistory.ts

@@ -1,4 +1,4 @@
-type ChatMessage = {
+/* type ChatMessage = {
     name: string;
     messages: any;
     timestamp: number;
@@ -25,3 +25,4 @@ function removeMessageFromHistory(timestamp: number): void {
         console.log(`Message not found with timestamp: ${timestamp}`);
     }
 }
+ */

app/backend/InputOutputHandler.tsx

@@ -1,12 +1,9 @@
 "use client"
-import React, { use, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ConversationFrontend from '../components/ConversationFrontend';
 import InputFrontend from "../components/InputFrontend";
 import { sendToVoiceRecognition } from "./voice_backend"
 import axios from "axios";
-import { resolve } from "path";
-import { FFmpeg } from "@ffmpeg/ffmpeg";
-import { fetchFile, toBlobURL } from "@ffmpeg/util"
 
 const InputOutputBackend: React.FC = () => {
   // # variables
@@ -66,7 +63,6 @@ const InputOutputBackend: React.FC = () => {
   const [accessToken, setAccessToken] = useState("")
   const postWorkerRef = useRef<Worker | null>(null)
   const getWorkerRef = useRef<Worker | null>(null)
-  const [liveMessage, setLiveMessage] = useState("")
   const [inputMessage, setInputMessage] = useState<string>("")
   const [inputDisabled, setInputDisabled] = useState(false)
   const [isRecording, setIsRecording] = useState(false)
@@ -128,7 +124,7 @@ const InputOutputBackend: React.FC = () => {
         const data = event.data
 
         if (event.data == "error") {
-          setLiveMessage("error getting AI response: " + data.error)
+          console.log("Error getting ai message.")
         } else {
           console.log("Received data:", data);
           editLastMessage(data.response)
@@ -176,7 +172,7 @@ const InputOutputBackend: React.FC = () => {
         if (postWorkerRef.current) {
           addMessage("user", inputValue)
           const type = localStorage.getItem('type')
-          var api_key: string = ""
+          let api_key: string = ""
           if (type != null && type != 'local') {
             const try_key = localStorage.getItem(type)
             if (try_key) {
@@ -241,7 +237,7 @@ const InputOutputBackend: React.FC = () => {
   }
 
   const handleResendClick = () => {
-    var temporary_message = messages[messages.length - 2]['content']
+    const temporary_message = messages[messages.length - 2]['content']
     const updatedMessages = messages.slice(0, -2)
     setMessages(updatedMessages)
     endGetWorker()
@@ -251,7 +247,7 @@ const InputOutputBackend: React.FC = () => {
   }
 
   const handleEditClick = () => {
-    let newestMessage = messages[messages.length - 2].content
+    const newestMessage = messages[messages.length - 2].content
     setInputMessage(newestMessage)
     const updatedMessages = messages.slice(0, messages.length - 2)
     setMessages(updatedMessages)

app/backend/ProcessMemory.ts

@@ -1,5 +1,4 @@
-import { Settings } from 'electron'
+/* import { Settings } from 'electron'
-import React from 'react'
 
 type Message = {
     role: string
@@ -14,7 +13,7 @@ type Chat = {
 type Data = {
     chats: Chat[]
     settings: Settings[]
-}
+} */
 
 
 

app/backend/database.ts

@@ -21,7 +21,7 @@ to check if the request was accepted or declined, check response.data.response,
 const apiURL = new URL("http://localhost:5000/interstellar_ai/db")
 apiURL.hostname = window.location.hostname;
 
-export const sendToDatabase = async (data: any): Promise<boolean> => {
+export const sendToDatabase = async (data: object): Promise<boolean> => {
   try {
     const response = await axios.post(apiURL.href, data);
     const status = response.data.status;
@@ -30,11 +30,12 @@ export const sendToDatabase = async (data: any): Promise<boolean> => {
     return success;
   } catch (error) {
     postMessage({ status: 500, success: false });
+    console.log(error)
     return false;
   }
 };
 
-export const sendToDatabaseAndGetString = async (data: any): Promise<string> => {
+export const sendToDatabaseAndGetString = async (data: object): Promise<string> => {
   try {
     const response = await axios.post(apiURL.href, data);
     const status = response.data.status;
@@ -43,6 +44,7 @@ export const sendToDatabaseAndGetString = async (data: any): Promise<string> =>
     return success;
   } catch (error) {
     postMessage({ status: 500, success: false });
+    console.log(error)
     return "false";
   }
 };
@@ -99,7 +101,7 @@ export const getName = async (usernameOrEmail: string, password: string): Promis
   return await sendToDatabaseAndGetString(data);
 };
 
-export const changeData = async (usernameOrEmail: string, password: string, newData: any) => {
+export const changeData = async (usernameOrEmail: string, password: string, newData: object) => {
   const data = {
     action: "change_settings",
     username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail,
@@ -117,7 +119,7 @@ export const checkCredentials = async (usernameOrEmail: string, password: string
     email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined,
     password,
   };
-  var sendBack = await sendToDatabase(data);
+  const sendBack = await sendToDatabase(data);
   if (sendBack) {
     localStorage.setItem("accountEmail", await getEmail(usernameOrEmail, password))
     localStorage.setItem("accountName", await getName(usernameOrEmail, password))

app/components/ConversationFrontend.tsx

@@ -80,36 +80,38 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
           <div className="button-container">
             <div className="tooltip">
               <button type="button" onClick={onStopClick}>
-                <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512"><path d="M256 0c-25.3 0-47.2 14.7-57.6 36c-7-2.6-14.5-4-22.4-4c-35.3 0-64 28.7-64 64l0 165.5-2.7-2.7c-25-25-65.5-25-90.5 0s-25 65.5 0 90.5L106.5 437c48 48 113.1 75 181 75l8.5 0 8 0c1.5 0 3-.1 4.5-.4c91.7-6.2 165-79.4 171.1-171.1c.3-1.5 .4-3 .4-4.5l0-176c0-35.3-28.7-64-64-64c-5.5 0-10.9 .7-16 2l0-2c0-35.3-28.7-64-64-64c-7.9 0-15.4 1.4-22.4 4C303.2 14.7 281.3 0 256 0zM240 96.1l0-.1 0-32c0-8.8 7.2-16 16-16s16 7.2 16 16l0 31.9 0 .1 0 136c0 13.3 10.7 24 24 24s24-10.7 24-24l0-136c0 0 0 0 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16l0 55.9c0 0 0 .1 0 .1l0 80c0 13.3 10.7 24 24 24s24-10.7 24-24l0-71.9c0 0 0-.1 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16l0 172.9c-.1 .6-.1 1.3-.2 1.9c-3.4 69.7-59.3 125.6-129 129c-.6 0-1.3 .1-1.9 .2l-4.9 0-8.5 0c-55.2 0-108.1-21.9-147.1-60.9L52.7 315.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L119 336.4c6.9 6.9 17.2 8.9 26.2 5.2s14.8-12.5 14.8-22.2L160 96c0-8.8 7.2-16 16-16c8.8 0 16 7.1 16 15.9L192 232c0 13.3 10.7 24 24 24s24-10.7 24-24l0-135.9z"/></svg>              </button>
+                <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512"><path d="M256 0c-25.3 0-47.2 14.7-57.6 36c-7-2.6-14.5-4-22.4-4c-35.3 0-64 28.7-64 64l0 165.5-2.7-2.7c-25-25-65.5-25-90.5 0s-25 65.5 0 90.5L106.5 437c48 48 113.1 75 181 75l8.5 0 8 0c1.5 0 3-.1 4.5-.4c91.7-6.2 165-79.4 171.1-171.1c.3-1.5 .4-3 .4-4.5l0-176c0-35.3-28.7-64-64-64c-5.5 0-10.9 .7-16 2l0-2c0-35.3-28.7-64-64-64c-7.9 0-15.4 1.4-22.4 4C303.2 14.7 281.3 0 256 0zM240 96.1l0-.1 0-32c0-8.8 7.2-16 16-16s16 7.2 16 16l0 31.9 0 .1 0 136c0 13.3 10.7 24 24 24s24-10.7 24-24l0-136c0 0 0 0 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16l0 55.9c0 0 0 .1 0 .1l0 80c0 13.3 10.7 24 24 24s24-10.7 24-24l0-71.9c0 0 0-.1 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16l0 172.9c-.1 .6-.1 1.3-.2 1.9c-3.4 69.7-59.3 125.6-129 129c-.6 0-1.3 .1-1.9 .2l-4.9 0-8.5 0c-55.2 0-108.1-21.9-147.1-60.9L52.7 315.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L119 336.4c6.9 6.9 17.2 8.9 26.2 5.2s14.8-12.5 14.8-22.2L160 96c0-8.8 7.2-16 16-16c8.8 0 16 7.1 16 15.9L192 232c0 13.3 10.7 24 24 24s24-10.7 24-24l0-135.9z" /></svg>              </button>
               <span className="tooltiptext">Stop</span>
             </div>
             <div className="tooltip">
               <button type="button" onClick={onResendClick}>
-                <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512"><path d="M463.5 224l8.5 0c13.3 0 24-10.7 24-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l119.5 0z"/></svg>
+                <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512"><path d="M463.5 224l8.5 0c13.3 0 24-10.7 24-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l119.5 0z" /></svg>
               </button>
               <span className="tooltiptext">Resend</span>
             </div>
             <div className="tooltip">
               <button type="button" onClick={onEditClick}>
-                <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512"><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z"/></svg>
+                <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512"><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z" /></svg>
               </button>
               <span className="tooltiptext">Edit</span>
             </div>
             <div className="tooltip">
               <button type="button" onClick={onCopyClick}>
-                <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512" preserveAspectRatio="none"><path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg>
+                <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" preserveAspectRatio="none"><path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z" /></svg>
               </button>
-              <span className="tooltiptext">{isClicked?"Copied!": "Copy" }</span>
+              <span className="tooltiptext">{isClicked ? "Copied!" : "Copy"}</span>
             </div>
           </div>
-          <div className={"endOfMessages"} ref={messagesEndRef} style={{ height: "3px"}}/>
+          <div className={"endOfMessages"} ref={messagesEndRef} style={{ height: "3px" }} />
         </div>
         <button id="scrollToBottom" disabled={isScrolling ? true : false} style={{ visibility: isScrolling ? "hidden" : "visible" }} onClick={() => setIsScrolling(true)}>
-          <svg style={{fill:"var(--text-color)"}} viewBox="0 0 384 512" height={30}><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
+          <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 384 512" height={30}><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" /></svg>
         </button>
       </div>
     );
   }
 );
 
+ConversationFrontend.displayName = "ConversationFrontend";
+
 export default ConversationFrontend;

app/components/Documentation.tsx

@@ -21,7 +21,7 @@ const Documentation = () => {
           We are committed to designing a visually appealing graphical user interface (GUI) that significantly enhances user experience and engagement. The GUI will prominently feature a chat function, allowing users to interact seamlessly with the AI Assistant. This conversational interface will facilitate easy communication, making it intuitive for users to ask questions and receive responses.
         </p>
         <p className="paragraph">
-              To further improve usability, we will incorporate distinct buttons that enable users to switch effortlessly between online and offline modes. This functionality ensures that users can access the AI's capabilities regardless of their internet connectivity, making the application versatile and accommodating to various user environments.
+          To further improve usability, we will incorporate distinct buttons that enable users to switch effortlessly between online and offline modes. This functionality ensures that users can access the AI&apos;s capabilities regardless of their internet connectivity, making the application versatile and accommodating to various user environments.
         </p>
         <p className="paragraph">
           Additionally, the interface will provide options for users to select from a range of AI models, each tailored for specific use cases such as coding assistance, mathematical problem-solving, and language translation. This feature empowers users to choose the most suitable AI for their needs, thereby enhancing the overall effectiveness and relevance of the application.
@@ -66,10 +66,10 @@ const Documentation = () => {
           Our current prototype operates on a straightforward Python backend, which, while functional, relies heavily on our optimism that it will remain stable and not encounter any critical failures or data loss.
         </p>
         <p className="paragraph">
-              The existing chat system is equipped with several key features designed to enhance user interaction. Users can easily resend the AI's response, allowing for quick follow-up questions or clarifications. Additionally, the system provides the ability to edit user messages, ensuring that any mistakes can be corrected without starting the conversation anew.
+          The existing chat system is equipped with several key features designed to enhance user interaction. Users can easily resend the AI&apos;s response, allowing for quick follow-up questions or clarifications. Additionally, the system provides the ability to edit user messages, ensuring that any mistakes can be corrected without starting the conversation anew.
         </p>
         <p className="paragraph">
-              Furthermore, users have the option to copy the AI's responses, facilitating easy sharing or saving of information for future reference. These features aim to create a more flexible and user-friendly experience, allowing for seamless communication and interaction with the AI.
+          Furthermore, users have the option to copy the AI&apos;s responses, facilitating easy sharing or saving of information for future reference. These features aim to create a more flexible and user-friendly experience, allowing for seamless communication and interaction with the AI.
         </p>
         <p className="paragraph">
           While the current setup serves as a solid foundation, we recognize the need for further improvements and enhancements to ensure reliability and robustness as we move forward in the development process.

app/components/Faq.tsx

@@ -12,7 +12,7 @@ const FAQ: React.FC = () => {
 
       <div className="faq-item">
         <h3>How does the AI assistant work?</h3>
-        <p>The assistant uses machine learning algorithms to understand your input and provide contextually relevant answers or generate content based on the task you've described.</p>
+        <p>The assistant uses machine learning algorithms to understand your input and provide contextually relevant answers or generate content based on the task you&apos;ve described.</p>
       </div>
 
       <div className="faq-item">
@@ -32,11 +32,11 @@ const FAQ: React.FC = () => {
 
       <div className="faq-item">
         <h3>How can I provide feedback about the AI assistant?</h3>
-        <p>Feedback can be provided through our feedback form, available on our website. We appreciate your input and use it to improve the AI assistant's performance.</p>
+        <p>Feedback can be provided through our feedback form, available on our website. We appreciate your input and use it to improve the AI assistant&apos;s performance.</p>
       </div>
 
       <div className="faq-item">
-        <h3>Can I customize the AI assistant's responses?</h3>
+        <h3>Can I customize the AI assistant&apos;s responses?</h3>
         <p>Customization options are limited in the current version, but we are working on features that will allow users to tailor responses to better suit their needs.</p>
       </div>
 
@@ -77,7 +77,7 @@ const FAQ: React.FC = () => {
 
       <div className="faq-item">
         <h3>How can I access previous conversations?</h3>
-        <p>Previous conversations can be accessed through the chat history feature available in the assistant's interface.</p>
+        <p>Previous conversations can be accessed through the chat history feature available in the assistant&apos;s interface.</p>
       </div>
 
       <div className="faq-item">

app/components/InputFrontend.tsx

@@ -10,7 +10,7 @@ interface InputProps {
 }
 
 const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
-  ({ message, onSendClick, onMicClick, inputDisabled, isRecording}, ref: ForwardedRef<HTMLDivElement>) => {
+  ({ message, onSendClick, onMicClick, inputDisabled, isRecording }, ref: ForwardedRef<HTMLDivElement>) => {
     const [inputValue, setInputValue] = useState('');
 
     useEffect(() => {
@@ -49,14 +49,16 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
           onKeyDown={handleKeyDown}
         />
         <button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}>
-          <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
+          <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" /></svg>
         </button>
         <button className={`microphone-button ${isRecording ? "red" : "var(--input-button-color)"}`} type="button" onClick={onMicClick}>
-          <svg style={{fill:"var(--text-color)"}} viewBox="0 0 384 512" width={15}><path d="M192 0C139 0 96 43 96 96l0 160c0 53 43 96 96 96s96-43 96-96l0-160c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 89.1 66.2 162.7 152 174.4l0 33.6-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l72 0 72 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-33.6c85.8-11.7 152-85.3 152-174.4l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 70.7-57.3 128-128 128s-128-57.3-128-128l0-40z"/></svg>
+          <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 384 512" width={15}><path d="M192 0C139 0 96 43 96 96l0 160c0 53 43 96 96 96s96-43 96-96l0-160c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 89.1 66.2 162.7 152 174.4l0 33.6-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l72 0 72 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-33.6c85.8-11.7 152-85.3 152-174.4l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 70.7-57.3 128-128 128s-128-57.3-128-128l0-40z" /></svg>
         </button>
       </div>
     );
   }
 );
 
+InputFrontend.displayName = "InputFrontend";
+
 export default InputFrontend;