From b4713ea3b2e087dd120fb4509b134a54317a6192 Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Tue, 24 Sep 2024 09:51:16 +0200 Subject: [PATCH 1/6] Only 1 msg at a time --- app/backend/InputOutputHandler.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index bf8a191..df2ab1e 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -3,7 +3,9 @@ import React, { useEffect, useRef, useState } from "react"; import ConversationFrontend from "../components/ConversationFrontend"; import InputFrontend from "../components/InputFrontend"; import axios from "axios"; -import { log } from 'console'; + + +let sendable = true const InputOutputBackend: React.FC = () => { type Message = { @@ -37,8 +39,10 @@ const InputOutputBackend: React.FC = () => { postWorkerRef.current.onmessage = (event) => { const status = event.data.status if (status == 200) { + sendable = true endGetWorker() } else if (status == 500) { + sendable = true if (getWorkerRef.current) { addMessage("assistant", "There was an Error with the AI response") getWorkerRef.current.postMessage("terminate") @@ -109,11 +113,14 @@ const InputOutputBackend: React.FC = () => { setMessages(previous => [...previous,{role,content}]) } const handleSendClick = (inputValue: string) => { - if (postWorkerRef.current) { - addMessage("user", inputValue) - console.log("input:",inputValue); - postWorkerRef.current.postMessage({messages:[...messages, { role: "user", content: inputValue }], ai_model:"phi3.5", access_token:accessToken}) - startGetWorker() + if (sendable) { + sendable=false + if (postWorkerRef.current) { + addMessage("user", inputValue) + console.log("input:",inputValue); + postWorkerRef.current.postMessage({messages:[...messages, { role: "user", content: inputValue }], ai_model:"phi3.5", access_token:accessToken}) + startGetWorker() + } } } -- 2.39.5 From d037439b4ce06601f5e9d38da7d040db21579407 Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Tue, 24 Sep 2024 10:22:50 +0200 Subject: [PATCH 2/6] no empty msg --- app/backend/InputOutputHandler.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index df2ab1e..9458f5d 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -113,13 +113,15 @@ const InputOutputBackend: React.FC = () => { setMessages(previous => [...previous,{role,content}]) } const handleSendClick = (inputValue: string) => { - if (sendable) { - sendable=false - if (postWorkerRef.current) { - addMessage("user", inputValue) - console.log("input:",inputValue); - postWorkerRef.current.postMessage({messages:[...messages, { role: "user", content: inputValue }], ai_model:"phi3.5", access_token:accessToken}) - startGetWorker() + if (inputValue != "") { + if (sendable) { + sendable=false + if (postWorkerRef.current) { + addMessage("user", inputValue) + console.log("input:",inputValue); + postWorkerRef.current.postMessage({messages:[...messages, { role: "user", content: inputValue }], ai_model:"phi3.5", access_token:accessToken}) + startGetWorker() + } } } } -- 2.39.5 From 37177a7856c727dd8b5c63b7f6cdcfb358cd1731 Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Tue, 24 Sep 2024 10:58:14 +0200 Subject: [PATCH 3/6] OMG FINALY WORKING LIVE TEXT --- app/backend/InputOutputHandler.tsx | 4 ++++ app/backend/threads/GetWorker.js | 2 +- app/backend/threads/PostWorker.js | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index 9458f5d..12f5d10 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -90,11 +90,15 @@ const InputOutputBackend: React.FC = () => { if (getWorkerRef.current) { getWorkerRef.current.postMessage({action:"terminate"}) getWorkerRef.current.terminate() + getWorkerRef.current = null console.log(messages); } } const editLastMessage = (newContent: string) => { + if (newContent == "") { + newContent = "Loading..." + } setMessages((prevMessages) => { const updatedMessages = prevMessages.slice(); // Create a shallow copy of the current messages if (updatedMessages.length > 0) { diff --git a/app/backend/threads/GetWorker.js b/app/backend/threads/GetWorker.js index 23d8e63..fcdcc2f 100644 --- a/app/backend/threads/GetWorker.js +++ b/app/backend/threads/GetWorker.js @@ -29,6 +29,6 @@ const fetchData = () => { .catch(error => { console.log('Error fetching data:', error); postMessage({error:"failed fetching data"}) - + setTimeout(() => fetchData(),1000) }) } \ No newline at end of file diff --git a/app/backend/threads/PostWorker.js b/app/backend/threads/PostWorker.js index 730c852..d6f6b04 100644 --- a/app/backend/threads/PostWorker.js +++ b/app/backend/threads/PostWorker.js @@ -2,7 +2,7 @@ import axios from "axios"; onmessage = (e) => { const { messages = [{ role: "assistant", content: "Hello! How can I help you?" }], ai_model = "phi3.5", access_token } = e.data - messages.unshift({ role: "system", content: "You are a Helpful assistant" }) + messages.unshift({ role: "system", content: "You are a Helpful assistant. you give short answers" }) const Message = { messages: messages, -- 2.39.5 From 615a58ce284592dad4480a239935061742dd4a4b Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Tue, 24 Sep 2024 13:50:46 +0200 Subject: [PATCH 4/6] no input while generating/empty --- app/backend/InputOutputHandler.tsx | 15 +++++++-------- app/components/InputFrontend.tsx | 16 ++++++++++------ 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index 12f5d10..86bb594 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -4,9 +4,6 @@ import ConversationFrontend from "../components/ConversationFrontend"; import InputFrontend from "../components/InputFrontend"; import axios from "axios"; - -let sendable = true - const InputOutputBackend: React.FC = () => { type Message = { role: string @@ -18,6 +15,7 @@ const InputOutputBackend: React.FC = () => { const getWorkerRef = useRef(null) const [messages, setMessages] = useState([{role:"assistant", content:"Hello! How can I help you?"}]) const [liveMessage, setLiveMessage] = useState("") + const [inputDisabled, setInputDisabled] = useState(false) console.log(messages); @@ -39,10 +37,10 @@ const InputOutputBackend: React.FC = () => { postWorkerRef.current.onmessage = (event) => { const status = event.data.status if (status == 200) { - sendable = true + setInputDisabled(false) endGetWorker() } else if (status == 500) { - sendable = true + setInputDisabled(false) if (getWorkerRef.current) { addMessage("assistant", "There was an Error with the AI response") getWorkerRef.current.postMessage("terminate") @@ -97,7 +95,7 @@ const InputOutputBackend: React.FC = () => { const editLastMessage = (newContent: string) => { if (newContent == "") { - newContent = "Loading..." + newContent = "Generating answer..." } setMessages((prevMessages) => { const updatedMessages = prevMessages.slice(); // Create a shallow copy of the current messages @@ -118,8 +116,8 @@ const InputOutputBackend: React.FC = () => { } const handleSendClick = (inputValue: string) => { if (inputValue != "") { - if (sendable) { - sendable=false + if (!inputDisabled) { + setInputDisabled(true) if (postWorkerRef.current) { addMessage("user", inputValue) console.log("input:",inputValue); @@ -158,6 +156,7 @@ const InputOutputBackend: React.FC = () => { message="" onSendClick={handleSendClick} onMicClick={handleMicClick} + inputDisabled={inputDisabled} /> ) diff --git a/app/components/InputFrontend.tsx b/app/components/InputFrontend.tsx index cf9dffc..f22ee57 100644 --- a/app/components/InputFrontend.tsx +++ b/app/components/InputFrontend.tsx @@ -4,21 +4,25 @@ interface InputProps { message: string; onSendClick: (message: string) => void; onMicClick: () => void; + inputDisabled:boolean } const InputFrontend = React.forwardRef( - ({ message, onSendClick, onMicClick }, ref: ForwardedRef) => { + ({ message, onSendClick, onMicClick, inputDisabled }, ref: ForwardedRef) => { const [inputValue, setInputValue] = useState(''); + const handleInputChange = (e: React.ChangeEvent) => { setInputValue(e.target.value); }; const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter') { - onSendClick(inputValue); // Call the function passed via props - setInputValue(''); // Optionally clear input after submission - event.preventDefault(); // Prevent default action (e.g., form submission) + if (!inputDisabled) { + if (event.key === 'Enter') { + onSendClick(inputValue); // Call the function passed via props + setInputValue(''); // Optionally clear input after submission + event.preventDefault(); // Prevent default action (e.g., form submission) + } } }; @@ -32,7 +36,7 @@ const InputFrontend = React.forwardRef( onChange={handleInputChange} onKeyDown={handleKeyDown} /> - - -
  • - -
  • -
  • - -
  • - {showToggle && showHistoryModelsToggle && ( -
  • - + + {showToggle && showHistoryModelsToggle && ( + -
  • - )} - + )} + + {/* */} diff --git a/app/styles/header.css b/app/styles/header.css index eed0f9e..c630cb2 100644 --- a/app/styles/header.css +++ b/app/styles/header.css @@ -10,29 +10,84 @@ header { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 1000; font-family: var(--font-family); + display: flex; + justify-content: space-between; + align-items: center; } -header li { - display: inline-block; - margin: 0 15px; +.nav-links{ + display: flex; + gap: 15px; } -header img { - height: 2em; - vertical-align: middle; -} - -header a, -header li button { - color: var(--header-text-color); /* Use the new header text color */ - text-decoration: none; - transition: color 0.3s; +.nav-btn{ + background: transparent; border: none; - background-color: transparent; - font-size: 1em; + cursor: pointer; + /* color */ } -header a:hover, -header li button:hover { - color: var(--input-button-color); /* Keep the hover color */ +.nav-btn:hover{ + /* color */ } + +.hamburger{ + display: none; + flex-direction: column; + cursor: pointer; +} + +.hamburger span{ + width: 25px; + height: 3px; + background-color: var(--header-text-color); + margin: 4px; + transition: 0.3s; +} + +.hamburger.open span:nth-child(1){ + transform: rotate(45deg) translate(5px, 5px); +} + +.hamburger.open span:nth-child(2){ + opacity: 0; +} + +.hamburger.open span:nth-child(3){ + transform: rotate(-45deg) translate(5px, -5px); +} + +.header-button{ + +} +.header-button img{ + height: 8vh; +} + +@media (max-width:768px) { + .nav-links{ + display: none; + position: absolute; + top: 60px; + right: 0; + /* background color */ + width: 100%; + flex-direction: column; + align-items: flex-start; + padding: 10px; + } + + .nav-links.active{ + display: flex; + } + + .nav-btn{ + width: 100%; + text-align: center; + padding: 10px; + } + + .hamburger{ + display: flex; + } +} \ No newline at end of file -- 2.39.5