Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Basic Interface #48

Merged
merged 1 commit into from
Feb 5, 2024
Merged

Basic Interface #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 34 additions & 1 deletion src/app/ui/pages/chat/chat.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
width: 51.25rem;
outline: solid white;
height: 3.1rem;
margin-right: 1.2rem;
border-radius: 2.5rem;
padding-left: 1rem;
}
Expand Down Expand Up @@ -52,3 +51,37 @@
margin-right: 2rem;
}

/* Add these styles to your existing styles or create a new CSS file */

/* Chat container styles */
.chat-container {
overflow-y:scroll;
max-height: 200px;
width: 46%;
padding: 10px;
display: flex;
flex-direction: column;
}

/* User message styles */
.user-message {
background-color: #f58308;
color: #ffffff;
max-width: 70%;
align-self: flex-end;
border-radius: 10px;
padding: 10px;
margin-bottom: 8px;
}

/* Bot message styles */
.bot-message {
background-color: #EAEAEA;
color: #333;
max-width: 70%;
align-self: flex-start;
border-radius: 10px;
padding: 10px;
margin-bottom: 8px;
}

194 changes: 148 additions & 46 deletions src/app/ui/pages/chat/chat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,93 @@
"use client"
import "./chat.css";
import { useState } from "react";
import { Grid, IconButton,Avatar,Tooltip,Typography} from "@mui/material";
import { InfoOutlined} from "@material-ui/icons";
import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
import Image from "next/image";
import { useRouter } from "next/navigation";

const dummyData = [
{
"prompt": "Hii Anudesh",
"output": "Hello! How can I assist you today?"
},
{
"prompt": "What is a computer?",
"output": "Computer is an electronic device"
},
{
"prompt": "What is it used for?",
"output": "It is used for computation"
},
{
"prompt": "Thanks, any additional points?",
"output": "No"
}
];

export default function Chat()
{

const Chat = () =>{

const [inputValue, setInputValue] = useState('');
const [chatHistory, setChatHistory] = useState([]);
const [showChatContainer, setShowChatContainer] = useState(false);
const router = useRouter();
return(
<>


<div className="w-100% h-100vh bg-white flex flex-col gap-2">
<div className="flex justify-between">
const handleButtonClick = () => {
if (inputValue) {
const response = dummyData.find(item => item.prompt === inputValue);
if (response) {
setChatHistory(prev => [...prev, { message: inputValue, isUser: true }, { message: response.output, isUser: false }]);
} else {
setChatHistory(prev => [...prev, { message: inputValue, isUser: true }, { message: "I'm sorry, I don't understand.", isUser: false }]);
}

setInputValue('');
setShowChatContainer(true);
} else {
alert('Please provide a prompt.');
}
};

const renderChatHistory = () => {
const chatElements = [];
for (let index = 0; index < chatHistory.length; index++) {
const message = chatHistory[index];
const isUser = message.isUser;
const boxClassName = isUser ? "box1 flex w-[40vw] py-7 justify-start items-center space-x-6" : "box2 bg-orange-100 flex w-full py-7 justify-center items-center";

chatElements.push(
<div key={index} className={boxClassName}>
{isUser ? (
<>
<div>
<Avatar />
</div>
<div>{message.message}</div>
</>
) : (
<div className="w-[40vw] flex justify-start items-center space-x-6">
<img
src="https://i.imgur.com/56Ut9oz.png"
className="w-10 h-10"
alt="Bot Avatar"
/>
<div>{message.message}</div>
</div>
)}
</div>
);
}
return chatElements;
};

return(
<>
<div className="relative z-0 flex flex-col h-full w-full overflow-hidden">
<div className="flex justify-between w-full">
<div>
<img src="https://i.imgur.com/56Ut9oz.png" className="mt-4 ml-10 h-[61px] w-[60px]" onClick={() => router.push("/home") }></img>
</div>
<div className="flex">
<img src="https://i.imgur.com/FGmAyjz.png" className="w-6 h-6 mt-11"/>
<img src="https://i.imgur.com/A3Rcbqe.jpeg" className="w-6 h-6 mt-11 ml-4"/>
Expand All @@ -30,46 +101,77 @@ export default function Chat()
<Avatar
className="user-profile"
/>
</div>

</div>
</div>
<div className="w-[98%] h-[55rem] mx-auto bg-stone-600 bg-opacity-5 rounded-2xl flex flex-col items-center">
<div className="w-auto h-36 mt-20 mx-auto bg-white rounded-2xl flex flex-row gap-2">
<img src="https://i.imgur.com/56Ut9oz.png" className="mt-6 mx-5 h-[6.2rem] w-[6rem]"></img>
<div>
<h3 className="text-3xl text-orange-600 font-bold mt-8">Namaste</h3>
<p className="text-sm text-[#6c5f5b] font-normal mr-16">Tell me what’s on your mind or pick a suggestion. I have limitations and won't always get it right, but your <br></br> feedback will help me to improve.</p>
</div>
</div>
<div className="grid grid-cols-3 gap-9 mt-16">
<div className="div-grid flex flex-col">
<h3 className="grid-heading">What is Anudesh?</h3>
<p className="text-xl mx-6">data leta hai multilingual(indic), will be used for model training for indic llms, 22, open source - model and data</p>
</div>
<div className="div-grid">
<h3 className="grid-heading">How can you help?</h3>
<p className="text-xl mx-20 my-16">GIF</p>
</div>
<div className="div-grid">
<h3 className="grid-heading">Why Contribute?</h3>
<p className="text-xl mx-20 my-16">Graph</p>
</div>
</div>

<div className="mt-48 flex">
<input
className="myInput"
name=""
placeholder="Enter a prompt here"
/>
<img src="https://i.imgur.com/2sWOT6F.png" className=" w-5 h-4 mt-4"/>
</div>
<div className="w-[98%] h-full overflow-hidden mx-auto bg-stone-600 bg-opacity-5 rounded-2xl flex flex-col mt-4">
{showChatContainer ?
(<>
<div className="w-auto h-36 mt-12 mx-auto bg-white rounded-2xl flex flex-row gap-2">
<img src="https://i.imgur.com/56Ut9oz.png" className="my-4 mx-5 h-[6.2rem] w-[6rem]"></img>
<div>
<h3 className="text-3xl text-orange-600 font-bold mt-8">Namaste</h3>
<p className="text-sm text-[#6c5f5b] font-normal mr-16">Tell me what’s on your mind or pick a suggestion. I have limitations and won't always get it right, but your <br></br> feedback will help me to improve.</p>
</div>
</div>
<div className="w-full flex items-center flex-col overflow-auto h-full">
{renderChatHistory()}
</div>
<div className="w-auto mx-auto my-10 flex">
<input
className="myInput"
value={inputValue}
placeholder="Enter a prompt here"
onChange={(e) => setInputValue(e.target.value)}
/>
<IconButton
onClick={handleButtonClick}
>
<img src="https://i.imgur.com/2sWOT6F.png" className=" w-5 h-4 mt-2" alt="Send Icon" />
</IconButton>
</div>
</>):
(<>
<div className="w-auto h-36 mt-12 mx-auto bg-white rounded-2xl flex flex-row gap-2">
<img src="https://i.imgur.com/56Ut9oz.png" className="mt-6 mx-5 h-[6.2rem] w-[6rem]"></img>
<div>
<h3 className="text-3xl text-orange-600 font-bold mt-8">Namaste</h3>
<p className="text-sm text-[#6c5f5b] font-normal mr-16">Tell me what’s on your mind or pick a suggestion. I have limitations and won't always get it right, but your <br></br> feedback will help me to improve.</p>
</div>
</div>
<div className="w-auto mx-auto grid grid-cols-3 gap-9 mt-16">
<div className="div-grid flex flex-col">
<h3 className="grid-heading">What is Anudesh?</h3>
<p className="text-xl mx-6">data leta hai multilingual(indic), will be used for model training for indic llms, 22, open source - model and data</p>
</div>
<div className="div-grid">
<h3 className="grid-heading">How can you help?</h3>
<p className="text-xl mx-20 my-16">GIF</p>
</div>
<div className="div-grid">
<h3 className="grid-heading">Why Contribute?</h3>
<p className="text-xl mx-20 my-16">Graph</p>
</div>
</div>
<div className="w-auto mx-auto mt-56 flex">
<input
className="myInput"
value={inputValue}
placeholder="Enter a prompt here"
onChange={(e) => setInputValue(e.target.value)}
/>
<IconButton
onClick={handleButtonClick}
>
<img src="https://i.imgur.com/2sWOT6F.png" className=" w-5 h-4 mt-2" alt="Send Icon" />
</IconButton>
</div>
</>)
}
</div>
</div>




</>
)
}
);
};

export default Chat;
Loading