Skip to content

Commit 72127c9

Browse files
CocDapCocDap
committed
fix(apps): beautify UI on ai chat
1 parent 0773c4f commit 72127c9

File tree

1 file changed

+61
-44
lines changed

1 file changed

+61
-44
lines changed

‎apps/playground/app/chat/page.tsx‎

Lines changed: 61 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -142,46 +142,47 @@ export default function ChatPage() {
142142
<Sidebar currentPage="chat" />
143143

144144
<div className="flex-1 flex flex-col min-h-0">
145-
<div className="border-b border-white/10 modern-card border-l-0 border-r-0 border-t-0 rounded-none">
146-
<div className="flex items-center justify-between p-6">
147-
<div className="flex items-center gap-4">
148-
<h2 className="text-2xl font-bold modern-text-primary">AI Chat Interface</h2>
149-
<Badge className="modern-badge font-medium px-3 py-1">Interactive</Badge>
145+
<div className="border-b border-white/10 modern-card border-l-0 border-r-0 border-t-0 rounded-none flex-shrink-0">
146+
<div className="flex items-center justify-between p-4 sm:p-6">
147+
<div className="flex items-center gap-2 sm:gap-4">
148+
<h2 className="text-xl sm:text-2xl font-bold modern-text-primary">AI Chat Interface</h2>
149+
<Badge className="modern-badge font-medium px-2 py-1 text-xs sm:px-3 sm:py-1 sm:text-sm">Interactive</Badge>
150150
</div>
151-
<div className="flex items-center gap-3">
151+
<div className="flex items-center gap-2 sm:gap-3">
152152
<Badge
153-
className={`px-3 py-1 ${isInitialized ? "modern-badge" : "bg-red-900/30 text-red-400 border-red-700"}`}
153+
className={`px-2 py-1 text-xs sm:px-3 sm:py-1 sm:text-sm ${isInitialized ? "modern-badge" : "bg-red-900/30 text-red-400 border-red-700"}`}
154154
>
155155
<div
156-
className={`w-2 h-2 rounded-full mr-2 ${isInitialized ? "bg-green-400 animate-pulse" : "bg-red-400"}`}
156+
className={`w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full mr-1 sm:mr-2 ${isInitialized ? "bg-green-400 animate-pulse" : "bg-red-400"}`}
157157
/>
158-
{isInitialized ? "Agent Ready" : "Configuration Required"}
158+
<span className="hidden sm:inline">{isInitialized ? "Agent Ready" : "Configuration Required"}</span>
159+
<span className="sm:hidden">{isInitialized ? "Ready" : "Required"}</span>
159160
</Badge>
160161
</div>
161162
</div>
162163
</div>
163164

164165
<div className="flex-1 flex flex-col min-h-0">
165-
<div className="flex-1 overflow-y-auto p-6">
166-
<div className="space-y-6 max-w-4xl mx-auto">
166+
<div className="flex-1 overflow-y-auto p-4 sm:p-6">
167+
<div className="space-y-4 sm:space-y-6 max-w-4xl mx-auto">
167168
{chatMessages.map((message) => (
168169
<div key={message.id} className={`flex ${message.type === "user" ? "justify-end" : "justify-start"}`}>
169170
<div
170-
className={`max-w-[85%] rounded-2xl p-5 ${
171+
className={`max-w-[90%] sm:max-w-[85%] rounded-xl sm:rounded-2xl p-3 sm:p-5 ${
171172
message.type === "user"
172-
? "bg-blue-600/20 border border-blue-500/30 ml-12"
173-
: "modern-card mr-12"
173+
? "bg-blue-600/20 border border-blue-500/30 ml-4 sm:ml-12"
174+
: "modern-card mr-4 sm:mr-12"
174175
}`}
175176
>
176-
<div className="flex items-start gap-4">
177+
<div className="flex items-start gap-2 sm:gap-4">
177178
{message.type === "ai" && (
178-
<div className="w-8 h-8 rounded-lg modern-logo flex items-center justify-center flex-shrink-0 mt-1">
179-
<Bot className="w-4 h-4" />
179+
<div className="w-6 h-6 sm:w-8 sm:h-8 rounded-lg modern-logo flex items-center justify-center flex-shrink-0 mt-0.5 sm:mt-1">
180+
<Bot className="w-3 h-3 sm:w-4 sm:h-4" />
180181
</div>
181182
)}
182-
<div className="flex-1">
183-
<div className="whitespace-pre-wrap text-sm leading-relaxed">{message.content}</div>
184-
<div className="text-xs opacity-60 mt-3 font-mono">
183+
<div className="flex-1 min-w-0">
184+
<div className="whitespace-pre-wrap text-xs sm:text-sm leading-relaxed break-words">{message.content}</div>
185+
<div className="text-xs opacity-60 mt-2 sm:mt-3 font-mono">
185186
{message.timestamp.toLocaleTimeString()}
186187
</div>
187188
</div>
@@ -215,36 +216,52 @@ export default function ChatPage() {
215216
</div>
216217
</div>
217218

218-
<div className="border-t border-white/10 modern-card border-l-0 border-r-0 border-b-0 rounded-none p-6">
219+
<div className="border-t border-white/10 modern-card border-l-0 border-r-0 border-b-0 rounded-none p-4 sm:p-6">
219220
<div className="max-w-4xl mx-auto">
220-
<div className="flex gap-4">
221-
<Textarea
222-
placeholder={
223-
isInitialized
224-
? "Ask me"
225-
: "Please configure the agent first..."
226-
}
227-
value={chatInput}
228-
onChange={(e) => setChatInput(e.target.value)}
229-
className="flex-1 min-h-[70px] resize-none modern-input text-base"
230-
disabled={!isInitialized}
231-
onKeyDown={(e) => {
232-
const ne = (e as any).nativeEvent
233-
if (ne?.isComposing || e.keyCode === 229) return
234-
if (e.key === "Enter" && !e.shiftKey) {
235-
e.preventDefault()
236-
handleSendMessage()
221+
<div className="flex gap-3 sm:gap-4">
222+
<div className="flex-1 relative">
223+
<Textarea
224+
placeholder={
225+
isInitialized
226+
? "Ask me anything about Polkadot..."
227+
: "Please configure the agent first..."
237228
}
238-
}}
239-
onCompositionStart={() => {/* optional: set state if you want */}}
240-
onCompositionEnd={() => {/* optional: clear state */}}
241-
/>
229+
value={chatInput}
230+
onChange={(e) => setChatInput(e.target.value)}
231+
className="flex-1 min-h-[60px] sm:min-h-[70px] resize-none modern-input text-sm sm:text-base pr-12 sm:pr-14"
232+
disabled={!isInitialized}
233+
onKeyDown={(e) => {
234+
const ne = (e as any).nativeEvent
235+
if (ne?.isComposing || e.keyCode === 229) return
236+
if (e.key === "Enter" && !e.shiftKey) {
237+
e.preventDefault()
238+
handleSendMessage()
239+
}
240+
}}
241+
onCompositionStart={() => {/* optional: set state if you want */}}
242+
onCompositionEnd={() => {/* optional: clear state */}}
243+
/>
244+
<div className="absolute right-2 sm:right-3 top-1/2 -translate-y-1/2 text-xs text-gray-400 hidden sm:block">
245+
{isInitialized ? "Enter to send, Shift+Enter for new line" : ""}
246+
</div>
247+
</div>
242248
<Button
243249
onClick={handleSendMessage}
244250
disabled={!chatInput.trim() || isLoading || !isInitialized}
245-
className="px-8 h-[70px] modern-button-primary text-base font-medium"
251+
className="px-4 sm:px-6 h-[60px] sm:h-[70px] modern-button-primary text-sm sm:text-base font-medium rounded-xl hover:scale-105 transition-transform duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
252+
size="lg"
246253
>
247-
<Send className="w-5 h-5" />
254+
{isLoading ? (
255+
<div className="flex items-center gap-2">
256+
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
257+
<span className="hidden sm:inline">Sending...</span>
258+
</div>
259+
) : (
260+
<div className="flex items-center gap-2">
261+
<Send className="w-4 h-4 sm:w-5 sm:h-5" />
262+
<span className="hidden sm:inline">Send</span>
263+
</div>
264+
)}
248265
</Button>
249266
</div>
250267
</div>

0 commit comments

Comments
 (0)