File size: 2,024 Bytes
867b17d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
'use client';
import { motion } from 'framer-motion';
import { memo } from 'react';
import type { UseChatHelpers } from '@ai-sdk/react';
import type { VisibilityType } from './visibility-selector';
import type { ChatMessage } from '@/lib/types';
import { Suggestion } from './elements/suggestion';
interface SuggestedActionsProps {
chatId: string;
sendMessage: UseChatHelpers<ChatMessage>['sendMessage'];
selectedVisibilityType: VisibilityType;
}
function PureSuggestedActions({
chatId,
sendMessage,
selectedVisibilityType,
}: SuggestedActionsProps) {
const suggestedActions = [
'What are the advantages of using Next.js?',
'Write code to demonstrate Dijkstra\'s algorithm',
'Help me write an essay about Silicon Valley',
'What is the weather in San Francisco?',
];
return (
<div data-testid="suggested-actions" className="grid sm:grid-cols-2 gap-2 w-full">
{suggestedActions.map((suggestedAction, index) => (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }}
transition={{ delay: 0.05 * index }}
key={suggestedAction}
>
<Suggestion
suggestion={suggestedAction}
onClick={(suggestion) => {
window.history.replaceState({}, '', `/chat/${chatId}`);
sendMessage({
role: 'user',
parts: [{ type: 'text', text: suggestion }],
});
}}
className="text-left w-full h-auto whitespace-normal p-3"
>
{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;
},
);
|