From d96cbe4e7febc9e6856b7b68f06b3aea3b935e5d Mon Sep 17 00:00:00 2001 From: Hunain Asif Date: Tue, 10 Dec 2024 19:14:28 +0500 Subject: [PATCH 01/12] Accordion added and some things are remaining --- public/assets/Avatar.png | Bin 0 -> 4186 bytes public/assets/Icon.svg | 5 + public/assets/brandSettings/book.svg | 6 ++ public/assets/brandSettings/bucket.svg | 6 ++ public/assets/brandSettings/chart.svg | 5 + public/assets/brandSettings/global.svg | 7 ++ src/app/(admin)/(auth)/token/page.tsx | 2 +- .../DashboardSideBar/DashboardSideBar.tsx | 98 ++++++++++++------ .../_components/BrandAccordion.tsx | 50 +++++++++ .../(admin)/dashboard/brandsettings/page.tsx | 41 +++++++- src/app/(admin)/dashboard/layout.tsx | 31 +++--- src/components/ui/accordion.tsx | 27 ++--- 12 files changed, 210 insertions(+), 68 deletions(-) create mode 100644 public/assets/Avatar.png create mode 100644 public/assets/Icon.svg create mode 100644 public/assets/brandSettings/book.svg create mode 100644 public/assets/brandSettings/bucket.svg create mode 100644 public/assets/brandSettings/chart.svg create mode 100644 public/assets/brandSettings/global.svg create mode 100644 src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx diff --git a/public/assets/Avatar.png b/public/assets/Avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..955b7050f11f47527beb17a4dcaf519eb3a78b27 GIT binary patch literal 4186 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 literal 0 HcmV?d00001 diff --git a/public/assets/Icon.svg b/public/assets/Icon.svg new file mode 100644 index 0000000..426a64b --- /dev/null +++ b/public/assets/Icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/brandSettings/book.svg b/public/assets/brandSettings/book.svg new file mode 100644 index 0000000..fc819a6 --- /dev/null +++ b/public/assets/brandSettings/book.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/brandSettings/bucket.svg b/public/assets/brandSettings/bucket.svg new file mode 100644 index 0000000..4f790ba --- /dev/null +++ b/public/assets/brandSettings/bucket.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/brandSettings/chart.svg b/public/assets/brandSettings/chart.svg new file mode 100644 index 0000000..1774dbd --- /dev/null +++ b/public/assets/brandSettings/chart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/brandSettings/global.svg b/public/assets/brandSettings/global.svg new file mode 100644 index 0000000..381c638 --- /dev/null +++ b/public/assets/brandSettings/global.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/app/(admin)/(auth)/token/page.tsx b/src/app/(admin)/(auth)/token/page.tsx index 0f6fee2..f5cb754 100644 --- a/src/app/(admin)/(auth)/token/page.tsx +++ b/src/app/(admin)/(auth)/token/page.tsx @@ -69,7 +69,7 @@ export default function Token() { Continue - + You skip for now and can enter the link later by accessing it in knowledege base panel diff --git a/src/app/(admin)/dashboard/_components/DashboardSideBar/DashboardSideBar.tsx b/src/app/(admin)/dashboard/_components/DashboardSideBar/DashboardSideBar.tsx index 00a862e..a6fbd49 100644 --- a/src/app/(admin)/dashboard/_components/DashboardSideBar/DashboardSideBar.tsx +++ b/src/app/(admin)/dashboard/_components/DashboardSideBar/DashboardSideBar.tsx @@ -1,37 +1,73 @@ -import { X } from 'lucide-react' +'use client' + +import React, { useState } from 'react' import Image from 'next/image' -import React from 'react' +import Link from 'next/link' export default function DashboardSideBar() { - return ( -
-
-
- -
-
-
    -
  • - - Summary -
    • -
  • - - Summary -
    • -
  • - - Summary -
    • - -
- -
-
- -
+ const [activeTab, setActiveTab] = useState(0) + const links = [ + { + id: 1, + icon: '/assets/brandSettings/chart.svg', + title: 'Summary', + url: 'summary', + }, + { + id: 2, + icon: '/assets/brandSettings/bucket.svg', + title: 'Brand settings', + url: 'brandsettings', + }, + { + id: 3, + icon: '/assets/brandSettings/book.svg', + title: 'Knowledge base settings', + url: 'knowledgebase', + }, + ] + return ( +
+
+
+ +
+
+
    + {links.map((item, i) => ( + +
  • { + setActiveTab(item.id) + }} + className={`listItem flex w-full cursor-pointer space-x-2 p-3 ${item.id === activeTab ? 'bg-gray-100' : ''}`} + > + + {item.title} +
    • + + ))} +
+
+
+ avatar
- +
+ Admin + + admin@ripeseed.io + +
+
+ +
+
- ) +
+
+ ) } diff --git a/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx b/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx new file mode 100644 index 0000000..2697ca1 --- /dev/null +++ b/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx @@ -0,0 +1,50 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from '@/components/ui/accordion' +import { Button } from '@/components/ui/button' + +export default function BrandAccordion() { + return ( +
+ + + Theme + +
+

Upload Logo

+
+
+ Click to select or drag and drop + SVG,JPG or PNG (max15 MB) +
+ + +
+
+
+

Add Description (Metadata)

+
+
+
+ + + + Font Setting + + Yes. It comes with default styles that matches the other + components' aesthetic. + + + + External Links + + Yes. It's animated by default, but you can disable it if you prefer. + + + +
+ ) +} diff --git a/src/app/(admin)/dashboard/brandsettings/page.tsx b/src/app/(admin)/dashboard/brandsettings/page.tsx index 70183ba..a6e4280 100644 --- a/src/app/(admin)/dashboard/brandsettings/page.tsx +++ b/src/app/(admin)/dashboard/brandsettings/page.tsx @@ -1,9 +1,42 @@ import React from 'react' +import Image from 'next/image' + +import { Button } from '@/components/ui/button' +import BrandAccordion from './_components/BrandAccordion' export default function BrandSettings() { - return ( -
-

Hey I am the brandSettings

+ return ( +
+ {/* buttons of the page */} +
+

Brand Settings

+ +
+ {/* bottom section of the page */} +
+ {/* left section */} +
+
+

Channels

+

+ The channels related to brand-able settings +

+
+
+ +
- ) + {/* right section */} +
hey
+
+
+ ) } diff --git a/src/app/(admin)/dashboard/layout.tsx b/src/app/(admin)/dashboard/layout.tsx index 4c000a4..e4c6343 100644 --- a/src/app/(admin)/dashboard/layout.tsx +++ b/src/app/(admin)/dashboard/layout.tsx @@ -1,25 +1,18 @@ -import { Inter } from "next/font/google"; -import DashboardSideBar from "./_components/DashboardSideBar/DashboardSideBar"; - -const inter = Inter({ subsets: ["latin"] }); +import { Inter } from 'next/font/google' +import DashboardSideBar from './_components/DashboardSideBar/DashboardSideBar' +const inter = Inter({ subsets: ['latin'] }) export default function RootLayout({ - children, + children, }: Readonly<{ - children: React.ReactNode; + children: React.ReactNode }>) { - return ( - - -
- -
- {children} -
-
- - - ); -} \ No newline at end of file + return ( +
+ +
{children}
+
+ ) +} diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx index 42d5b5f..5f157e5 100644 --- a/src/components/ui/accordion.tsx +++ b/src/components/ui/accordion.tsx @@ -1,9 +1,10 @@ -"use client" +'use client' -import * as React from "react" -import * as AccordionPrimitive from "@radix-ui/react-accordion" -import { cn } from "@/lib/utils" -import { ChevronDownIcon } from "@radix-ui/react-icons" +import * as React from 'react' +import * as AccordionPrimitive from '@radix-ui/react-accordion' +import { ChevronDownIcon } from '@radix-ui/react-icons' + +import { cn } from '@/lib/utils' const Accordion = AccordionPrimitive.Root @@ -13,27 +14,27 @@ const AccordionItem = React.forwardRef< >(({ className, ...props }, ref) => ( )) -AccordionItem.displayName = "AccordionItem" +AccordionItem.displayName = 'AccordionItem' const AccordionTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( - + svg]:rotate-180", - className + 'flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180', + className, )} {...props} > {children} - + )) @@ -45,10 +46,10 @@ const AccordionContent = React.forwardRef< >(({ className, children, ...props }, ref) => ( -
{children}
+
{children}
 )) AccordionContent.displayName = AccordionPrimitive.Content.displayName From c8da90ddcef01557375ef72ab7429ebb931b5b8d Mon Sep 17 00:00:00 2001 From: Hunain Asif Date: Thu, 12 Dec 2024 12:02:44 +0500 Subject: [PATCH 02/12] Brand Settings Design complete --- public/assets/brandSettings/refresh.svg | 4 + .../_components/BrandAccordion.tsx | 281 ++++++++++++++++-- .../_components/MainPreview/MainPreview.tsx | 13 + .../MainPreview/_components/ChatSection.tsx | 80 +++++ .../MainPreview/_components/SideBar.tsx | 41 +++ .../MainPreview/_components/SingleMessage.tsx | 34 +++ .../brandsettings/_components/Preview.tsx | 48 +++ .../(admin)/dashboard/brandsettings/page.tsx | 21 +- src/app/globals.css | 4 + 9 files changed, 500 insertions(+), 26 deletions(-) create mode 100644 public/assets/brandSettings/refresh.svg create mode 100644 src/app/(admin)/dashboard/brandsettings/_components/MainPreview/MainPreview.tsx create mode 100644 src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/ChatSection.tsx create mode 100644 src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SideBar.tsx create mode 100644 src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SingleMessage.tsx create mode 100644 src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx diff --git a/public/assets/brandSettings/refresh.svg b/public/assets/brandSettings/refresh.svg new file mode 100644 index 0000000..95730c5 --- /dev/null +++ b/public/assets/brandSettings/refresh.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx b/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx index 2697ca1..a8af4d1 100644 --- a/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx +++ b/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx @@ -1,3 +1,8 @@ +'use client' + +import React, { useState } from 'react' +import { Plus } from 'lucide-react' + import { Accordion, AccordionContent, @@ -9,39 +14,281 @@ import { Button } from '@/components/ui/button' export default function BrandAccordion() { return (
- + Theme - -
-

Upload Logo

-
-
- Click to select or drag and drop - SVG,JPG or PNG (max15 MB) + + {/* top section of the first question */} +
+

+ Upload Logo +

+
+
+ + Click to select or drag and drop + + + SVG,JPG or PNG (max15 MB) +
- +
-
-

Add Description (Metadata)

-
+ {/* center section of the second question */} +
+

+ Add Description (Metadata) +

+ +
+ {/* bottom section of the third question */} + {/* one */} +
+

+ Color Adjustments +

+
+ History Pannel Background +
+ #FFFFF + +
+
+ {/* two */} +
+ Chat Background +
+ #FFFFF + +
+
+ {/* three */} +
+ Chat User Bubble +
+ #FFFFF + +
+
+ + {/* four */} +
+ Chat Bot Bubble +
+ #FFFFF + +
+
-
Font Setting - Yes. It comes with default styles that matches the other - components' aesthetic. + {/* font setting first sectionl */} +
+
+ Primary Font +

+ Used in Headings +

+
+
+ + + +
+
+ {/* font setting second section */} +
+
+ + Secondary Font + +

+ Used in Supportive texts +

+
+
+ + + +
+
+ {/* font setting third section */} +
+
+ Chat Font +

+ Used in user and generative ai chat response bubble +

+
+
+ + + +
+
External Links - - Yes. It's animated by default, but you can disable it if you prefer. + +
+
+
+ Link1 + + This will be displayed in left navigation panel + +
+ + Remove + +
+
+
+ + +
+
+ + +
+
+
+
+ + Add another link +
diff --git a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/MainPreview.tsx b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/MainPreview.tsx new file mode 100644 index 0000000..98e8c24 --- /dev/null +++ b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/MainPreview.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +import ChatSection from './_components/ChatSection' +import SideBar from './_components/SideBar' + +export default function MainPreview() { + return ( +
+ + +
+ ) +} diff --git a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/ChatSection.tsx b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/ChatSection.tsx new file mode 100644 index 0000000..b376278 --- /dev/null +++ b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/ChatSection.tsx @@ -0,0 +1,80 @@ +import React from 'react' +import { SendHorizonal, Settings } from 'lucide-react' + +import { Button } from '@/components/ui/button' +import { Separator } from '@/components/ui/separator' +import SingleMessage from './SingleMessage' + +export default function ChatSection() { + const messages = [ + { + id: 1, + role: 'system', + message: + 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt a modi, eius similique dolore porro molestias nobis ex expedita recusandae.', + }, + { + id: 2, + role: 'user', + message: + 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt a modi, eius similique dolore porro molestias nobis ex expedita recusandae.', + }, + { + id: 3, + role: 'system', + message: + 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt a modi, eius similique dolore porro molestias nobis ex expedita recusandae.', + }, + { + id: 4, + role: 'user', + message: + 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt a modi, eius similique dolore porro molestias nobis ex expedita recusandae.', + }, + { + id: 5, + role: 'system', + message: + 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt a modi, eius similique dolore porro molestias nobis ex expedita recusandae.', + }, + ] + return ( +
+ {/* top buttons Section */} +
+
+
+ + +
+ +
+ + {/* Messages Chat Section */} +
+ {messages.map((item, i) => ( + + ))} +
+ {/* Message Input Section */} +
+
+ +
+ +
+
+
+
+ ) +} diff --git a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SideBar.tsx b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SideBar.tsx new file mode 100644 index 0000000..052102d --- /dev/null +++ b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SideBar.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import Image from 'next/image' +import { BriefcaseBusiness, Headset, MessageSquare, User } from 'lucide-react' + +import { Separator } from '@/components/ui/separator' + +export default function SideBar() { + return ( +
+ {/* top */} +
+ +
+ + {/* center */} +
+
+ + Ask Ripeseed +
+
+ {/* bottom */} +
+
+
+ +
+ Our Work +
+
+ + Our Team +
+
+ + Contact Us +
+
+
+ ) +} diff --git a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SingleMessage.tsx b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SingleMessage.tsx new file mode 100644 index 0000000..7ffe5f6 --- /dev/null +++ b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SingleMessage.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import Image from 'next/image' + +interface MessageProps { + id: number + role: string + message: string +} + +interface SingleMessageProps { + text: MessageProps +} + +export default function SingleMessage({ text }: SingleMessageProps) { + const { id, role, message } = text + return ( +
+ +
+ {message} +
+
+ ) +} diff --git a/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx b/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx new file mode 100644 index 0000000..2b3cbd3 --- /dev/null +++ b/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import Image from 'next/image' + +import { Button } from '@/components/ui/button' +import MainPreview from './MainPreview/MainPreview' + +export default function Preview() { + return ( +
+ {/* top section of the preview */} +
+
+ Preview + + Below is the preview against the changes done from different + channels + +
+ +
+ {/* center of the preview */} +
+ {/* this is the MainPreview component where changes reflectl */} + +
+ {/* bottom of the preview */} +
+
+ + Undo action +
+
+ + +
+
+
+ ) +} diff --git a/src/app/(admin)/dashboard/brandsettings/page.tsx b/src/app/(admin)/dashboard/brandsettings/page.tsx index a6e4280..0bc11a6 100644 --- a/src/app/(admin)/dashboard/brandsettings/page.tsx +++ b/src/app/(admin)/dashboard/brandsettings/page.tsx @@ -3,14 +3,15 @@ import Image from 'next/image' import { Button } from '@/components/ui/button' import BrandAccordion from './_components/BrandAccordion' +import Preview from './_components/Preview' export default function BrandSettings() { return ( -
+
{/* buttons of the page */}
-

Brand Settings

-
{/* bottom section of the page */} -
+
{/* left section */} -
-
+
+

Channels

-

+

The channels related to brand-able settings

-
+
{/* right section */} -
hey
+
+ +
) diff --git a/src/app/globals.css b/src/app/globals.css index 644f47e..e682614 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -84,3 +84,7 @@ pre > pre { padding: 0; margin: 0; } + +.accordion::-webkit-scrollbar { + width: 2px; +} From f997a3e1c2ff051d5424ed13c9fe6d816b5e0a47 Mon Sep 17 00:00:00 2001 From: Hunain Asif Date: Tue, 17 Dec 2024 12:01:31 +0500 Subject: [PATCH 03/12] Minor Fixings --- .../_components/BrandAccordion.tsx | 104 +++++++++--------- .../MainPreview/_components/ChatSection.tsx | 12 +- .../MainPreview/_components/SideBar.tsx | 22 ++-- .../brandsettings/_components/Preview.tsx | 18 +-- .../(admin)/dashboard/brandsettings/page.tsx | 18 +-- 5 files changed, 84 insertions(+), 90 deletions(-) diff --git a/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx b/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx index a8af4d1..7b4aae9 100644 --- a/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx +++ b/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx @@ -19,16 +19,14 @@ export default function BrandAccordion() { Theme {/* top section of the first question */} -
-

- Upload Logo -

-
-
+
+

Upload Logo

+
+
Click to select or drag and drop - + SVG,JPG or PNG (max15 MB)
@@ -39,8 +37,8 @@ export default function BrandAccordion() {
{/* center section of the second question */} -
-

+
+

Add Description (Metadata)

{/* bottom section of the third question */} {/* one */} -
-

+
+

Color Adjustments

-
- History Pannel Background -
- #FFFFF +
+ History Pannel Background +
+ #FFFFF
{/* two */} -
- Chat Background -
- #FFFFF +
+ Chat Background +
+ #FFFFF
{/* three */} -
- Chat User Bubble -
- #FFFFF +
+ Chat User Bubble +
+ #FFFFF
{/* four */} -
- Chat Bot Bubble -
- #FFFFF +
+ Chat Bot Bubble +
+ #FFFFF
@@ -96,14 +94,12 @@ export default function BrandAccordion() { Font Setting {/* font setting first sectionl */} -
-
- Primary Font -

- Used in Headings -

+
+
+ Primary Font +

Used in Headings

-
+
{/* font setting third section */} -
-
- Chat Font -

+

+
+ Chat Font +

Used in user and generative ai chat response bubble

-
+
-
+
diff --git a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SideBar.tsx b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SideBar.tsx index 052102d..56e4a67 100644 --- a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SideBar.tsx +++ b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SideBar.tsx @@ -8,32 +8,32 @@ export default function SideBar() { return (
{/* top */} -
+
{/* center */} -
-
+
+
- Ask Ripeseed + Ask Ripeseed
{/* bottom */} -
-
+
+
- Our Work + Our Work
-
+
- Our Team + Our Team
-
+
- Contact Us + Contact Us
diff --git a/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx b/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx index 2b3cbd3..971f12e 100644 --- a/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx +++ b/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx @@ -6,12 +6,12 @@ import MainPreview from './MainPreview/MainPreview' export default function Preview() { return ( -
+
{/* top section of the preview */} -
-
- Preview - +
+
+ Preview + Below is the preview against the changes done from different channels @@ -23,13 +23,13 @@ export default function Preview() {
{/* center of the preview */} -
+
{/* this is the MainPreview component where changes reflectl */}
{/* bottom of the preview */} -
-
+
+
Undo action
-
+
diff --git a/src/app/(admin)/dashboard/brandsettings/page.tsx b/src/app/(admin)/dashboard/brandsettings/page.tsx index 0bc11a6..5240473 100644 --- a/src/app/(admin)/dashboard/brandsettings/page.tsx +++ b/src/app/(admin)/dashboard/brandsettings/page.tsx @@ -7,10 +7,10 @@ import Preview from './_components/Preview' export default function BrandSettings() { return ( -
+
{/* buttons of the page */} -
-

Brand Settings

+
+

Brand Settings

{/* bottom section of the page */} -
+
{/* left section */} -
-
-

Channels

+
+
+

Channels

The channels related to brand-able settings

-
+
{/* right section */} -
+
From 0a4d55c8cb3cbfe7210a9f260649d4c288ad8455 Mon Sep 17 00:00:00 2001 From: Hunain Asif Date: Tue, 24 Dec 2024 10:37:34 +0500 Subject: [PATCH 04/12] build ready branch --- package.json | 4 ++-- pnpm-lock.yaml | 4 ++-- src/app/(admin)/(auth)/token/page.tsx | 10 +++++----- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index c54a058..e10979c 100644 --- a/package.json +++ b/package.json @@ -54,9 +54,9 @@ "next-themes": "^0.3.0", "openai": "^4.47.1", "pdf-parse": "^1.1.1", - "react": "^18", + "react": "^18.3.1", "react-color": "^2.19.3", - "react-dom": "^18", + "react-dom": "^18.3.1", "react-hook-form": "^7.53.2", "react-markdown": "^9.0.1", "react-syntax-highlighter": "^15.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9783fee..dd20253 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -132,13 +132,13 @@ importers: specifier: ^1.1.1 version: 1.1.1 react: - specifier: ^18 + specifier: ^18.3.1 version: 18.3.1 react-color: specifier: ^2.19.3 version: 2.19.3(react@18.3.1) react-dom: - specifier: ^18 + specifier: ^18.3.1 version: 18.3.1(react@18.3.1) react-hook-form: specifier: ^7.53.2 diff --git a/src/app/(admin)/(auth)/token/page.tsx b/src/app/(admin)/(auth)/token/page.tsx index 721b97a..1c964e5 100644 --- a/src/app/(admin)/(auth)/token/page.tsx +++ b/src/app/(admin)/(auth)/token/page.tsx @@ -51,7 +51,7 @@ export default function Token() { - Don't know where to generate the token?{' '} + Don't know where to generate the token?{' '} Click here @@ -67,14 +67,14 @@ export default function Token() {
- - You skip for now and can enter the link later by accessing it in - knowledege base panel + + You can skip for now and enter the link later by accessing it in + the knowledge base panel From acbe060472394d807c4556fcd2ecefa52709755e Mon Sep 17 00:00:00 2001 From: Hunain Asif Date: Wed, 8 Jan 2025 17:24:18 +0500 Subject: [PATCH 05/12] fix: change some files and update some design related stuff --- package.json | 2 - pnpm-lock.yaml | 71 ----- ...{image 123.svg => carousel-auth-first.svg} | 0 ...image 124.svg => carousel-auth-second.svg} | 0 ...{image 126.svg => carousel-auth-third.svg} | 0 .../(auth)/_components/AuthCarousel.tsx | 8 +- src/app/(admin)/(auth)/layout.tsx | 10 +- src/app/(admin)/(auth)/register/page.tsx | 17 +- src/app/(admin)/(auth)/token/page.tsx | 30 +- .../_components/BrandAccordion.tsx | 288 ++++++++++++------ .../brandsettings/_components/Preview.tsx | 8 +- .../(admin)/dashboard/brandsettings/page.tsx | 10 +- src/app/(admin)/dashboard/layout.tsx | 6 +- src/app/layout.tsx | 32 +- 14 files changed, 266 insertions(+), 216 deletions(-) rename public/{image 123.svg => carousel-auth-first.svg} (100%) rename public/{image 124.svg => carousel-auth-second.svg} (100%) rename public/{image 126.svg => carousel-auth-third.svg} (100%) diff --git a/package.json b/package.json index e10979c..8664c44 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,6 @@ "openai": "^4.47.1", "pdf-parse": "^1.1.1", "react": "^18.3.1", - "react-color": "^2.19.3", "react-dom": "^18.3.1", "react-hook-form": "^7.53.2", "react-markdown": "^9.0.1", @@ -81,7 +80,6 @@ "@types/lodash.debounce": "^4.0.9", "@types/node": "^20", "@types/react": "^18", - "@types/react-color": "^3.0.12", "@types/react-dom": "^18", "@types/react-syntax-highlighter": "^15.5.13", "eslint": "^8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dd20253..1132c85 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -134,9 +134,6 @@ importers: react: specifier: ^18.3.1 version: 18.3.1 - react-color: - specifier: ^2.19.3 - version: 2.19.3(react@18.3.1) react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) @@ -207,9 +204,6 @@ importers: '@types/react': specifier: ^18 version: 18.3.3 - '@types/react-color': - specifier: ^3.0.12 - version: 3.0.12 '@types/react-dom': specifier: ^18 version: 18.3.0 @@ -673,11 +667,6 @@ packages: resolution: {integrity: sha512-9eAyLr0sMXmrG6nSjQVqomkl8xd7m1Iy37XPgM2AjB+yjRD5IPjKgwbOXx9xWCa47V0Jt3zrPZWiPUDdaNlU4Q==} engines: {node: '>=18.0.0'} - '@icons/material@0.2.4': - resolution: {integrity: sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==} - peerDependencies: - react: '*' - '@img/sharp-darwin-arm64@0.33.5': resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} @@ -2098,9 +2087,6 @@ packages: '@types/prop-types@15.7.12': resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} - '@types/react-color@3.0.12': - resolution: {integrity: sha512-pr3uKE3lSvf7GFo1Rn2K3QktiZQFFrSgSGJ/3iMvSOYWt2pPAJ97rVdVfhWxYJZ8prAEXzoP2XX//3qGSQgu7Q==} - '@types/react-dom@18.3.0': resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} @@ -2110,9 +2096,6 @@ packages: '@types/react@18.3.3': resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==} - '@types/reactcss@1.2.12': - resolution: {integrity: sha512-BrXUQ86/wbbFiZv8h/Q1/Q1XOsaHneYmCb/tHe9+M8XBAAUc2EHfdY0DY22ZZjVSaXr5ix7j+zsqO2eGZub8lQ==} - '@types/retry@0.12.0': resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==} @@ -4215,9 +4198,6 @@ packages: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} engines: {node: '>=10'} - lodash-es@4.17.21: - resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} - lodash.camelcase@4.3.0: resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==} @@ -4313,9 +4293,6 @@ packages: markdown-table@3.0.3: resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==} - material-colors@1.2.6: - resolution: {integrity: sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==} - mdast-util-find-and-replace@3.0.1: resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==} @@ -5086,11 +5063,6 @@ packages: resolution: {integrity: sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==} engines: {node: '>= 0.8'} - react-color@2.19.3: - resolution: {integrity: sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==} - peerDependencies: - react: '*' - react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: @@ -5150,11 +5122,6 @@ packages: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} - reactcss@1.2.3: - resolution: {integrity: sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==} - peerDependencies: - react: '*' - read-cache@1.0.0: resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} @@ -5574,9 +5541,6 @@ packages: resolution: {integrity: sha512-MyqZCTGLDZ77u4k+jqg4UlrzPTPZ49NDlaekU6uuFaJLzPIN1woaRXCbGeqOfxwc3Y37ZROGAJ614Rdv7Olt+g==} engines: {node: '>=10'} - tinycolor2@1.6.0: - resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==} - to-fast-properties@2.0.0: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} engines: {node: '>=4'} @@ -6456,10 +6420,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@icons/material@0.2.4(react@18.3.1)': - dependencies: - react: 18.3.1 - '@img/sharp-darwin-arm64@0.33.5': optionalDependencies: '@img/sharp-libvips-darwin-arm64': 1.0.4 @@ -7668,11 +7628,6 @@ snapshots: '@types/prop-types@15.7.12': {} - '@types/react-color@3.0.12': - dependencies: - '@types/react': 18.3.3 - '@types/reactcss': 1.2.12 - '@types/react-dom@18.3.0': dependencies: '@types/react': 18.3.3 @@ -7686,10 +7641,6 @@ snapshots: '@types/prop-types': 15.7.12 csstype: 3.1.3 - '@types/reactcss@1.2.12': - dependencies: - '@types/react': 18.3.3 - '@types/retry@0.12.0': {} '@types/tough-cookie@4.0.5': {} @@ -9933,8 +9884,6 @@ snapshots: dependencies: p-locate: 5.0.0 - lodash-es@4.17.21: {} - lodash.camelcase@4.3.0: {} lodash.castarray@4.4.0: {} @@ -10014,8 +9963,6 @@ snapshots: markdown-table@3.0.3: {} - material-colors@1.2.6: {} - mdast-util-find-and-replace@3.0.1: dependencies: '@types/mdast': 4.0.4 @@ -10953,17 +10900,6 @@ snapshots: iconv-lite: 0.4.24 unpipe: 1.0.0 - react-color@2.19.3(react@18.3.1): - dependencies: - '@icons/material': 0.2.4(react@18.3.1) - lodash: 4.17.21 - lodash-es: 4.17.21 - material-colors: 1.2.6 - prop-types: 15.8.1 - react: 18.3.1 - reactcss: 1.2.3(react@18.3.1) - tinycolor2: 1.6.0 - react-dom@18.3.1(react@18.3.1): dependencies: loose-envify: 1.4.0 @@ -11034,11 +10970,6 @@ snapshots: dependencies: loose-envify: 1.4.0 - reactcss@1.2.3(react@18.3.1): - dependencies: - lodash: 4.17.21 - react: 18.3.1 - read-cache@1.0.0: dependencies: pify: 2.3.0 @@ -11568,8 +11499,6 @@ snapshots: dependencies: convert-hrtime: 3.0.0 - tinycolor2@1.6.0: {} - to-fast-properties@2.0.0: {} to-regex-range@5.0.1: diff --git a/public/image 123.svg b/public/carousel-auth-first.svg similarity index 100% rename from public/image 123.svg rename to public/carousel-auth-first.svg diff --git a/public/image 124.svg b/public/carousel-auth-second.svg similarity index 100% rename from public/image 124.svg rename to public/carousel-auth-second.svg diff --git a/public/image 126.svg b/public/carousel-auth-third.svg similarity index 100% rename from public/image 126.svg rename to public/carousel-auth-third.svg diff --git a/src/app/(admin)/(auth)/_components/AuthCarousel.tsx b/src/app/(admin)/(auth)/_components/AuthCarousel.tsx index 771028b..24e07eb 100644 --- a/src/app/(admin)/(auth)/_components/AuthCarousel.tsx +++ b/src/app/(admin)/(auth)/_components/AuthCarousel.tsx @@ -10,11 +10,11 @@ import { CarouselContent, CarouselItem, } from '@/components/ui/carousel' -import Image1 from '../../../../../public/image 123.svg' -import Image2 from '../../../../../public/image 124.svg' -import Image3 from '../../../../../public/image 126.svg' +import AuthFirst from '../../../../../public/carousel-auth-first.svg' +import AuthSecond from '../../../../../public/carousel-auth-second.svg' +import AuthThird from '../../../../../public/carousel-auth-third.svg' -const images = [Image1, Image2, Image3] +const images = [AuthFirst, AuthSecond, AuthThird] export default function AuthCarousel() { const plugin = React.useRef( Autoplay({ delay: 2000, stopOnInteraction: true }), diff --git a/src/app/(admin)/(auth)/layout.tsx b/src/app/(admin)/(auth)/layout.tsx index 8c4bf1e..4ea6068 100644 --- a/src/app/(admin)/(auth)/layout.tsx +++ b/src/app/(admin)/(auth)/layout.tsx @@ -1,19 +1,19 @@ -import { Inter } from 'next/font/google' +import { Manrope } from 'next/font/google' import AuthCarousel from './_components/AuthCarousel' -const inter = Inter({ subsets: ['latin'] }) +const manrope = Manrope({ subsets: ['latin'] }) -export default function RootLayout({ +export default function AdminLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( -
+
{children} -
+
diff --git a/src/app/(admin)/(auth)/register/page.tsx b/src/app/(admin)/(auth)/register/page.tsx index 7d99b2d..2e0bbc9 100644 --- a/src/app/(admin)/(auth)/register/page.tsx +++ b/src/app/(admin)/(auth)/register/page.tsx @@ -28,8 +28,8 @@ export default function Auth() { function onSubmit(values: z.infer) {} return ( -
-
+
+

Setup your admin account

@@ -47,7 +47,7 @@ export default function Auth() { First Name - + @@ -63,7 +63,7 @@ export default function Auth() { Last Name - + @@ -78,7 +78,7 @@ export default function Auth() { Email - + @@ -94,7 +94,7 @@ export default function Auth() { Set Password - + @@ -109,10 +109,7 @@ export default function Auth() { Confirm Password - + diff --git a/src/app/(admin)/(auth)/token/page.tsx b/src/app/(admin)/(auth)/token/page.tsx index 1c964e5..a8a9562 100644 --- a/src/app/(admin)/(auth)/token/page.tsx +++ b/src/app/(admin)/(auth)/token/page.tsx @@ -1,5 +1,6 @@ 'use client' +import Link from 'next/link' import { zodResolver } from '@hookform/resolvers/zod' import { useForm } from 'react-hook-form' import { z } from 'zod' @@ -23,15 +24,15 @@ const formSchema = z.object({ }), }) -export default function Token() { +export default function TokenPage() { const form = useForm() function onSubmit(values: z.infer) {} return (
-

Enter Your OpenAI Token

-

+

Enter Your OpenAI API Key

+

This will allow you to make knowledge base related settings

@@ -45,14 +46,23 @@ export default function Token() { render={({ field }) => ( - OpenAI Token + OpenAI API Key - + Don't know where to generate the token?{' '} - Click here + + + Click here + + @@ -61,7 +71,7 @@ export default function Token() {
@@ -72,9 +82,9 @@ export default function Token() { Continue
- - You can skip for now and enter the link later by accessing it in - the knowledge base panel + + You can skip this step for now and add your OpenAI API key later + in the Knowledge Base settings. diff --git a/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx b/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx index ab0d773..bf69a0e 100644 --- a/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx +++ b/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx @@ -20,15 +20,15 @@ export default function BrandAccordion() { {/* top section of the first question */}
-

+

Upload Logo

-
+
Click to select or drag and drop - + SVG,JPG or PNG (max15 MB)
@@ -40,11 +40,11 @@ export default function BrandAccordion() {
{/* center section of the second question */}
-

+

Add Description (Metadata)

-

+

Color Adjustments

-
- History Pannel Background +
+ + History Pannel Background +
- #FFFFF + #FFFFF
{/* two */} -
- Chat Background +
+ Chat Background
- #FFFFF + #FFFFF
{/* three */} -
- Chat User Bubble +
+ Chat User Bubble
- #FFFFF + #FFFFF
{/* four */} -
- Chat Bot Bubble +
+ Chat Bot Bubble
- #FFFFF + #FFFFF
@@ -105,39 +107,77 @@ export default function BrandAccordion() {
@@ -153,39 +193,77 @@ export default function BrandAccordion() {
@@ -201,39 +279,77 @@ export default function BrandAccordion() {
@@ -242,11 +358,11 @@ export default function BrandAccordion() { External Links -
+
Link1 - + This will be displayed in left navigation panel
@@ -281,7 +397,7 @@ export default function BrandAccordion() {
-
+
Add another link
diff --git a/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx b/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx index 5e94117..e1350b3 100644 --- a/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx +++ b/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx @@ -17,8 +17,8 @@ export default function Preview() { {/* top section of the preview */}
- Preview - + Preview + Below is the preview against the changes done from different channels @@ -41,7 +41,7 @@ export default function Preview() {
{/* bottom of the preview */}
- -
diff --git a/src/app/(admin)/dashboard/brandsettings/page.tsx b/src/app/(admin)/dashboard/brandsettings/page.tsx index 6d5b973..aa6a278 100644 --- a/src/app/(admin)/dashboard/brandsettings/page.tsx +++ b/src/app/(admin)/dashboard/brandsettings/page.tsx @@ -11,7 +11,7 @@ export default function BrandSettings() { {/* buttons of the page */}

Brand Settings

- +
{/* center section of the second question */} -
-

+
+ Add Description (Metadata) -

+
+ {/* bottom section of the third question */} - {/* one */} -
-

+
+ Color Adjustments -

-
- - History Pannel Background - -
- #FFFFF - + +
+ {/* first Color Box */} +
+ + History Pannel Background + +
+ #ffff + +
-
- {/* two */} -
- Chat Background -
- #FFFFF - + {/* second Box */} +
+ Chat Background +
+ #ffff + +
-
- {/* three */} -
- Chat User Bubble -
- #FFFFF - + {/* thirdBox */} +
+ Chat User Bubble +
+ #ffff + +
-
- - {/* four */} -
- Chat Bot Bubble -
- #FFFFF - + {/* fourBox */} +
+ Chat Bot Bubble +
+ #ffff + +
diff --git a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/MainPreview.tsx b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/MainPreview.tsx deleted file mode 100644 index 98e8c24..0000000 --- a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/MainPreview.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' - -import ChatSection from './_components/ChatSection' -import SideBar from './_components/SideBar' - -export default function MainPreview() { - return ( -
- - -
- ) -} diff --git a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/ChatSection.tsx b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/ChatSection.tsx deleted file mode 100644 index 2f0c883..0000000 --- a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/ChatSection.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react' -import Image from 'next/image' -import { SendHorizonal, Settings } from 'lucide-react' - -import { Button } from '@/components/ui/button' -import { Separator } from '@/components/ui/separator' -import SingleMessage from './SingleMessage' - -export default function ChatSection() { - const messages = [ - { - id: 1, - role: 'system', - message: - 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt a modi, eius similique dolore porro molestias nobis ex expedita recusandae.', - }, - { - id: 2, - role: 'user', - message: - 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt a modi, eius similique dolore porro molestias nobis ex expedita recusandae.', - }, - { - id: 3, - role: 'system', - message: - 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt a modi, eius similique dolore porro molestias nobis ex expedita recusandae.', - }, - { - id: 4, - role: 'user', - message: - 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt a modi, eius similique dolore porro molestias nobis ex expedita recusandae.', - }, - { - id: 5, - role: 'system', - message: - 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt a modi, eius similique dolore porro molestias nobis ex expedita recusandae.', - }, - ] - return ( -
- {/* top buttons Section */} -
-
-
- - -
- {' '} -
- - {/* Messages Chat Section */} -
- {messages.map((item, i) => ( - - ))} -
- {/* Message Input Section */} -
-
- -
- -
-
-
-
- ) -} diff --git a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SideBar.tsx b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SideBar.tsx deleted file mode 100644 index 5396c81..0000000 --- a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SideBar.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react' -import Image from 'next/image' - -import { Separator } from '@/components/ui/separator' - -export default function SideBar() { - return ( -
- {/* top */} -
- -
- - {/* center */} -
-
- - Ask Ripeseed -
-
- {/* bottom */} -
-
-
- -
- Our Work -
-
- - Our Team -
-
- - Contact Us -
-
-
- ) -} diff --git a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SingleMessage.tsx b/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SingleMessage.tsx deleted file mode 100644 index 64da436..0000000 --- a/src/app/(admin)/dashboard/brandsettings/_components/MainPreview/_components/SingleMessage.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import Image from 'next/image' - -interface MessageProps { - id: number - role: string - message: string -} - -interface SingleMessageProps { - text: MessageProps -} - -export default function SingleMessage({ text }: SingleMessageProps) { - const { id, role, message } = text - return ( -
-
- avatar -
- -
- {message} -
-
- ) -} diff --git a/src/app/(admin)/dashboard/brandsettings/page.tsx b/src/app/(admin)/dashboard/brandsettings/page.tsx index 5c165a4..aa65dba 100644 --- a/src/app/(admin)/dashboard/brandsettings/page.tsx +++ b/src/app/(admin)/dashboard/brandsettings/page.tsx @@ -2,8 +2,14 @@ import React from 'react' import Image from 'next/image' import { Button } from '@/components/ui/button' +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select' import BrandAccordion from './_components/BrandAccordion' -import Preview from './_components/Preview' export default function BrandSettings() { return ( @@ -23,21 +29,52 @@ export default function BrandSettings() {
{/* bottom section of the page */}
- {/* left section */} -
-
-

Channels

-

- The channels related to brand-able settings -

+
+
+
+

Channels

+

+ The channels related to brand-able settings +

+
+
+ +
-
- {/* right section */} -
- +
+
+ +
+
+ + +
+
From 5cda047d38308516e864ec5c33b060555965bd16 Mon Sep 17 00:00:00 2001 From: Hunain Asif Date: Tue, 14 Jan 2025 14:54:44 +0500 Subject: [PATCH 10/12] Add the Logo Icon in the theme component --- public/assets/brand-settings/brand.png | Bin 0 -> 739 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 public/assets/brand-settings/brand.png diff --git a/public/assets/brand-settings/brand.png b/public/assets/brand-settings/brand.png new file mode 100644 index 0000000000000000000000000000000000000000..361963cc844bd46fd1fc6d4e50a3eda90d7e8a7c GIT binary patch literal 739 zcmV<90v!E`P)1qIXzUjX+MaYva%qN1_W(1Jxrbrls-EGp=df;!|2;M7pyj+YQf zJQ`k^{|XRyfbY!XX#A7bzT4fq`R~l^F)Ps6-wH^I_|G{dtzFg2a_{Ix*X}8;t z+5wdZdc9tnU6-LN!ePm{-R`G70a!V^Ng)$hE|)*NUazthfSAMWym}{@!;lyI895z5u#09|8;ssMTt!`$C~WjYea8UoMyTcEj%YSpxV&McHgt)fbIMDV0hI zBc)PFv`8ePnuBpXd$s_F!?E|l357zG%jJZD@pw%6e4hBbu9|~>E@t#zPgcDNcu6=M z7Gc<3B}5d9MRBb)j=AWAcs&f|01PAUT3|$L93UU!@i-a5kbp!YAzXS$gci(!2V$`p z8A0lHyZ9vx=uJetlgXs;1_WtWj`5B0LpgDTAq4y(gY_T0fQ*NWksF9HTD@KuV{ki~ zk=U=PN}Wz8!#_xAdMDU|*d1tozh5NfdqHU?4F&_}Y&ILv4dAjYD7##)AzxR?e4e*8 zAuIWg(+rshic(RU3jt8F=`aJ1{q~f!{SKf`=i=n*B4A^4CQu0g9*-v@GV?m&7~4)>9C|BJNoXDrXe0M(f8{G2#_DgTbR7{SWTq VB{Fb+fmHwi002ovPDHLkV1nRFL_z=n literal 0 HcmV?d00001 From 4571b93bb18db6dad63bbe1220cda86409091abd Mon Sep 17 00:00:00 2001 From: Hunain Asif Date: Tue, 14 Jan 2025 16:49:15 +0500 Subject: [PATCH 11/12] Update some design related stuff that is requested in the comments --- public/assets/Avatar.png | Bin 4186 -> 0 bytes public/assets/brand-settings/chart.svg | 5 -- public/assets/brand-settings/refresh.svg | 4 -- .../DashboardSideBar/DashboardSideBar.tsx | 10 +-- .../_components/BrandAccordion.tsx | 22 +++--- .../brandsettings/_components/Preview.tsx | 64 ------------------ .../(admin)/dashboard/brandsettings/page.tsx | 2 +- 7 files changed, 20 insertions(+), 87 deletions(-) delete mode 100644 public/assets/Avatar.png delete mode 100644 public/assets/brand-settings/chart.svg delete mode 100644 public/assets/brand-settings/refresh.svg delete mode 100644 src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx diff --git a/public/assets/Avatar.png b/public/assets/Avatar.png deleted file mode 100644 index 955b7050f11f47527beb17a4dcaf519eb3a78b27..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4186 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 diff --git a/public/assets/brand-settings/chart.svg b/public/assets/brand-settings/chart.svg deleted file mode 100644 index 1774dbd..0000000 --- a/public/assets/brand-settings/chart.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/public/assets/brand-settings/refresh.svg b/public/assets/brand-settings/refresh.svg deleted file mode 100644 index 95730c5..0000000 --- a/public/assets/brand-settings/refresh.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/app/(admin)/dashboard/_components/DashboardSideBar/DashboardSideBar.tsx b/src/app/(admin)/dashboard/_components/DashboardSideBar/DashboardSideBar.tsx index 451a1dc..663c95b 100644 --- a/src/app/(admin)/dashboard/_components/DashboardSideBar/DashboardSideBar.tsx +++ b/src/app/(admin)/dashboard/_components/DashboardSideBar/DashboardSideBar.tsx @@ -3,11 +3,14 @@ import React, { useState } from 'react' import Image from 'next/image' import Link from 'next/link' +import { usePathname } from 'next/navigation' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' export default function DashboardSideBar() { - const [activeTab, setActiveTab] = useState(0) + const pathname = usePathname() + const url = pathname?.split('/')[2] || '' + const links = [ { id: 1, @@ -33,10 +36,7 @@ export default function DashboardSideBar() { {links.map((item, i) => (
  • { - setActiveTab(item.id) - }} - className={`flex w-full cursor-pointer space-x-2 rounded-lg p-3 ${item.id === activeTab ? 'bg-dashboardActive' : ''}`} + className={`flex w-full cursor-pointer space-x-2 rounded-lg p-3 ${item.url === url ? 'bg-dashboardActive' : ''}`} > {item.title} diff --git a/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx b/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx index 5f8106d..51a5cef 100644 --- a/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx +++ b/src/app/(admin)/dashboard/brandsettings/_components/BrandAccordion.tsx @@ -33,14 +33,14 @@ export default function BrandAccordion() { return (
    - + - Theme + Brand Appearance and Theme {/* top section of the first question */}
    - Upload Logo + Add Brand Logo
    - History Pannel Background + History Background Color
    - Chat Background + + Main Chat Background Color +
    - Chat User Bubble + + User Message Bubble Color +
    - Chat Bot Bubble + + Bot Message Bubble Color +
    - Font Setting + Customize Fonts {/* font setting first sectionl */}
    diff --git a/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx b/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx deleted file mode 100644 index eadd017..0000000 --- a/src/app/(admin)/dashboard/brandsettings/_components/Preview.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react' -import Image from 'next/image' - -import { Button } from '@/components/ui/button' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '@/components/ui/select' -import MainPreview from './MainPreview/MainPreview' - -export default function Preview() { - return ( -
    - {/* top section of the preview */} -
    -
    - Preview - - Below is the preview against the changes done from different - channels - -
    - -
    - {/* center of the preview */} -
    - {/* this is the MainPreview component where changes reflectl */} - -
    - {/* bottom of the preview */} -
    - -
    - - -
    -
    -
    - ) -} diff --git a/src/app/(admin)/dashboard/brandsettings/page.tsx b/src/app/(admin)/dashboard/brandsettings/page.tsx index aa65dba..db8343b 100644 --- a/src/app/(admin)/dashboard/brandsettings/page.tsx +++ b/src/app/(admin)/dashboard/brandsettings/page.tsx @@ -16,7 +16,7 @@ export default function BrandSettings() {
    {/* buttons of the page */}
    -

    Brand Settings

    +

    Customize Your Brand Setting