React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request 'main' (#39) from YasinOnm08/interstellar_ai:main into main

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/39
This commit is contained in:
Patrick 2024-09-24 14:55:13 +02:00
commit 19a9567a5d
4 changed files with 112 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

41
app/components/Header.tsx
View file

@ -1,5 +1,5 @@
// Header.tsx
import React from 'react';
import React, { useState } from 'react';
import Login from './Login';
interface HeaderProps {
@ -11,29 +11,32 @@ interface HeaderProps {
}
const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
const [menuOpen, setMenuOpen] = useState(false)
const toggleMenu = () => {
setMenuOpen(!menuOpen)
}
return (
<>
<header>
<ul>
<li>
<button onClick={() => onViewChange('AI')} className="header-button header-logo">
<img src="/img/logo.png" alt="logo" className="header-logo" />
</button>
</li>
<li>
<button onClick={() => onViewChange('FAQ')} className="header-button">FAQ</button>
</li>
<li>
<button onClick={() => onViewChange('Documentation')} className="header-button">Documentation</button>
</li>
{showToggle && showHistoryModelsToggle && (
<li>
<button onClick={toggleDivs} className="header-button">
<div className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
<span></span>
<span></span>
<span></span>
</div>
<nav className={`nav-links ${menuOpen ? "active":""}`}>
<button onClick={() => onViewChange('FAQ')} className="nav-btn">FAQ</button>
<button onClick={() => onViewChange('Documentation')} className="nav-btn">Documentation</button>
{showToggle && showHistoryModelsToggle && (
<button onClick={toggleDivs} className="nav-btn">
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
</button>
</li>
)}
</ul>
)}
</nav>
{/* <button onClick={() => onViewChange('AI')} className="header-button header-logo">
<img src="/img/logo.png" alt="logo" className="header-logo" />
</button> */}
<Login />
</header>
</>

16
app/components/InputFrontend.tsx
View file

@ -4,21 +4,25 @@ interface InputProps {
message: string;
onSendClick: (message: string) => void;
onMicClick: () => void;
inputDisabled:boolean
}
const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
({ message, onSendClick, onMicClick }, ref: ForwardedRef<HTMLDivElement>) => {
({ message, onSendClick, onMicClick, inputDisabled }, ref: ForwardedRef<HTMLDivElement>) => {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
};
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
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<HTMLDivElement, InputProps>(
onChange={handleInputChange}
onKeyDown={handleKeyDown}
/>
<button type="button" onClick={() => onSendClick(inputValue)}>
<button type="button" onClick={() => onSendClick(inputValue)} disabled={inputDisabled?true:false}>
<img src="/img/send.svg" alt="send" />
</button>
<button type="button" onClick={onMicClick}>