81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import type { UseChatHelpers } from "@ai-sdk/react";
|
|
import { motion } from "framer-motion";
|
|
import { memo } from "react";
|
|
import useSWR from "swr";
|
|
import { fetcher } from "@/lib/utils";
|
|
import type { ChatMessage } from "@/lib/types";
|
|
import { Suggestion } from "./elements/suggestion";
|
|
import type { VisibilityType } from "./visibility-selector";
|
|
|
|
type SuggestedActionsProps = {
|
|
chatId: string;
|
|
sendMessage: UseChatHelpers<ChatMessage>["sendMessage"];
|
|
selectedVisibilityType: VisibilityType;
|
|
};
|
|
|
|
function PureSuggestedActions({ sendMessage }: SuggestedActionsProps) {
|
|
const { data: suggestedActions } = useSWR<string[]>("/api/starter-questions", fetcher, {
|
|
fallbackData: [
|
|
// AI图片编辑
|
|
"帮我优化这张产品图片，突出产品特点和卖点",
|
|
"请美化这张商品图片，提升视觉吸引力",
|
|
// 市场分析
|
|
"分析一下当前电商市场的热门趋势和消费者偏好",
|
|
"帮我分析竞品的产品策略和定价",
|
|
// 文案优化
|
|
"优化这段产品描述文案，让它更有吸引力和转化力",
|
|
"帮我改写产品标题，提升点击率",
|
|
// 卖点优化
|
|
"提炼这个产品的核心卖点，突出差异化优势",
|
|
// 视频生成
|
|
"帮我生成一个产品宣传视频的创意脚本",
|
|
],
|
|
});
|
|
|
|
return (
|
|
<div
|
|
className="grid w-full gap-2 sm:grid-cols-2"
|
|
data-testid="suggested-actions"
|
|
>
|
|
{suggestedActions?.map((suggestedAction, index) => (
|
|
<motion.div
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: 20 }}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
key={suggestedAction}
|
|
transition={{ delay: 0.05 * index }}
|
|
>
|
|
<Suggestion
|
|
className="h-auto w-full whitespace-normal p-3 text-left"
|
|
onClick={(suggestion) => {
|
|
sendMessage({
|
|
role: "user",
|
|
parts: [{ type: "text", text: suggestion }],
|
|
});
|
|
}}
|
|
suggestion={suggestedAction}
|
|
>
|
|
{suggestedAction}
|
|
</Suggestion>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const SuggestedActions = memo(
|
|
PureSuggestedActions,
|
|
(prevProps, nextProps) => {
|
|
if (prevProps.chatId !== nextProps.chatId) {
|
|
return false;
|
|
}
|
|
if (prevProps.selectedVisibilityType !== nextProps.selectedVisibilityType) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
);
|