mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-08-28 05:25:33 +00:00
add: animated query input
This commit is contained in:
Kartik
parent
4cd16ecb06
commit
62c4d88320
3 changed files with 130 additions and 59 deletions
|
|
@ -1,6 +1,9 @@
|
|||
import ChatWindow from "./chatWindow";
|
||||
import { chatSearchParamsCache } from "../../helpers/lib/searchParams";
|
||||
import { ChevronDownIcon, ClipboardIcon, SpeakerWaveIcon } from '@heroicons/react/24/outline'
|
||||
import Image from "next/image";
|
||||
import { ArrowRightIcon } from "@repo/ui/icons";
|
||||
import QueryInput from "@repo/ui/components/QueryInput";
|
||||
// @ts-expect-error
|
||||
await import("katex/dist/katex.min.css");
|
||||
|
||||
|
|
@ -14,80 +17,88 @@ function Page({
|
|||
console.log(spaces);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="max-w-3xl z-10 mx-auto relative h-full overflow-y-auto no-scrollbar">
|
||||
{/* <ChatWindow q={q} spaces={[]} /> */}
|
||||
|
||||
<div className="max-w-3xl mx-auto pt-24">
|
||||
<div className="w-full pt-24 space-y-40">
|
||||
{/* single q&A */}
|
||||
<div className="space-y-16">
|
||||
{Array.from({ length: 1 }).map((_, i) => (
|
||||
|
||||
{/* header */}
|
||||
<div>
|
||||
{/* query */}
|
||||
<h1 className="text-white text-xl">Why is Retrieval-Augmented Generation important?</h1>
|
||||
</div>
|
||||
<div key={i} className="space-y-16">
|
||||
|
||||
{/* response */}
|
||||
<div className="space-y-10">
|
||||
|
||||
{/* related memories */}
|
||||
<div className="space-y-4">
|
||||
{/* section header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<h1>Related memories</h1>
|
||||
<button>
|
||||
<ChevronDownIcon className="size-4 stroke-2" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* section content */}
|
||||
{/* collection of memories */}
|
||||
<div className="flex items-center no-scrollbar overflow-auto gap-4">
|
||||
{/* related memory */}
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="w-[350px] shrink-0 p-4 gap-2 rounded-2xl flex flex-col bg-secondary">
|
||||
|
||||
<h3 className="text-[13px]">Webpage</h3>
|
||||
<p className="line-clamp-2 text-white">What is RAG? - Retrieval-Augmented Generation Explained - AWS</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* header */}
|
||||
<div>
|
||||
{/* query */}
|
||||
<h1 className="text-white text-xl">Why is Retrieval-Augmented Generation important?</h1>
|
||||
</div>
|
||||
|
||||
{/* summary */}
|
||||
<div className="space-y-4">
|
||||
{/* section header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<h1>Summary</h1>
|
||||
<button>
|
||||
<ChevronDownIcon className="size-4 stroke-2" />
|
||||
</button>
|
||||
</div>
|
||||
{/* response */}
|
||||
<div className="space-y-10">
|
||||
|
||||
{/* section content */}
|
||||
<div>
|
||||
<p className="text-white text-base">
|
||||
Retrieval-Augmented Generation is crucial because it combines the strengths of retrieval-based methods, ensuring relevance and accuracy, with generation-based models, enabling creativity and flexibility. By integrating retrieval mechanisms, it addresses data sparsity issues, improves content relevance, offers fine-tuned control over output, handles ambiguity, and allows for continual learning, making it highly adaptable and effective across various natural language processing tasks and domains.
|
||||
</p>
|
||||
{/* related memories */}
|
||||
<div className="space-y-4">
|
||||
{/* section header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<h1>Related memories</h1>
|
||||
<button>
|
||||
<ChevronDownIcon className="size-4 stroke-2" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* response actions */}
|
||||
<div className="mt-3 relative -left-2 flex items-center gap-1">
|
||||
{/* speak response */}
|
||||
<button className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200">
|
||||
<SpeakerWaveIcon className="size-[18px] group-hover:text-primary" />
|
||||
</button>
|
||||
{/* copy response */}
|
||||
<button className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200">
|
||||
<ClipboardIcon className="size-[18px] group-hover:text-primary" />
|
||||
</button>
|
||||
{/* section content */}
|
||||
{/* collection of memories */}
|
||||
<div className="flex items-center no-scrollbar overflow-auto gap-4">
|
||||
{/* related memory */}
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="w-[350px] shrink-0 p-4 gap-2 rounded-2xl flex flex-col bg-secondary">
|
||||
|
||||
<h3 className="text-[13px]">Webpage</h3>
|
||||
<p className="line-clamp-2 text-white">What is RAG? - Retrieval-Augmented Generation Explained - AWS</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* summary */}
|
||||
<div className="space-y-4">
|
||||
{/* section header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<h1>Summary</h1>
|
||||
<button>
|
||||
<ChevronDownIcon className="size-4 stroke-2" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* section content */}
|
||||
<div>
|
||||
<p className="text-white text-base">
|
||||
Retrieval-Augmented Generation is crucial because it combines the strengths of retrieval-based methods, ensuring relevance and accuracy, with generation-based models, enabling creativity and flexibility. By integrating retrieval mechanisms, it addresses data sparsity issues, improves content relevance, offers fine-tuned control over output, handles ambiguity, and allows for continual learning, making it highly adaptable and effective across various natural language processing tasks and domains.
|
||||
</p>
|
||||
|
||||
{/* response actions */}
|
||||
<div className="mt-3 relative -left-2 flex items-center gap-1">
|
||||
{/* speak response */}
|
||||
<button className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200">
|
||||
<SpeakerWaveIcon className="size-[18px] group-hover:text-primary" />
|
||||
</button>
|
||||
{/* copy response */}
|
||||
<button className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200">
|
||||
<ClipboardIcon className="size-[18px] group-hover:text-primary" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="fixed bottom-4 max-w-3xl w-full">
|
||||
<QueryInput />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import DynamicIsland from "./dynamicisland";
|
|||
|
||||
function Header() {
|
||||
return (
|
||||
<div className="p-4 relative z-10 h-16 flex items-center">
|
||||
<div className="p-4 relative z-30 h-16 flex items-center">
|
||||
|
||||
<div className="w-full flex items-center justify-between">
|
||||
<Link className="" href="/home">
|
||||
|
|
|
|||
60
packages/ui/components/QueryInput.tsx
Normal file
60
packages/ui/components/QueryInput.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import React from 'react'
|
||||
import Divider from '../shadcn/divider'
|
||||
import { ArrowRightIcon } from '../icons'
|
||||
import Image from 'next/image'
|
||||
|
||||
function QueryInput() {
|
||||
return (
|
||||
<div>
|
||||
<div className="bg-secondary rounded-[20px] h-[68 px]">
|
||||
{/* input and action button */}
|
||||
<form className="flex gap-4 p-2.5">
|
||||
<textarea
|
||||
name="q"
|
||||
cols={30}
|
||||
rows={4}
|
||||
className="bg-transparent h-12 focus:h-[128px] no-scrollbar pt-3 px-2 text-base placeholder:text-[#5D6165] text-[#9DA0A4] focus:text-white duration-200 tracking-[3%] outline-none resize-none w-full"
|
||||
placeholder="Ask your second brain..."
|
||||
// onKeyDown={(e) => {
|
||||
// if (e.key === "Enter") {
|
||||
// e.preventDefault();
|
||||
// if (!e.shiftKey) push(parseQ());
|
||||
// }
|
||||
// }}
|
||||
// onChange={(e) => setQ(e.target.value)}
|
||||
// value={q}
|
||||
// disabled={disabled}
|
||||
/>
|
||||
|
||||
<button
|
||||
// type="submit"
|
||||
// onClick={e => e.preventDefault()}
|
||||
// disabled={disabled}
|
||||
className="h-12 w-12 rounded-[14px] bg-[#21303D] all-center shrink-0 hover:brightness-125 duration-200 outline-none focus:outline focus:outline-primary active:scale-90"
|
||||
>
|
||||
<Image src={ArrowRightIcon} alt="Right arrow icon" />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* <Divider /> */}
|
||||
</div>
|
||||
{/* selected sources */}
|
||||
{/* <div className="flex items-center gap-6 p-2 h-auto bg-secondary"> */}
|
||||
{/* <MultipleSelector
|
||||
key={options.length}
|
||||
disabled={disabled}
|
||||
defaultOptions={options}
|
||||
onChange={(e) => setSelectedSpaces(e.map((x) => parseInt(x.value)))}
|
||||
placeholder="Focus on specific spaces..."
|
||||
emptyIndicator={
|
||||
<p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
|
||||
no results found.
|
||||
</p>
|
||||
}
|
||||
/> */}
|
||||
{/* </div> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default QueryInput
|
||||
Loading…
Add table
Reference in a new issue