-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added avatars, cleaned up styling, more baby proofing
Co-authored-by: Victor Lang'at <viictoo@users.noreply.github.com>
- Loading branch information
1 parent
494081e
commit 88e0b7a
Showing
17 changed files
with
830 additions
and
261 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| { | ||
| "$schema": "https://ui.shadcn.com/schema.json", | ||
| "style": "default", | ||
| "rsc": true, | ||
| "tsx": true, | ||
| "tailwind": { | ||
| "config": "tailwind.config.ts", | ||
| "css": "app/globals.css", | ||
| "baseColor": "stone", | ||
| "cssVariables": true, | ||
| "prefix": "" | ||
| }, | ||
| "aliases": { | ||
| "components": "@/components", | ||
| "utils": "@/lib/utils" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,95 @@ | ||
| import { Button } from "./ui/button"; | ||
| import { Input } from "./ui/input"; | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardFooter, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from "@/components/ui/card"; | ||
| import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; | ||
| interface history { | ||
| role: string; | ||
| content: string; | ||
| } | ||
|
|
||
| interface FreeModeProps { | ||
| FreeHistory: history[]; | ||
| prompt: string; | ||
| setPrompt: (prompt: string) => void; | ||
| handleSubmit: () => void; | ||
| } | ||
| loading: boolean; | ||
| FreeHistory: history[]; | ||
| prompt: string; | ||
| setPrompt: (prompt: string) => void; | ||
| handleSubmit: () => void; | ||
| } | ||
|
|
||
| export default function FreeMode({FreeHistory, prompt, setPrompt, handleSubmit}: FreeModeProps) { | ||
| export default function FreeMode({ | ||
| loading, | ||
| FreeHistory, | ||
| prompt, | ||
| setPrompt, | ||
| handleSubmit, | ||
| }: FreeModeProps) { | ||
| return ( | ||
| <> | ||
| <p>file loaded successfully! Ask the document questions:</p> | ||
| <div className="flex flex-col w-full px-10 items-center"> | ||
| <p>Ask the document questions:</p> | ||
| {FreeHistory.slice(1).length > 0 && | ||
| FreeHistory.slice(1).map((msg: history, index: number) => ( | ||
| <h1 key={index}> | ||
| {msg.role}: {msg.content} | ||
| </h1> | ||
| <div className={`flex items-center gap-3 ${ | ||
| msg.role === "user" ? "self-end" : "self-start" | ||
| }`}> | ||
| {msg.role !== "user" && ( | ||
| <Avatar> | ||
| <AvatarImage src="/aillama.jpg" /> | ||
| <AvatarFallback>CN</AvatarFallback> | ||
| </Avatar> | ||
| )} | ||
| <Card | ||
| key={index} | ||
| className={`border-none `} | ||
| > | ||
| <CardHeader className="p-2"> | ||
| <CardTitle | ||
| className={`text-sm ${ | ||
| msg.role === "user" ? "self-end" : "self-start" | ||
| }`} | ||
| > | ||
| {msg.role} | ||
| </CardTitle> | ||
| </CardHeader> | ||
| <CardContent className="pb-2"> | ||
| <p>{msg.content}</p> | ||
| </CardContent> | ||
| </Card> | ||
| {msg.role === "user" && ( | ||
| <Avatar> | ||
| <AvatarImage src="/llamaUser.jpg" /> | ||
| <AvatarFallback>CN</AvatarFallback> | ||
| </Avatar> | ||
| )} | ||
| </div> | ||
| ))} | ||
| <input | ||
| className="text-black w-full" | ||
| type="text" | ||
| value={prompt} | ||
| onKeyDown={(event) => { | ||
| if (event.key === "Enter") { | ||
| handleSubmit(); | ||
| } | ||
| }} | ||
| onChange={(event) => { | ||
| setPrompt(event.target.value); | ||
| }} | ||
| /> | ||
| <button onClick={handleSubmit}>Submit</button> | ||
| </> | ||
| <div className="flex w-full items-center space-x-2 pt-3"> | ||
| <Input | ||
| className="w-full" | ||
| value={prompt} | ||
| type="text" | ||
| onKeyDown={(event) => { | ||
| if (event.key === "Enter" && prompt.trim() !== "" && !loading) { | ||
| handleSubmit(); | ||
| } | ||
| }} | ||
| onChange={(event) => { | ||
| setPrompt(event.target.value); | ||
| }} | ||
| placeholder="Enter a prompt" | ||
| /> | ||
| <Button | ||
| disabled={loading || prompt.trim() === ""} | ||
| onClick={handleSubmit} | ||
| > | ||
| Submit | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,30 @@ | ||
| export default function ModeToggle({setMode}: {setMode: (mode: string) => void}) { | ||
| return ( | ||
| <div className="flex"> | ||
| <button | ||
| onClick={() => { | ||
| setMode("free"); | ||
| }} | ||
| > | ||
| Free interact | ||
| </button> | ||
| <button | ||
| onClick={() => { | ||
| setMode("quiz"); | ||
| }} | ||
| > | ||
| Quiz mode | ||
| </button> | ||
| </div> | ||
| ) | ||
| } | ||
| import { Button } from "./ui/button"; | ||
|
|
||
| export default function ModeToggle({ | ||
| mode, | ||
| setMode, | ||
| }: { | ||
| mode: string; | ||
| setMode: (mode: string) => void; | ||
| }) { | ||
| return ( | ||
| <div className="flex gap-5"> | ||
| <Button | ||
| variant={mode === "free" ? "default" : "secondary"} | ||
| onClick={() => { | ||
| setMode("free"); | ||
| }} | ||
| > | ||
| Free interaction Mode | ||
| </Button> | ||
| <Button | ||
| variant={mode !== "free" ? "default" : "secondary"} | ||
| onClick={() => { | ||
| setMode("quiz"); | ||
| }} | ||
| > | ||
| Quiz Mode | ||
| </Button> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.