Skip to content

Commit

Permalink
Merge pull request #48 from AI4Bharat/new_chat
Browse files Browse the repository at this point in the history 
Basic Interface
  • Loading branch information
@ishvindersethi22
ishvindersethi22 authored Feb 5, 2024
2 parents 8068e86 + d2ac3cc commit 8f98ee2
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 47 deletions.
35 changes: 34 additions & 1 deletion src/app/ui/pages/chat/chat.css
View file
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
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;

0 comments on commit 8f98ee2

Please sign in to comment.