mirror of
https://github.com/StanGirard/quivr.git
synced 2024-12-17 23:51:51 +03:00
f952d7a269
* feat(v2): loaders added * feature: Add scroll animations * feature: upload ui * feature: upload multiple files * fix: Same file name and size remove * feat(crawler): added * feat(parsers): v2 added more * feat(v2): audio now working * feat(v2): all loaders * feat(v2): explorer * chore: add links * feat(api): added status in return message * refactor(website): remove old code * feat(upload): return type for messages * feature: redirect to upload if ENV=local * fix(chat): fixed some issues * feature: respect response type * loading state * feature: Loading stat * feat(v2): added explore and chat pages * feature: modal settings * style: Chat UI * feature: scroll to bottom when chatting * feature: smooth scroll in chat * feature(anim): Slide chat in * feature: markdown chat * feat(explorer): list * feat(doc): added document item * feat(explore): added modal * Add clarification on Project API keys and web interface for migration scripts to Readme (#58) * fix(demo): changed link * add support to uploading zip file (#62) * Catch UnicodeEncodeError exception (#64) * feature: fixed chatbar * fix(loaders): missing argument * fix: layout * fix: One whole chatbox * fix: Scroll into view * fix(build): vercel issues * chore(streamlit): moved to own file * refactor(api): moved to backend folder * feat(docker): added docker compose * Fix a bug where langchain memories were not being cleaned (#71) * Update README.md (#70) * chore(streamlit): moved to own file * refactor(api): moved to backend folder * docs(readme): updated for new version * docs(readme): added old readme * docs(readme): update copy dot env file * docs(readme): cleanup --------- Co-authored-by: iMADi-ARCH <nandanaditya985@gmail.com> Co-authored-by: Matt LeBel <github@lebel.io> Co-authored-by: Evan Carlson <45178375+EvanCarlson@users.noreply.github.com> Co-authored-by: Mustafa Hasan Khan <65130881+mustafahasankhan@users.noreply.github.com> Co-authored-by: zhulixi <48713110+zlxxlz1026@users.noreply.github.com> Co-authored-by: Stanisław Tuszyński <stanislaw@tuszynski.me>
142 lines
5.0 KiB
TypeScript
142 lines
5.0 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import axios from "axios";
|
|
import Card from "../components/ui/Card";
|
|
import Button from "../components/ui/Button";
|
|
import Modal from "../components/ui/Modal";
|
|
import { MdSettings } from "react-icons/md";
|
|
import ChatMessages from "./ChatMessages";
|
|
|
|
export default function ChatPage() {
|
|
const [question, setQuestion] = useState("");
|
|
const [history, setHistory] = useState<Array<[string, string]>>([
|
|
// ["user", "Hello!"],
|
|
// ["assistant", "Hello Back!"],
|
|
// ["user", "Send some long message"],
|
|
// [
|
|
// "assistant",
|
|
// "This is a very long and really long message which is longer than every other message.",
|
|
// ],
|
|
// ["user", "What is redux"],
|
|
// ["assistant", ``],
|
|
]);
|
|
const [model, setModel] = useState("gpt-3.5-turbo");
|
|
const [temperature, setTemperature] = useState(0);
|
|
const [maxTokens, setMaxTokens] = useState(500);
|
|
const [isPending, setIsPending] = useState(false);
|
|
|
|
const askQuestion = async () => {
|
|
setHistory((hist) => [...hist, ["user", question]]);
|
|
setIsPending(true);
|
|
const response = await axios.post("http://localhost:5000/chat/", {
|
|
model,
|
|
question,
|
|
history,
|
|
temperature,
|
|
max_tokens: maxTokens,
|
|
});
|
|
setHistory(response.data.history);
|
|
console.log(response.data.history);
|
|
|
|
setQuestion("");
|
|
setIsPending(false);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen w-full pt-24 flex flex-col">
|
|
<div className="flex flex-col justify-center items-center flex-1 gap-5 h-full">
|
|
{/* Chat */}
|
|
<div className="flex flex-col items-center justify-center">
|
|
<h1 className="text-3xl font-bold text-center">
|
|
Chat with your brain
|
|
</h1>
|
|
<h2 className="opacity-50">Your AI assistant</h2>
|
|
</div>
|
|
<Card className="p-5 max-w-3xl w-full min-h-full flex-1 mb-24">
|
|
<ChatMessages history={history} />
|
|
<Card className="fixed left-1/2 w-full max-w-3xl bg-gray-100 dark:bg-gray-800 rounded-b-none -translate-x-1/2 bottom-0 px-5 py-5">
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
if (!isPending) askQuestion();
|
|
}}
|
|
className="w-full flex items-center justify-center gap-2"
|
|
>
|
|
<input
|
|
autoFocus
|
|
type="text"
|
|
value={question}
|
|
onChange={(e) => setQuestion(e.target.value)}
|
|
className="w-full p-2 border border-gray-300 dark:border-gray-500 outline-none rounded dark:bg-gray-800"
|
|
placeholder="Enter your question here..."
|
|
/>
|
|
<Button type="submit" isLoading={isPending}>
|
|
{isPending ? "Thinking..." : "Ask"}
|
|
</Button>
|
|
{/* Settings Button */}
|
|
<Modal
|
|
Trigger={
|
|
<Button className="px-3" variant={"tertiary"}>
|
|
<MdSettings className="text-2xl" />
|
|
</Button>
|
|
}
|
|
title="Settings"
|
|
desc="Modify your brain"
|
|
>
|
|
<form className="flex flex-col gap-5 py-5">
|
|
<fieldset className="w-full flex">
|
|
<label className="flex-1" htmlFor="model">
|
|
Model:
|
|
</label>
|
|
<select
|
|
name="model"
|
|
id="model"
|
|
value={model}
|
|
onChange={(e) => setModel(e.target.value)}
|
|
>
|
|
<option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
|
|
<option value="gpt-4">gpt-4</option>
|
|
</select>
|
|
</fieldset>
|
|
<fieldset className="w-full flex">
|
|
<label className="flex-1" htmlFor="temp">
|
|
Temperature: {temperature}
|
|
</label>
|
|
<input
|
|
name="temp"
|
|
id="temp"
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value={temperature}
|
|
onChange={(e) => setTemperature(+e.target.value)}
|
|
/>
|
|
</fieldset>
|
|
<fieldset className="w-full flex">
|
|
<label className="flex-1" htmlFor="tokens">
|
|
Tokens: {maxTokens}
|
|
</label>
|
|
<input
|
|
name="tokens"
|
|
id="tokens"
|
|
type="range"
|
|
min="256"
|
|
max="3000"
|
|
step="1"
|
|
value={maxTokens}
|
|
onChange={(e) => setMaxTokens(+e.target.value)}
|
|
/>
|
|
</fieldset>
|
|
</form>
|
|
</Modal>
|
|
</form>
|
|
</Card>
|
|
</Card>
|
|
|
|
{/* Settings Modal */}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|