Skip to content

Commit 2206f9d

Browse files
raousama391raousama391
authored
Merge pull request #113 from RipeSeed/RIPES-8
[RIPES-8] Updated UI branding of landing page
2 parents a68fb1c + baefabc commit 2206f9d

File tree

21 files changed

+85
-59
lines changed

21 files changed

+85
-59
lines changed

‎public/clock.png

-86 Bytes
Loading

‎public/config.png

12 Bytes
Loading

‎public/query.png

-86 Bytes
Loading

‎public/ripeseed.png

-51.5 KB
Loading

‎src/app/(admin)/dashboard/knowledgebase/_components/KnowledegeBaseTabs/_components/KnowledegBasePrompts.tsx

+24-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import React, { useEffect } from 'react'
3+
import React, { useEffect, useState } from 'react'
44
import { zodResolver } from '@hookform/resolvers/zod'
55
import { useMutation, useQuery } from '@tanstack/react-query'
66
import { useForm } from 'react-hook-form'
@@ -23,6 +23,7 @@ export default function KnowledgeBasePrompts() {
2323
useKnowledgeStore()
2424

2525
const { user } = useTokenStore()
26+
const [buttonDisabled, setButtonDisabled] = useState(true)
2627

2728
interface Data {
2829
user: string | null
@@ -58,6 +59,7 @@ export default function KnowledgeBasePrompts() {
5859
title: 'Prompt Settings',
5960
description: 'Prompt Settings has Successfully Updated',
6061
})
62+
setButtonDisabled(true)
6163
},
6264
})
6365
// ..........................
@@ -67,6 +69,21 @@ export default function KnowledgeBasePrompts() {
6769
reset()
6870
}
6971

72+
const handlePromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
73+
setPrompt(e.target.value)
74+
setButtonDisabled(false)
75+
}
76+
77+
const handleTemperatureChange = (value: number[]) => {
78+
setModelConfiguration({ ...modelConfiguration, temperature: value[0] })
79+
setButtonDisabled(false)
80+
}
81+
82+
const handleTopChange = (value: number[]) => {
83+
setModelConfiguration({ ...modelConfiguration, topP: value[0] })
84+
setButtonDisabled(false)
85+
}
86+
7087
// getPrompt
7188
const { data: PromptData, isLoading: FileLoading } = useQuery({
7289
queryKey: ['getPrompt'],
@@ -75,6 +92,7 @@ export default function KnowledgeBasePrompts() {
7592
useEffect(() => {
7693
if (PromptData && PromptData?.prompt[0]?.prompt) {
7794
setPrompt(PromptData.prompt[0].prompt)
95+
setButtonDisabled(true)
7896
}
7997
}, [PromptData])
8098
// .......................
@@ -98,7 +116,7 @@ export default function KnowledgeBasePrompts() {
98116
required
99117
rows={10}
100118
value={prompt}
101-
onChange={(e) => setPrompt(e.target.value)}
119+
onChange={handlePromptChange}
102120
className='focus:border-gray-400 focus:ring-0'
103121
/>
104122
{errors.prompt && <>{errors.prompt.message}</>}
@@ -107,7 +125,7 @@ export default function KnowledgeBasePrompts() {
107125
<Button
108126
className='bg-black text-dashboardSecondary hover:bg-gray-800'
109127
onClick={handleSubmit(handleClick)}
110-
disabled={promptPending}
128+
disabled={buttonDisabled}
111129
>
112130
Save changes
113131
</Button>
@@ -149,12 +167,7 @@ export default function KnowledgeBasePrompts() {
149167
min={0}
150168
max={2}
151169
step={0.1}
152-
onValueChange={(value) =>
153-
setModelConfiguration({
154-
...modelConfiguration,
155-
temperature: value[0],
156-
})
157-
}
170+
onValueChange={handleTemperatureChange}
158171
/>
159172
</div>
160173

@@ -172,16 +185,14 @@ export default function KnowledgeBasePrompts() {
172185
min={0}
173186
max={1}
174187
step={0.01}
175-
onValueChange={(value) =>
176-
setModelConfiguration({ ...modelConfiguration, topP: value[0] })
177-
}
188+
onValueChange={handleTopChange}
178189
/>
179190
</div>
180191
</div>
181192

182193
<Button
183194
onClick={handleSubmit(handleClick)}
184-
disabled={promptPending}
195+
disabled={buttonDisabled}
185196
className='mt-2 bg-[#EAEAEA] text-dashboardHeading hover:bg-neutral-200'
186197
>
187198
Save as preset

‎src/app/(admin)/dashboard/knowledgebase/page.tsx

+18-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import React, { useEffect } from 'react'
3+
import React, { useEffect, useState } from 'react'
44
import Image from 'next/image'
55
import { zodResolver } from '@hookform/resolvers/zod'
66
import { useMutation } from '@tanstack/react-query'
@@ -55,6 +55,7 @@ type TUpdateSchema = z.infer<typeof UpdateSchema>
5555
export default function KnowledgeBase() {
5656
const { toast } = useToast()
5757

58+
const [buttonDisabled, setButtonDisabled] = useState(true)
5859
// Add credentials
5960
const {
6061
mutate,
@@ -69,6 +70,7 @@ export default function KnowledgeBase() {
6970
title: 'Credentials Updated',
7071
description: 'Your credentials have been successfully updated.',
7172
})
73+
setButtonDisabled(true)
7274
},
7375
})
7476
// ...............................
@@ -104,11 +106,6 @@ export default function KnowledgeBase() {
104106
}, [])
105107

106108
const handleClick = (data: TUpdateSchema) => {
107-
const filteredData = Object.fromEntries(
108-
Object.entries(data).filter(
109-
([_, value]) => value !== '' && value !== undefined,
110-
),
111-
)
112109
mutate({ user, ...data })
113110
}
114111

@@ -142,6 +139,9 @@ export default function KnowledgeBase() {
142139
</Label>
143140
<input
144141
{...register('openAIKey')}
142+
onChange={(e) => {
143+
setButtonDisabled(false)
144+
}}
145145
type='text'
146146
className='h-10 rounded-lg border p-3 text-sm outline-none'
147147
placeholder='Paste key here...'
@@ -155,7 +155,7 @@ export default function KnowledgeBase() {
155155
<Button
156156
className='h-10 w-full bg-black text-white hover:bg-gray-800 md:mt-5 md:w-20'
157157
type='submit'
158-
disabled={botPending}
158+
disabled={buttonDisabled || botPending}
159159
>
160160
Update
161161
</Button>
@@ -178,6 +178,9 @@ export default function KnowledgeBase() {
178178
</Label>
179179
<input
180180
{...register('deepseekAccessKey')}
181+
onChange={(e) => {
182+
setButtonDisabled(false)
183+
}}
181184
type='text'
182185
className='h-10 rounded-lg border p-3 text-sm outline-none'
183186
placeholder='Enter key'
@@ -202,6 +205,9 @@ export default function KnowledgeBase() {
202205
</Label>
203206
<input
204207
{...register('deepseekBaseUrl')}
208+
onChange={(e) => {
209+
setButtonDisabled(false)
210+
}}
205211
type='text'
206212
className='h-10 rounded-lg border p-3 text-sm outline-none'
207213
placeholder='Enter URL'
@@ -215,7 +221,7 @@ export default function KnowledgeBase() {
215221
<Button
216222
className='h-10 w-full bg-black text-white hover:bg-gray-800 md:mt-5 md:w-20'
217223
type='submit'
218-
disabled={botPending}
224+
disabled={buttonDisabled || botPending}
219225
>
220226
Update
221227
</Button>
@@ -239,6 +245,9 @@ export default function KnowledgeBase() {
239245
</Label>
240246
<input
241247
{...register('xAccessKey')}
248+
onChange={(e) => {
249+
setButtonDisabled(false)
250+
}}
242251
type='text'
243252
className='h-10 rounded-lg border p-3 text-sm outline-none'
244253
placeholder='Enter key'
@@ -276,7 +285,7 @@ export default function KnowledgeBase() {
276285
<Button
277286
className='h-10 w-full bg-black text-white hover:bg-gray-800 md:mt-5 md:w-20'
278287
type='submit'
279-
disabled={botPending}
288+
disabled={buttonDisabled || botPending}
280289
>
281290
Update
282291
</Button>

‎src/app/(chat)/_components/GeneralSidebar.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,12 @@ export default function GeneralSideBar() {
8080
<div className='h-[calc(100svh-96px)]'>
8181
<div className='pb-8 pt-7'>
8282
<div
83-
className='group cursor-pointer rounded-lg bg-[#E0E0E0] p-[16px] pl-[24px] transition duration-300 hover:bg-crayola dark:bg-[#404043] dark:hover:bg-crayola'
83+
className='group cursor-pointer rounded-lg bg-[#E0E0E0] p-[16px] pl-[24px] transition duration-300 hover:bg-mintGreen dark:bg-[#404043] dark:hover:bg-mintGreen'
8484
onClick={handleCreateNewChat}
8585
>
8686
<div className='flex items-center gap-2'>
87-
<MessageSquare className='h-4 w-4 text-crayola group-hover:text-white' />
88-
<span className='text-center font-medium text-black group-hover:text-white dark:text-white'>
87+
<MessageSquare className='h-4 w-4 text-iconColor group-hover:text-black' />
88+
<span className='text-center font-medium text-black group-hover:text-black dark:text-white'>
8989
New Chat
9090
</span>
9191
</div>

‎src/app/(chat)/ask-anything/[chatId]/_components/ChatHeader.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export function ChatHeader() {
8181

8282
return (
8383
<div className='grid h-[85px] w-full grid-cols-3 grid-rows-1 gap-x-2.5 gap-y-0'>
84-
<div className='col-start-1 col-end-4 row-start-1 row-end-2 bg-[#EDEDED] dark:bg-[#404043]' />
84+
<div className='col-start-1 col-end-4 row-start-1 row-end-2 bg-[#FAF9F6] dark:bg-[#404043]' />
8585
<div className='col-start-1 col-end-3 row-start-1 row-end-2 flex items-center justify-start px-3 md:px-10'>
8686
<div
8787
className='flex cursor-pointer items-center justify-center'

‎src/app/(chat)/ask-anything/[chatId]/_components/ChatMessageInput.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -154,20 +154,20 @@ export function ChatMessageInput({ isPending }: ChatMessageInputProps) {
154154
textareaHeight && textareaHeight > 50 ? '15px' : '100px',
155155
transition: 'border-radius 0.2s ease-in-out',
156156
}}
157-
className='flex max-h-[100px] w-full resize-none overflow-y-auto rounded-[100px] bg-[f2f2f2] p-3 placeholder:text-[16px] focus:outline-none dark:bg-[#313136]'
157+
className='flex max-h-[100px] w-full resize-none overflow-y-auto rounded-[100px] bg-[#FAF9F6] p-3 placeholder:text-[16px] focus:outline-none dark:bg-[#313136]'
158158
></textarea>
159159
</div>
160160
</motion.div>
161161
</AnimatePresence>
162162
<Button
163163
disabled={isPending}
164-
className='h-10 rounded-3xl bg-crayola hover:border hover:border-primary dark:hover:text-white md:h-12'
164+
className='h-10 rounded-3xl bg-mintGreen hover:border hover:border-primary dark:hover:text-black md:h-12'
165165
onClick={handleSendMessage}
166166
>
167167
{isPending ? (
168168
<LoaderCircle className='animate-spin text-primary' />
169169
) : (
170-
<Image alt='query arrow' src={queryIcon} width={30} height={23} />
170+
<Image alt='query arrow' src={queryIcon} width={23} height={20} />
171171
)}
172172
</Button>
173173
</div>

‎src/app/(chat)/ask-anything/[chatId]/_components/ChatMessages.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,8 @@ export function ChatMessages() {
167167
'Need OpenAI key. You can enter your key from gear icon - top-right',
168168
{
169169
style: {
170-
background: '#13A682',
171-
color: '#fff',
170+
background: '#6BFF97',
171+
color: '#1b1b21',
172172
},
173173
closeButton: false,
174174
},

‎src/app/(chat)/ask-anything/[chatId]/_components/UploadDocumentWrapper.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@ const UploadDocumentWrapper = ({
3838
>
3939
<Button
4040
variant={'outline'}
41-
className='group max-w-48 cursor-pointer rounded-3xl border border-[#575757] bg-transparent px-5 text-xs text-[#575757] transition duration-300 hover:border-crayola hover:bg-transparent dark:border-white dark:text-white dark:hover:border-crayola'
41+
className='group max-w-48 cursor-pointer rounded-3xl border border-[#575757] bg-transparent px-5 text-xs text-[#575757] transition duration-300 hover:border-green-500 hover:bg-transparent dark:border-white dark:text-white dark:hover:border-green-500'
4242
onClick={() => setIsUploadDocOpen(true)}
4343
>
4444
<div className='flex items-center gap-2'>
45-
<Paperclip className='h-4 w-4 transition duration-300 group-hover:text-crayola dark:text-[#EBEBEB]' />
46-
<span className='font-semibold transition duration-300 group-hover:text-crayola'>
45+
<Paperclip className='h-4 w-4 transition duration-300 group-hover:text-green-500 dark:text-[#EBEBEB]' />
46+
<span className='font-semibold transition duration-300 group-hover:text-green-500'>
4747
Attach Knowledge
4848
</span>
4949
</div>

‎src/app/(chat)/ask-anything/[chatId]/_components/WelcomeCards.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const WelcomeCards = ({ cards, hideSetupKey = false }: Props) => {
8888
) : null}
8989
<div className='flex w-full flex-col items-center justify-center gap-2'>
9090
<Card
91-
className='flex h-24 w-full cursor-pointer items-center justify-center border border-[#CECECE] bg-[#EFEFEF] p-2 text-lightText shadow-sm dark:border-[#3C3C3F] dark:bg-[#404043] dark:text-darkText'
91+
className='flex h-24 w-full cursor-pointer items-center justify-center border border-[#DBDBDB] bg-[#FAF9F6] p-2 text-lightText shadow-sm dark:border-[#3C3C3F] dark:bg-[#404043] dark:text-darkText'
9292
onClick={() => messageHandler(cards.top)}
9393
>
9494
<div className='text-center'>
@@ -105,7 +105,7 @@ export const WelcomeCards = ({ cards, hideSetupKey = false }: Props) => {
105105

106106
<div className='flex w-full flex-row gap-2'>
107107
<Card
108-
className='flex h-24 w-full cursor-pointer items-center justify-center border border-[#CECECE] bg-[#EFEFEF] p-2 text-lightText shadow-sm dark:border-[#3C3C3F] dark:bg-[#404043] dark:text-darkText'
108+
className='flex h-24 w-full cursor-pointer items-center justify-center border border-[#DBDBDB] bg-[#FAF9F6] p-2 text-lightText shadow-sm dark:border-[#3C3C3F] dark:bg-[#404043] dark:text-darkText'
109109
onClick={() => messageHandler(cards.bottomLeft)}
110110
>
111111
<div className='text-center'>
@@ -121,7 +121,7 @@ export const WelcomeCards = ({ cards, hideSetupKey = false }: Props) => {
121121
</Card>
122122

123123
<Card
124-
className='flex h-24 w-full cursor-pointer items-center justify-center border border-[#CECECE] bg-[#EFEFEF] p-2 text-lightText shadow-sm dark:border-[#3C3C3F] dark:bg-[#404043] dark:text-darkText'
124+
className='flex h-24 w-full cursor-pointer items-center justify-center border border-[#DBDBDB] bg-[#FAF9F6] p-2 text-lightText shadow-sm dark:border-[#3C3C3F] dark:bg-[#404043] dark:text-darkText'
125125
onClick={() => messageHandler(cards.bottomRight)}
126126
>
127127
<div className='text-center'>
@@ -152,7 +152,7 @@ const Note = ({
152152
return (
153153
<Alert
154154
variant='info'
155-
className={`${className} border-[#1B9E84] bg-[#D4E1DE] text-white dark:bg-[#334040]`}
155+
className={`${className} border-[#15331E] bg-[#C4FFD533] text-white dark:bg-[#334040]`}
156156
onClick={handleOpenConfig}
157157
>
158158
<AlertDescription className='flex flex-row items-center gap-2'>
@@ -163,7 +163,7 @@ const Note = ({
163163
height={16}
164164
width={18}
165165
/>
166-
<span className='text-[#1B9E84]'>
166+
<span className='text-[#15331E] dark:text-white'>
167167
Configure your OpenAI Key from gear icon at top-right to continue.
168168
</span>
169169
</AlertDescription>

‎src/app/(chat)/ask-anything/[chatId]/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Page = () => {
1010

1111
return (
1212
<div
13-
className='flex h-[calc(100svh-57px)] flex-col items-center justify-center gap-4 bg-[#E8E8E8] dark:bg-[#363639] md:h-[calc(100svh-93px)]'
13+
className='flex h-[calc(100svh-57px)] flex-col items-center justify-center gap-4 bg-[#FAF9F6] dark:bg-[#363639] md:h-[calc(100svh-93px)]'
1414
onClick={() => setToggle(false)}
1515
>
1616
<div className='z-10 h-full w-full text-sm lg:flex'>

‎src/app/(chat)/ask-anything/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Page = () => {
1010

1111
return (
1212
<div
13-
className='flex h-[calc(100svh-57px)] flex-col items-center justify-center gap-4 bg-[#E8E8E8] dark:bg-[#363639] md:h-[calc(100svh-93px)]'
13+
className='flex h-[calc(100svh-57px)] flex-col items-center justify-center gap-4 bg-[#FAF9F6] dark:bg-[#363639] md:h-[calc(100svh-93px)]'
1414
onClick={() => setToggle(false)}
1515
>
1616
<div className='z-10 h-full w-full text-sm lg:flex'>

‎src/app/(chat)/layout.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function RootLayout({
4848
<main className='fixed m-auto grid h-[100svh] w-full md:grid-cols-[260px_1fr] lg:grid-cols-[300px_1fr]'>
4949
<div className='hidden h-full md:block'>
5050
<div className='h-screen bg-[#EBEBEB] px-8 text-white dark:bg-black'>
51-
<div className='sticky flex h-24 items-center justify-center border-b border-[#ACACAC] dark:border-[#34343B]'>
51+
<div className='sticky flex h-24 items-center justify-center'>
5252
<Image
5353
src='/ripeseed.png'
5454
alt='logo'
@@ -59,10 +59,12 @@ export default function RootLayout({
5959
<Sidebar />
6060
</div>
6161
</div>
62-
<div className='flex h-full flex-col'>
63-
<ChatHeader />
64-
<div className='h-full bg-[#E8E8E8] dark:bg-[#363639]'>
65-
{children}
62+
<div className='flex h-full flex-col bg-[#EBEBEB] p-2'>
63+
<div className='overflow-hidden rounded-xl bg-white dark:bg-[#1E1E1E]'>
64+
<ChatHeader />
65+
<div className='h-full bg-[#E8E8E8] dark:bg-[#363639]'>
66+
{children}
67+
</div>
6668
</div>
6769
</div>
6870
</main>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function Page() {
4848

4949
return (
5050
<div
51-
className='flex h-[calc(100svh-57px)] flex-col items-center justify-center gap-4 bg-[#E8E8E8] dark:bg-[#363639] md:h-[calc(100svh-93px)]'
51+
className='flex h-[calc(100svh-57px)] flex-col items-center justify-center gap-4 bg-[#FAF9F6] dark:bg-[#363639] md:h-[calc(100svh-93px)]'
5252
onClick={() => setToggle(false)}
5353
>
5454
<div className='z-10 h-full w-full text-sm lg:flex'>

‎src/app/globals.css

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
--dashboard-input: #757575;
4040
--dashboard-sidebar-footer: #344054;
4141
--dashboard-footer-light: #667085;
42+
--icon-color: #363639;
4243
--white: #ffffff;
4344
--black: #1b1b21;
4445
--sidebar-background: 0 0% 98%;

0 commit comments

Comments
 (0)