Skip to content

Commit 176b917

Browse files
parbhatkapila4parbhatkapila4
committed
Enhance chat UI for better
1 parent b42c773 commit 176b917

File tree

5 files changed

+181
-136
lines changed

5 files changed

+181
-136
lines changed

‎src/app/(protected)/chat/page.tsx‎

Lines changed: 62 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export default function ChatPage() {
139139
};
140140

141141
const suggestedQuestions = [
142-
"How does authentication work in this project?",
142+
"how does auth works in this project?",
143143
"Explain the database schema",
144144
"What API endpoints are available?",
145145
"How is error handling implemented?",
@@ -162,17 +162,17 @@ export default function ChatPage() {
162162
}
163163

164164
return (
165-
<div className="flex flex-col h-[calc(100vh-4rem)] p-2 sm:p-4 md:p-6">
165+
<div className="flex flex-col h-[calc(100vh-4rem)] sm:h-[calc(100vh-4rem)] p-2 sm:p-4 md:p-6">
166166
{/* Header */}
167-
<div className="mb-4">
168-
<div className="flex items-center justify-between gap-3 mb-2">
169-
<div className="flex items-center gap-3">
170-
<div className="p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-500/30">
171-
<MessageSquare className="h-5 w-5 text-blue-400" />
167+
<div className="mb-3 sm:mb-4 flex-shrink-0">
168+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-3 mb-2">
169+
<div className="flex items-center gap-2 sm:gap-3">
170+
<div className="p-1.5 sm:p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-500/30 flex-shrink-0">
171+
<MessageSquare className="h-4 w-4 sm:h-5 sm:w-5 text-blue-400" />
172172
</div>
173-
<div>
174-
<h1 className="text-2xl font-bold text-white">Chat with Codebase</h1>
175-
<p className="text-gray-400 text-sm">
173+
<div className="min-w-0 flex-1">
174+
<h1 className="text-lg sm:text-2xl font-bold text-white">Chat with Codebase</h1>
175+
<p className="text-gray-400 text-xs sm:text-sm">
176176
Ask questions about <span className="text-white font-medium">{currentProject.name}</span>
177177
</p>
178178
</div>
@@ -188,45 +188,46 @@ export default function ChatPage() {
188188
setInput('');
189189
toast.success('Chat cleared! Start a new conversation.');
190190
}}
191-
className="border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white"
191+
className="border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white w-full sm:w-auto text-xs sm:text-sm"
192192
>
193-
<Plus className="h-4 w-4 mr-2" />
194-
New Chat
193+
<Plus className="h-3 w-3 sm:h-4 sm:w-4 mr-1.5 sm:mr-2" />
194+
<span className="sm:inline">New Chat</span>
195195
</Button>
196196
)}
197197
</div>
198198
</div>
199199

200200
{/* Chat Container */}
201-
<Card className="flex-1 flex flex-col overflow-hidden">
202-
<CardContent className="flex-1 flex flex-col p-0 overflow-hidden">
201+
<Card className="flex-1 flex flex-col overflow-hidden min-h-0">
202+
<CardContent className="flex-1 flex flex-col p-0 overflow-hidden min-h-0">
203203
{/* Messages */}
204-
<ScrollArea className="flex-1 p-4 h-full" ref={scrollRef}>
204+
<ScrollArea className="flex-1 min-h-0" ref={scrollRef}>
205+
<div className="p-2 sm:p-4">
205206
{messages.length === 0 && (
206-
<div className="flex flex-col items-center justify-center h-full text-center p-8">
207-
<div className="p-4 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-500/30 mb-4">
208-
<Sparkles className="h-12 w-12 text-blue-400" />
207+
<div className="flex flex-col items-center justify-center min-h-[400px] sm:min-h-[500px] text-center p-4 sm:p-8">
208+
<div className="p-3 sm:p-4 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-500/30 mb-3 sm:mb-4">
209+
<Sparkles className="h-8 w-8 sm:h-12 sm:w-12 text-blue-400" />
209210
</div>
210-
<h3 className="text-xl font-semibold text-white mb-2">
211+
<h3 className="text-lg sm:text-xl font-semibold text-white mb-2">
211212
Start a Conversation
212213
</h3>
213-
<p className="text-gray-400 mb-6 max-w-md">
214-
Ask me anything about your codebase. I'll search through the code and provide detailed answers with references.
214+
<p className="text-gray-400 mb-4 sm:mb-6 max-w-md text-sm sm:text-base px-2">
215+
Ask me anything about your codebase. I&apos;ll search through the code and provide detailed answers with references.
215216
</p>
216217

217218
{/* Suggested Questions */}
218-
<div className="w-full max-w-2xl">
219-
<p className="text-sm text-gray-500 mb-3">Try asking:</p>
219+
<div className="w-full max-w-2xl px-2">
220+
<p className="text-xs sm:text-sm text-gray-500 mb-2 sm:mb-3">Try asking:</p>
220221
<div className="grid grid-cols-1 gap-2">
221222
{suggestedQuestions.map((q, idx) => (
222223
<Button
223224
key={idx}
224225
variant="outline"
225-
className="text-left justify-start text-sm text-gray-300 hover:text-white hover:bg-gray-800"
226+
className="text-left justify-start text-xs sm:text-sm text-gray-300 hover:text-white hover:bg-gray-800 h-auto py-2 sm:py-2.5 px-3 sm:px-4"
226227
onClick={() => setInput(q)}
227228
>
228-
<MessageSquare className="h-4 w-4 mr-2 flex-shrink-0" />
229-
{q}
229+
<MessageSquare className="h-3 w-3 sm:h-4 sm:w-4 mr-1.5 sm:mr-2 flex-shrink-0" />
230+
<span className="break-words">{q}</span>
230231
</Button>
231232
))}
232233
</div>
@@ -237,27 +238,32 @@ export default function ChatPage() {
237238
{messages.map((message) => (
238239
<div
239240
key={message.id}
240-
className={`mb-6 ${
241+
className={`mb-4 sm:mb-6 ${
241242
message.role === 'user' ? 'text-right' : 'text-left'
242243
}`}
243244
>
244245
<div
245-
className={`inline-block max-w-[85%] ${
246+
className={`inline-block max-w-[90%] sm:max-w-[85%] ${
246247
message.role === 'user'
247-
? 'bg-blue-600 text-white rounded-2xl rounded-tr-sm p-4'
248-
: 'bg-gray-800 text-white rounded-2xl rounded-tl-sm p-4 max-h-[600px] overflow-y-auto'
248+
? 'bg-blue-600 text-white rounded-2xl rounded-tr-sm p-3 sm:p-4'
249+
: 'bg-gray-800 text-white rounded-2xl rounded-tl-sm p-3 sm:p-4 max-h-[600px] overflow-y-auto'
249250
}`}
250251
>
251-
<div className="prose prose-invert max-w-none prose-sm [&>*:last-child]:mb-0">
252+
<div className="prose prose-invert max-w-none prose-xs sm:prose-sm [&>*:last-child]:mb-0 [&_pre]:text-xs sm:[&_pre]:text-sm [&_pre]:overflow-x-auto [&_code]:text-xs sm:[&_code]:text-sm">
252253
<ReactMarkdown
253254
components={{
254-
code({ node, inline, className, children, ...props }: any) {
255+
code({ inline, className, children, ...props }: { inline?: boolean; className?: string; children?: React.ReactNode }) {
255256
const match = /language-(\w+)/.exec(className || '');
256257
return !inline && match ? (
257258
<SyntaxHighlighter
258259
style={vscDarkPlus}
259260
language={match[1]}
260261
PreTag="div"
262+
customStyle={{
263+
fontSize: '0.75rem',
264+
padding: '0.75rem',
265+
margin: '0.5rem 0',
266+
}}
261267
{...props}
262268
>
263269
{String(children).replace(/\n$/, '')}
@@ -276,26 +282,26 @@ export default function ChatPage() {
276282

277283
{/* Sources */}
278284
{message.sources && message.sources.length > 0 && (
279-
<div className="mt-4 pt-3 border-t border-gray-700">
280-
<div className="flex items-center gap-2 mb-2">
281-
<FileCode className="h-4 w-4 text-gray-400" />
285+
<div className="mt-3 sm:mt-4 pt-2 sm:pt-3 border-t border-gray-700">
286+
<div className="flex items-center gap-1.5 sm:gap-2 mb-1.5 sm:mb-2">
287+
<FileCode className="h-3 w-3 sm:h-4 sm:w-4 text-gray-400 flex-shrink-0" />
282288
<span className="text-xs font-medium text-gray-400">
283289
Sources ({message.sources.length})
284290
</span>
285291
</div>
286-
<div className="space-y-2">
292+
<div className="space-y-1.5 sm:space-y-2">
287293
{message.sources.map((source, idx) => (
288294
<div
289295
key={idx}
290296
className="text-xs bg-gray-900/50 rounded p-2 border border-gray-700"
291297
>
292-
<div className="flex items-center justify-between mb-1">
293-
<code className="text-blue-400">{source.fileName}</code>
294-
<Badge variant="outline" className="text-xs">
298+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-0 mb-1">
299+
<code className="text-blue-400 break-all text-xs">{source.fileName}</code>
300+
<Badge variant="outline" className="text-xs w-fit sm:w-auto">
295301
{(source.similarity * 100).toFixed(0)}% match
296302
</Badge>
297303
</div>
298-
<p className="text-gray-400 line-clamp-2">{source.summary}</p>
304+
<p className="text-gray-400 line-clamp-2 text-xs">{source.summary}</p>
299305
</div>
300306
))}
301307
</div>
@@ -306,44 +312,48 @@ export default function ChatPage() {
306312
))}
307313

308314
{isLoading && (
309-
<div className="mb-6 text-left">
310-
<div className="inline-block max-w-[85%] bg-gray-800 text-white rounded-2xl rounded-tl-sm p-4">
311-
<div className="flex items-center gap-3">
312-
<Loader2 className="h-5 w-5 animate-spin text-blue-400" />
313-
<span className="text-sm">Searching codebase and generating response...</span>
315+
<div className="mb-4 sm:mb-6 text-left">
316+
<div className="inline-block max-w-[90%] sm:max-w-[85%] bg-gray-800 text-white rounded-2xl rounded-tl-sm p-3 sm:p-4">
317+
<div className="flex items-center gap-2 sm:gap-3">
318+
<Loader2 className="h-4 w-4 sm:h-5 sm:w-5 animate-spin text-blue-400 flex-shrink-0" />
319+
<span className="text-xs sm:text-sm">Searching codebase and generating response...</span>
314320
</div>
315321
</div>
316322
</div>
317323
)}
318324

319325
{/* Scroll anchor */}
320326
<div ref={messagesEndRef} />
327+
</div>
321328
</ScrollArea>
322329

323330
{/* Input */}
324-
<div className="border-t border-gray-800 p-4">
325-
<form onSubmit={handleSubmit} className="flex gap-2">
331+
<div className="border-t border-gray-800 p-2 sm:p-4 flex-shrink-0">
332+
<form onSubmit={handleSubmit} className="flex gap-1.5 sm:gap-2">
326333
<Input
327334
ref={inputRef}
328335
value={input}
329336
onChange={(e) => setInput(e.target.value)}
330337
placeholder="Ask a question about your codebase..."
331338
disabled={isLoading}
332-
className="flex-1 bg-gray-900 border-gray-700 text-white placeholder:text-gray-500"
339+
className="flex-1 bg-gray-900 border-gray-700 text-white placeholder:text-gray-500 text-sm sm:text-base h-9 sm:h-10"
333340
/>
334341
<Button
335342
type="submit"
336343
disabled={isLoading || !input.trim()}
337-
className="bg-blue-600 hover:bg-blue-700"
344+
className="bg-blue-600 hover:bg-blue-700 h-9 sm:h-10 w-9 sm:w-auto px-2 sm:px-4 flex-shrink-0"
338345
>
339346
{isLoading ? (
340347
<Loader2 className="h-4 w-4 animate-spin" />
341348
) : (
342-
<Send className="h-4 w-4" />
349+
<>
350+
<Send className="h-4 w-4 sm:mr-0" />
351+
<span className="hidden sm:inline ml-2">Send</span>
352+
</>
343353
)}
344354
</Button>
345355
</form>
346-
<p className="text-xs text-gray-500 mt-2">
356+
<p className="text-xs text-gray-500 mt-1.5 sm:mt-2 px-0.5">
347357
💡 Tip: Ask specific questions about how features work, architecture, or code patterns
348358
</p>
349359
</div>

0 commit comments

Comments
 (0)