Skip to content

Commit fb0572f

Browse files
deepraj21deepraj21
authored
Merge pull request #54 from deepraj21/main
refactor chat and navbar
2 parents 8d204b6 + d5eac97 commit fb0572f

23 files changed

+1215
-1750
lines changed

‎client/dist/assets/index-9KsGJqp-.js‎

Lines changed: 272 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/dist/assets/index-BaUmUz5n.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/dist/assets/index-CLZc1W7c.js‎

Lines changed: 0 additions & 256 deletions
This file was deleted.

‎client/dist/assets/index-ndDbH7-g.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎client/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<link rel="icon" type="image" href="/logo.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>DevHub</title>
8-
<script type="module" crossorigin src="/assets/index-CLZc1W7c.js"></script>
9-
<link rel="stylesheet" crossorigin href="/assets/index-ndDbH7-g.css">
8+
<script type="module" crossorigin src="/assets/index-9KsGJqp-.js"></script>
9+
<link rel="stylesheet" crossorigin href="/assets/index-BaUmUz5n.css">
1010
</head>
1111
<body>
1212
<div id="root"></div>

‎client/src/App.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
1-
// App.tsx
2-
import React, { useEffect, useState } from 'react';
3-
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
1+
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
42
import { ThemeProvider } from "@/components/Theme/theme-provider";
5-
import axios from 'axios';
63
import Landing from './pages/Landing';
74
import Signup from './pages/Signup';
85
import Login from './pages/Login';
96
import Home from './pages/Home';
107
import Profile from './pages/Profile';
118
import { Toaster } from "@/components/ui/sonner";
129

13-
const App: React.FC = () => {
10+
const App = () => {
1411

1512
return (
1613
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">

‎client/src/components/Auth/user-auth-form-login.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ export function UserAuthForm() {
7575
disabled={isLoading}
7676
value={username}
7777
onChange={(e) => setUsername(e.target.value)}
78+
className='dark:bg-zinc-900'
7879
/>
7980
</div>
8081
<div className="grid gap-1">
@@ -89,6 +90,7 @@ export function UserAuthForm() {
8990
disabled={isLoading}
9091
value={password}
9192
onChange={(e) => setPassword(e.target.value)}
93+
className='dark:bg-zinc-900'
9294
/>
9395
</div>
9496
<Button disabled={isLoading}>

‎client/src/components/Auth/user-auth-form-signup.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
167167
disabled={isLoading}
168168
value={username}
169169
onChange={(e) => setUsername(e.target.value)}
170+
className='dark:bg-zinc-900'
170171
required
171172
/>
172173
{isUsernameAvailable === false && (
@@ -191,6 +192,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
191192
disabled={isLoading}
192193
value={email}
193194
onChange={(e) => setEmail(e.target.value)}
195+
className='dark:bg-zinc-900'
194196
required
195197
/>
196198
</div>
@@ -206,6 +208,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
206208
disabled={isLoading}
207209
value={password}
208210
onChange={handlePasswordChange}
211+
className='dark:bg-zinc-900'
209212
required
210213
/>
211214
{passwordRules &&

‎client/src/components/Chat/chat.tsx‎

Lines changed: 48 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,20 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
44
import { PlaceholdersAndVanishInput } from '@/components/ui/placeholders-and-vanish-input'
55
import Sidebar from "@/components/Sidebar/Sidebar"
66
import MobileSidebar from "@/components/MobileSidebar/MobileSidebar"
7+
import { Skeleton } from "@/components/ui/skeleton"
8+
import Typewriter from 'typewriter-effect'
9+
import ReactMarkdown from 'react-markdown';
710

811
const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
912

1013
interface Message {
1114
query: string
1215
response: string
1316
isLoading?: boolean
17+
isTypingFinished?: boolean // Track typing completion per message
1418
}
1519

16-
export default function Chat() {
20+
export const Chat: React.FC = () => {
1721
const [messages, setMessages] = useState<Array<Message>>([])
1822
const scrollAreaRef = useRef<HTMLDivElement>(null)
1923

@@ -54,7 +58,7 @@ export default function Chat() {
5458
const chatHistory =
5559
result.data.chat_history.length > 0
5660
? result.data.chat_history
57-
: [{ query: 'Hi', response: 'Welcome to DevHub!' }]
61+
: [{ query: '', response: 'Welcome to DevHub!' }]
5862
setMessages(chatHistory)
5963
} catch (error) {
6064
console.error('Error fetching chat history:', error)
@@ -76,7 +80,7 @@ export default function Chat() {
7680

7781
setMessages((prevMessages) => [
7882
...prevMessages,
79-
{ query, response: '', isLoading: true },
83+
{ query, response: '', isLoading: true, isTypingFinished: false }, // Initialize isTypingFinished for each message
8084
])
8185

8286
try {
@@ -109,44 +113,66 @@ export default function Chat() {
109113
<MobileSidebar />
110114
</header>
111115
<main className="flex flex-col flex-grow p-4 overflow-hidden">
112-
<div className="flex flex-col h-full md:w-[80%] lg:w-[70%] xl:w-[60%] mx-auto flex-grow overflow-y-auto p-4" ref={scrollAreaRef}>
113-
<div className="space-y-4 p-4">
116+
<div className="flex flex-col h-full w-full md:w-[80%] lg:w-[70%] xl:w-[60%] mx-auto flex-grow overflow-y-auto p-1" ref={scrollAreaRef}>
117+
<div className="space-y-4">
114118
{messages.map((message, index) => (
115-
<div key={index} className="mb-6 last:mb-0">
119+
<div key={index} className="last:mb-0">
116120
<div className="flex items-start justify-end">
117-
<div className="flex-grow text-right p-4">
121+
<div className="flex-grow text-right">
118122
<p className="text-sm">{message.query}</p>
119123
</div>
120-
121124
</div>
122-
<div className="flex items-start mb-4">
125+
<div className="flex items-start mb-4 mt-1">
123126
<Avatar className="mr-4">
124127
<AvatarImage src="/ai-avatar.png" alt="dh" />
125128
<AvatarFallback>dh</AvatarFallback>
126129
</Avatar>
127-
<div className="flex-grow mt-2">
130+
<div className="flex-grow mt-2" style={{ maxWidth: '70%' }}> {/* Set maxWidth to 70% */}
128131
{message.isLoading ? (
129-
<p className="text-muted-foreground">Thinking...</p>
132+
<>
133+
<Skeleton className="h-4 w-[250px]" />
134+
<Skeleton className="h-4 w-[290px] mt-1" />
135+
</>
130136
) : (
131-
<p className="text-sm">{message.response}</p>
137+
index === messages.length - 1 && !message.isTypingFinished ? (
138+
<Typewriter
139+
onInit={(typewriter) => {
140+
typewriter.typeString(message.response)
141+
.callFunction(() => {
142+
setMessages((prevMessages) => {
143+
const newMessages = [...prevMessages]
144+
const lastMessage = newMessages[newMessages.length - 1]
145+
lastMessage.isTypingFinished = true
146+
return newMessages
147+
})
148+
})
149+
.pauseFor(500)
150+
.start();
151+
}}
152+
options={{
153+
delay: 2,
154+
}}
155+
/>
156+
) : (
157+
<ReactMarkdown className="text-sm">{message.response}</ReactMarkdown>
158+
)
132159
)}
133160
</div>
134161
</div>
135-
136162
</div>
163+
137164
))}
138165
</div>
139-
140166
</div>
141167
</main>
142-
143-
<div className="p-4">
144-
<PlaceholdersAndVanishInput
145-
placeholders={placeholders}
146-
onSubmit={onSubmit}
147-
/>
148-
</div>
168+
169+
<div className="p-4">
170+
<PlaceholdersAndVanishInput
171+
placeholders={placeholders}
172+
onSubmit={onSubmit}
173+
/>
149174
</div>
150175
</div>
176+
</div>
151177
)
152-
}
178+
}

‎client/src/components/Footer/Footer.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Footer = () => {
99
<img
1010
src="https://i.ibb.co/kh28sVv/cropped-image.png"
1111
className="h-8 me-3"
12-
alt="FlowBite Logo"
12+
alt="Devhub Logo"
1313
/>
1414
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
1515
Devhub
@@ -41,7 +41,7 @@ const Footer = () => {
4141
<ul className="text-gray-500 dark:text-gray-400 font-medium">
4242
<li className="mb-4">
4343
<a
44-
href="/"
44+
href="https://github.com/devhub-ai/devhub/"
4545
className="hover:underline "
4646
>
4747
Github
@@ -104,7 +104,7 @@ const Footer = () => {
104104
</a>
105105

106106
<a
107-
href="#"
107+
href="https://github.com/devhub-ai/devhub/"
108108
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
109109
>
110110
<svg

0 commit comments

Comments
 (0)