86f0ffc7d1
* Chore disable git submodule for web-client and app-backend * Chore add newest source code of app-backend and web-client --------- Co-authored-by: Hien To <tominhhien97@gmail.com>
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { Instance } from "mobx-state-tree";
|
|
import { Product } from "@/_models/Product";
|
|
import JanWelcomeTitle from "../JanWelcomeTitle";
|
|
import { useQuery } from "@apollo/client";
|
|
import { GetProductPromptsDocument, GetProductPromptsQuery } from "@/graphql";
|
|
|
|
type Props = {
|
|
model: Instance<typeof Product>;
|
|
onPromptSelected: (prompt: string) => void;
|
|
};
|
|
|
|
const SampleLlmContainer: React.FC<Props> = ({ model, onPromptSelected }) => {
|
|
const { loading, error, data } = useQuery<GetProductPromptsQuery>(
|
|
GetProductPromptsDocument,
|
|
{
|
|
variables: { productSlug: model.id },
|
|
}
|
|
);
|
|
|
|
return (
|
|
<div className="flex flex-col max-w-sm flex-shrink-0 gap-9 items-center pt-6 mx-auto">
|
|
<JanWelcomeTitle
|
|
title={model.name}
|
|
description={model.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={() => onPromptSelected(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;
|