All files / src/components FirstConversationPrompt.tsx

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * FirstConversationPrompt - Welcome prompt for new Agents
 *
 * Displays a personalized welcome message and quick start suggestions
 * when entering a new Agent's chat for the first time.
 */
import { motion } from 'framer-motion';
import { Lightbulb, ArrowRight } from 'lucide-react';
import { cn } from '../lib/utils';
import {
  generateWelcomeMessage,
  getQuickStartSuggestions,
  getScenarioById,
  type QuickStartSuggestion,
} from '../lib/personality-presets';
import type { Clone } from '../store/agentStore';
 
interface FirstConversationPromptProps {
  clone: Clone;
  onSelectSuggestion?: (text: string) => void;
  onDismiss?: () => void;
}
 
export function FirstConversationPrompt({
  clone,
  onSelectSuggestion,
}: FirstConversationPromptProps) {
  // Generate welcome message
  const welcomeMessage = generateWelcomeMessage({
    userName: clone.userName,
    agentName: clone.nickname || clone.name,
    emoji: clone.emoji,
    personality: clone.personality,
    scenarios: clone.scenarios,
  });
 
  // Get quick start suggestions based on scenarios
  const suggestions = getQuickStartSuggestions(clone.scenarios || []);
 
  const handleSuggestionClick = (suggestion: QuickStartSuggestion) => {
    onSelectSuggestion?.(suggestion.text);
  };
 
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
      className="flex flex-col items-center justify-center py-12 px-4"
    >
      {/* Avatar with emoji */}
      <div className="mb-6">
        <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/10 dark:from-primary/30 dark:to-primary/20 flex items-center justify-center shadow-lg">
          <span className="text-4xl">{clone.emoji || '🦞'}</span>
        </div>
      </div>
 
      {/* Welcome message */}
      <div className="text-center max-w-md mb-8">
        <p className="text-lg text-gray-700 dark:text-gray-200 whitespace-pre-line leading-relaxed">
          {welcomeMessage}
        </p>
      </div>
 
      {/* Quick start suggestions */}
      <div className="w-full max-w-lg space-y-2">
        <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-3">
          <Lightbulb className="w-4 h-4" />
          <span>快速开始</span>
        </div>
 
        {suggestions.map((suggestion, index) => (
          <motion.button
            key={index}
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: index * 0.1 }}
            onClick={() => handleSuggestionClick(suggestion)}
            className={cn(
              'w-full flex items-center gap-3 px-4 py-3 rounded-xl',
              'bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700',
              'hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-primary/30',
              'transition-all duration-200 group text-left'
            )}
          >
            <span className="text-xl flex-shrink-0">{suggestion.icon}</span>
            <span className="flex-1 text-sm text-gray-700 dark:text-gray-200">
              {suggestion.text}
            </span>
            <ArrowRight className="w-4 h-4 text-gray-400 group-hover:text-primary transition-colors flex-shrink-0" />
          </motion.button>
        ))}
      </div>
 
      {/* Scenario tags */}
      {clone.scenarios && clone.scenarios.length > 0 && (
        <div className="mt-8 flex flex-wrap gap-2 justify-center">
          {clone.scenarios.map((scenarioId) => {
            const scenario = getScenarioById(scenarioId);
            if (!scenario) return null;
            return (
              <span
                key={scenarioId}
                className={cn(
                  'px-3 py-1 rounded-full text-xs font-medium',
                  'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary'
                )}
              >
                {scenario.label}
              </span>
            );
          })}
        </div>
      )}
 
      {/* Dismiss hint */}
      <p className="mt-8 text-xs text-gray-400 dark:text-gray-500">
        发送消息开始对话，或点击上方建议
      </p>
    </motion.div>
  );
}
 
export default FirstConversationPrompt;