Sunflower UI
Search
Copy Code
Light Mode
survived about two hours before the heat got in — long enough to send back the only photographs taken from the surface.
Copy
Good response
Bad response
Regenerate
Why is it so bright from Earth?
Its clouds reflect about three quarters of the light that hits them, and it comes closer to Earth than any other planet. Only the Sun and the Moon outshine it.
Copy
Good response
Bad response
Regenerate
Is it true that a day on Venus is longer than its year?
Yes. Venus takes 243 Earth days to rotate once but only 225 to orbit the Sun, so its day outlasts its year. It also spins the opposite way to most planets, so the Sun rises in the west there.
Copy
Good response
Bad response
Regenerate
How hot does it get on the surface?
Not on the ground. The pressure is about ninety times ours and the clouds are sulfuric acid. The one place people still argue about is 50 km up, where the temperature and pressure are almost Earth-like.
Copy
Good response
Bad response
Regenerate
Could anything survive there?
Not on the ground. The pressure is about ninety times ours and the clouds are sulfuric acid. The one place people still argue about is 50 km up, where the temperature and pressure are almost Earth-like.
Copy
Good response
Bad response
Regenerate
Has anything landed on it?
Several probes have landed on Venus, most notably the Soviet Venera program. They sent back pictures of a rocky, desolate surface before failing from the extreme heat and pressure.
Copy
Good response
Bad response
Regenerate
When is the next chance to see it?
It alternates between an evening and a morning star over about nineteen months. Look low in the west just after sunset, or low in the east just before dawn, and it is the steady light that does not twinkle.
Copy
Good response
Bad response
Regenerate
message-scroller.tsx
styles.css
prompt.md
Collapse
Reset
Copy Code
Download
Run
1
"use client";
2
3
import React, { useRef, useState, useEffect } from 'react';
4
import { Copy, ThumbsUp, ThumbsDown, RefreshCw, ChevronDown } from 'lucide-react';
5
import { cn } from "@/lib/utils";
6
7
const INITIAL_MESSAGES = [
8
{
9
id: 1,
10
role: "assistant",
11
content: "survived about two hours before the heat got in — long enough to send back the only photographs taken from the surface."
12
},
13
{
14
id: 2,
15
role: "user",
16
content: "Why is it so bright from Earth?"
17
},
18
{
19
id: 3,
20
role: "assistant",
21
content: "Its clouds reflect about three quarters of the light that hits them, and it comes closer to Earth than any other planet. Only the Sun and the Moon outshine it."
22
},
23
{
24
id: 4,
25
role: "user",
26
content: "Is it true that a day on Venus is longer than its year?"
27
},
28
{
29
id: 5,
30
role: "assistant",
31
content: "Yes. Venus takes 243 Earth days to rotate once but only 225 to orbit the Sun, so its day outlasts its year.
32
33
It also spins the opposite way to most planets, so the Sun rises in the west there."
34
},
35
{
36
id: 6,
37
role: "user",
38
content: "How hot does it get on the surface?"
39
},
40
{
41
id: 7,
42
role: "assistant",
43
content: "Not on the ground. The pressure is about ninety times ours and the clouds are sulfuric acid. The one place people still argue about is 50 km up, where the temperature and pressure are almost Earth-like."
44
},
45
{
46
id: 8,
47
role: "user",
48
content: "Could anything survive there?"
49
},
50
{
51
id: 9,
52
role: "assistant",
53
content: "Not on the ground. The pressure is about ninety times ours and the clouds are sulfuric acid. The one place people still argue about is 50 km up, where the temperature and pressure are almost Earth-like."
54
},
55
{
56
id: 10,
57
role: "user",
58
content: "Has anything landed on it?"
59
},
60
{
61
id: 11,
62
role: "assistant",
63
content: "Several probes have landed on Venus, most notably the Soviet Venera program. They sent back pictures of a rocky, desolate surface before failing from the extreme heat and pressure."
64
},
65
{
66
id: 12,
67
role: "user",
68
content: "When is the next chance to see it?"
69
},
70
{
71
id: 13,
72
role: "assistant",
73
content: "It alternates between an evening and a morning star over about nineteen months. Look low in the west just after sunset, or low in the east just before dawn, and it is the steady light that does not twinkle."
74
}
75
];
76
77
const ActionButton = ({ icon: Icon, label }: { icon: any, label: string }) => (
78
<div className="relative group flex items-center justify-center">
79
<button className="text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300 transition-colors p-1.5 rounded-md hover:bg-black/5 dark:hover:bg-white/5">
80
<Icon className="w-3.5 h-3.5" />
81
</button>
82
<div className="absolute -top-8 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none bg-zinc-800 dark:bg-black/90 text-white dark:text-zinc-200 text-[11px] font-medium px-2 py-1 rounded-md whitespace-nowrap z-50 shadow-sm border border-white/10">
83
{label}
84
</div>
85
</div>
86
);
87
88
export function MessageScroller({ className }: { className?: string }) {
89
const scrollRef = useRef<HTMLDivElement>(null);
90
const [showScrollButton, setShowScrollButton] = useState(false);
91
92
const handleScroll = () => {
93
if (!scrollRef.current) return;
94
const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
95
// Show button if we are not at the very bottom (with a 20px threshold)
96
const isNotAtBottom = scrollHeight - scrollTop - clientHeight > 20;
97
setShowScrollButton(isNotAtBottom);
98
};
99
100
const scrollToBottom = () => {
101
if (scrollRef.current) {
102
scrollRef.current.scrollTo({
103
top: scrollRef.current.scrollHeight,
104
behavior: 'smooth'
105
});
106
}
107
};
108
109
useEffect(() => {
110
// Initial check
111
handleScroll();
112
}, []);
113
114
return (
115
<div className={cn("relative w-full max-w-[560px] h-[400px] bg-white dark:bg-[#151515] rounded-[16px] border border-black/5 dark:border-white/10 shadow-sm overflow-hidden font-sans", className)}>
116
117
{/* Scrollable Container */}
118
<div
119
ref={scrollRef}
120
onScroll={handleScroll}
121
className="w-full h-full overflow-y-auto custom-chat-scrollbar px-6 py-6 scroll-smooth"
122
>
123
<div className="flex flex-col gap-6">
124
{INITIAL_MESSAGES.map((msg) => (
125
<div
126
key={msg.id}
127
className={cn(
128
"flex flex-col",
129
msg.role === "user" ? "items-end" : "items-start"
130
)}
131
>
132
{msg.role === "user" ? (
133
<div className="bg-[#007AFF] text-white px-4 py-2.5 rounded-[20px] rounded-br-[4px] max-w-[80%] text-[15px] leading-relaxed shadow-sm">
134
{msg.content}
135
</div>
136
) : (
137
<div className="flex flex-col max-w-[90%] gap-3">
138
<div className="text-zinc-800 dark:text-zinc-200 text-[15px] leading-[1.6]">
139
{msg.content}
140
</div>
141
<div className="flex items-center gap-1">
142
<ActionButton icon={Copy} label="Copy" />
143
<ActionButton icon={ThumbsUp} label="Good response" />
144
<ActionButton icon={ThumbsDown} label="Bad response" />
145
<ActionButton icon={RefreshCw} label="Regenerate" />
146
</div>
147
</div>
148
)}
149
</div>
150
))}
151
</div>
152
</div>
153
154
{/* Floating Bottom Scroll Button & Gradient Mask */}
155
<div
156
className={cn(
157
"absolute bottom-0 left-0 right-0 h-24 pointer-events-none transition-opacity duration-300 flex items-end justify-center pb-4",
158
showScrollButton ? "opacity-100" : "opacity-0"
159
)}
160
style={{
161
background: 'linear-gradient(to bottom, transparent, var(--mask-color) 80%)'
162
}}
163
>
164
<button
165
onClick={scrollToBottom}
166
className="pointer-events-auto w-8 h-8 rounded-full bg-white dark:bg-[#333] border border-black/10 dark:border-white/10 flex items-center justify-center text-zinc-600 dark:text-zinc-300 shadow-md hover:scale-105 active:scale-95 transition-all"
167
>
168
<ChevronDown className="w-4 h-4" />
169
</button>
170
</div>
171
172
{/* Dynamic CSS variable for gradient mask based on theme */}
173
<style dangerouslySetInnerHTML={{__html: `
174
:root { --mask-color: #ffffff; }
175
.dark { --mask-color: #151515; }
176
`}} />
177
</div>
178
);
179
}
180