d55a83888b
* refactor: replacing mobx with jotai Signed-off-by: James <james@jan.ai> Co-authored-by: James <james@jan.ai> Co-authored-by: Louis <louis@jan.ai>
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import JanWelcomeTitle from "../JanWelcomeTitle";
|
|
import { useQuery } from "@apollo/client";
|
|
import { GetProductPromptsDocument, GetProductPromptsQuery } from "@/graphql";
|
|
import { Product } from "@/_models/Product";
|
|
import { useSetAtom } from "jotai";
|
|
import { currentPromptAtom } from "@/_helpers/JotaiWrapper";
|
|
|
|
type Props = {
|
|
product: Product;
|
|
};
|
|
|
|
const SampleLlmContainer: React.FC<Props> = ({ product }) => {
|
|
const setCurrentPrompt = useSetAtom(currentPromptAtom);
|
|
const { data } = useQuery<GetProductPromptsQuery>(GetProductPromptsDocument, {
|
|
variables: { productSlug: product.slug },
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-col max-w-sm flex-shrink-0 gap-9 items-center pt-6 mx-auto">
|
|
<JanWelcomeTitle
|
|
title={product.name}
|
|
description={product.description ?? ""}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<h2 className="font-semibold text-xl leading-6 tracking-[-0.4px] mb-5">
|
|
Try now
|
|
</h2>
|
|
<div className="flex flex-col">
|
|
{data?.prompts.map((item) => (
|
|
<button
|
|
onClick={() => setCurrentPrompt(item.content ?? "")}
|
|
key={item.slug}
|
|
className="rounded p-2 hover:bg-[#0000000F] text-xs leading-[18px] text-gray-500 text-left"
|
|
>
|
|
<span className="line-clamp-3">{item.content}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SampleLlmContainer;
|