From a1d3dbcc238e8120b0fd6e297b24e3f19a44a613 Mon Sep 17 00:00:00 2001 From: Dhruv Date: Fri, 21 Nov 2025 22:30:55 +0530 Subject: [PATCH 1/5] Init Shadcn ui components --- apps/frontend/components.json | 16 ++++++++++++++++ apps/frontend/package.json | 5 +++++ apps/frontend/src/lib/utils.ts | 13 +++++++++++++ pnpm-lock.yaml | 29 +++++++++++++++++++++++++++++ 4 files changed, 63 insertions(+) create mode 100644 apps/frontend/components.json create mode 100644 apps/frontend/src/lib/utils.ts diff --git a/apps/frontend/components.json b/apps/frontend/components.json new file mode 100644 index 0000000..f2c9848 --- /dev/null +++ b/apps/frontend/components.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://shadcn-svelte.com/schema.json", + "tailwind": { + "css": "src/app.css", + "baseColor": "gray" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils", + "ui": "$lib/components/ui", + "hooks": "$lib/hooks", + "lib": "$lib" + }, + "typescript": true, + "registry": "https://shadcn-svelte.com/registry" +} diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 25f73c6..b9446c7 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -24,6 +24,7 @@ "@inlang/paraglide-js": "^2.2.0", "@langchain/core": "^0.3.78", "@langchain/langgraph-sdk": "^0.1.9", + "@lucide/svelte": "^0.554.0", "@playwright/test": "^1.49.1", "@sveltejs/adapter-node": "^5.2.12", "@sveltejs/kit": "^2.16.0", @@ -34,6 +35,7 @@ "@testing-library/jest-dom": "^6.6.3", "@testing-library/svelte": "^5.2.4", "@vitest/coverage-v8": "^3.2.4", + "clsx": "^2.1.1", "eslint": "^9.18.0", "eslint-config-prettier": "^10.0.1", "eslint-plugin-svelte": "^3.0.0", @@ -49,7 +51,10 @@ "svelte": "^5.0.0", "svelte-check": "^4.0.0", "svelte-exmarkdown": "^5.0.1", + "tailwind-merge": "^3.3.1", + "tailwind-variants": "^3.1.1", "tailwindcss": "^4.0.0", + "tw-animate-css": "^1.4.0", "typescript": "^5.0.0", "typescript-eslint": "^8.20.0", "vite": "^6.2.6", diff --git a/apps/frontend/src/lib/utils.ts b/apps/frontend/src/lib/utils.ts new file mode 100644 index 0000000..55b3a91 --- /dev/null +++ b/apps/frontend/src/lib/utils.ts @@ -0,0 +1,13 @@ +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export type WithoutChild = T extends { child?: any } ? Omit : T; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export type WithoutChildren = T extends { children?: any } ? Omit : T; +export type WithoutChildrenOrChild = WithoutChildren>; +export type WithElementRef = T & { ref?: U | null }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7d1431b..565be5e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: '@langchain/langgraph-sdk': specifier: ^0.1.9 version: 0.1.9(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(@opentelemetry/sdk-trace-base@2.0.1(@opentelemetry/api@1.9.0))) + '@lucide/svelte': + specifier: ^0.554.0 + version: 0.554.0(svelte@5.36.14) '@playwright/test': specifier: ^1.49.1 version: 1.54.1 @@ -68,6 +71,9 @@ importers: '@vitest/coverage-v8': specifier: ^3.2.4 version: 3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.1.0)(jiti@2.5.0)(jsdom@26.1.0)(lightningcss@1.30.1)) + clsx: + specifier: ^2.1.1 + version: 2.1.1 eslint: specifier: ^9.18.0 version: 9.31.0(jiti@2.5.0) @@ -113,9 +119,18 @@ importers: svelte-exmarkdown: specifier: ^5.0.1 version: 5.0.1(svelte@5.36.14) + tailwind-merge: + specifier: ^3.3.1 + version: 3.3.1 + tailwind-variants: + specifier: ^3.1.1 + version: 3.1.1(tailwind-merge@3.3.1)(tailwindcss@4.1.11) tailwindcss: specifier: ^4.0.0 version: 4.1.11 + tw-animate-css: + specifier: ^1.4.0 + version: 1.4.0 typescript: specifier: ^5.0.0 version: 5.8.3 @@ -589,6 +604,11 @@ packages: '@lix-js/server-protocol-schema@0.1.1': resolution: {integrity: sha512-jBeALB6prAbtr5q4vTuxnRZZv1M2rKe8iNqRQhFJ4Tv7150unEa0vKyz0hs8Gl3fUGsWaNJBh3J8++fpbrpRBQ==} + '@lucide/svelte@0.554.0': + resolution: {integrity: sha512-CM6wLEH8uk3WBpC42t8R0hF7SlQrsYEL6qGuXdB99xKZwKglpWmX5XgYu7FIYOCBYOyC1rm4dNhIe6uF9pOXqw==} + peerDependencies: + svelte: ^5 + '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -3126,6 +3146,9 @@ packages: tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} + tw-animate-css@1.4.0: + resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==} + type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} engines: {node: '>= 0.8.0'} @@ -3808,6 +3831,10 @@ snapshots: '@lix-js/server-protocol-schema@0.1.1': {} + '@lucide/svelte@0.554.0(svelte@5.36.14)': + dependencies: + svelte: 5.36.14 + '@nodelib/fs.scandir@2.1.5': dependencies: '@nodelib/fs.stat': 2.0.5 @@ -6551,6 +6578,8 @@ snapshots: tslib@2.8.1: {} + tw-animate-css@1.4.0: {} + type-check@0.4.0: dependencies: prelude-ls: 1.2.1 From 7c243b0c029cd9c1ca7bceb833d83fa727c41b47 Mon Sep 17 00:00:00 2001 From: Dhruv Date: Fri, 21 Nov 2025 22:31:52 +0530 Subject: [PATCH 2/5] formatting d'oh ! --- apps/frontend/src/lib/utils.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/frontend/src/lib/utils.ts b/apps/frontend/src/lib/utils.ts index 55b3a91..f92bfcb 100644 --- a/apps/frontend/src/lib/utils.ts +++ b/apps/frontend/src/lib/utils.ts @@ -1,13 +1,13 @@ -import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; +import { clsx, type ClassValue } from 'clsx'; +import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // eslint-disable-next-line @typescript-eslint/no-explicit-any -export type WithoutChild = T extends { child?: any } ? Omit : T; +export type WithoutChild = T extends { child?: any } ? Omit : T; // eslint-disable-next-line @typescript-eslint/no-explicit-any -export type WithoutChildren = T extends { children?: any } ? Omit : T; +export type WithoutChildren = T extends { children?: any } ? Omit : T; export type WithoutChildrenOrChild = WithoutChildren>; export type WithElementRef = T & { ref?: U | null }; From afca113a817c968bdeb652268a2efa3b00668c32 Mon Sep 17 00:00:00 2001 From: Dhruv Date: Wed, 3 Dec 2025 00:17:01 +0530 Subject: [PATCH 3/5] Extend tailwind css to support sdhcdn during migration --- apps/frontend/src/app.tailwind.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/frontend/src/app.tailwind.css b/apps/frontend/src/app.tailwind.css index a393ca3..ff05413 100644 --- a/apps/frontend/src/app.tailwind.css +++ b/apps/frontend/src/app.tailwind.css @@ -8,6 +8,7 @@ @custom-variant dark (&:where(.dark, .dark *)); @theme { + --color-primary: #ef562f; --color-primary-50: #fff5f2; --color-primary-100: #fff1ee; --color-primary-200: #ffe4de; @@ -19,6 +20,7 @@ --color-primary-800: #cc4522; --color-primary-900: #a5371b; + --color-secondary: #0284c7; --color-secondary-50: #f0f9ff; --color-secondary-100: #e0f2fe; --color-secondary-200: #bae6fd; From 1961e3453867072d15e62fb5a6f8385c03d99071 Mon Sep 17 00:00:00 2001 From: Dhruv Date: Wed, 3 Dec 2025 00:28:11 +0530 Subject: [PATCH 4/5] Added Semantic foreground colors for text --- apps/frontend/src/app.tailwind.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/frontend/src/app.tailwind.css b/apps/frontend/src/app.tailwind.css index ff05413..77c6d7f 100644 --- a/apps/frontend/src/app.tailwind.css +++ b/apps/frontend/src/app.tailwind.css @@ -31,6 +31,10 @@ --color-secondary-700: #0369a1; --color-secondary-800: #075985; --color-secondary-900: #0c4a6e; + + /* Semantic foreground colors for text on colored backgrounds */ + --color-primary-foreground: #ffffff; + --color-secondary-foreground: #ffffff; } @source "../node_modules/flowbite-svelte/dist"; From 0dc757315ae96147963edeada98ada73fcd3e417 Mon Sep 17 00:00:00 2001 From: pymeerkat Date: Fri, 5 Dec 2025 20:59:14 +0530 Subject: [PATCH 5/5] Migrate button component slg 55 (#136) * Added Button * Migrate LanguageSwitcher * Update LanguageSwitcher.svelte * Migrate SignInButton * Migrate SubmitButton * Squashed commit of the following: commit 1961e3453867072d15e62fb5a6f8385c03d99071 Author: Dhruv Date: Wed Dec 3 00:28:11 2025 +0530 Added Semantic foreground colors for text * Migrate Signin Button - LoginModule * Migrate HomePage Buttons * Update +page.svelte * Update +page.svelte * Migrate Avatar Button * Migrate UserMessageAction Edit button * Migrate CharError Retry button * Migrate Feedback buttons * Migrate AIMsgAction Regenerate button * Patched Error * Sign-in Button tag issue fixed * Fixed "VibeCode slop" --- .../lib/auth/components/SignInButton.svelte | 6 +- .../lib/components/AIMessageActions.svelte | 9 +- .../lib/components/ChatErrorMessage.svelte | 7 +- .../src/lib/components/FeedbackButtons.svelte | 20 +++-- .../lib/components/LanguageSwitcher.svelte | 6 +- .../src/lib/components/LoginModal.svelte | 16 ++-- .../src/lib/components/SubmitButton.svelte | 6 +- .../lib/components/UserMessageActions.svelte | 13 +-- .../lib/components/ui/button/button.svelte | 82 +++++++++++++++++++ .../src/lib/components/ui/button/index.ts | 17 ++++ apps/frontend/src/routes/+layout.svelte | 12 +-- apps/frontend/src/routes/+page.svelte | 10 +-- 12 files changed, 154 insertions(+), 50 deletions(-) create mode 100644 apps/frontend/src/lib/components/ui/button/button.svelte create mode 100644 apps/frontend/src/lib/components/ui/button/index.ts diff --git a/apps/frontend/src/lib/auth/components/SignInButton.svelte b/apps/frontend/src/lib/auth/components/SignInButton.svelte index a8d8cd5..26e924d 100644 --- a/apps/frontend/src/lib/auth/components/SignInButton.svelte +++ b/apps/frontend/src/lib/auth/components/SignInButton.svelte @@ -1,9 +1,11 @@ - + diff --git a/apps/frontend/src/lib/components/AIMessageActions.svelte b/apps/frontend/src/lib/components/AIMessageActions.svelte index 3ad372d..9398dbb 100644 --- a/apps/frontend/src/lib/components/AIMessageActions.svelte +++ b/apps/frontend/src/lib/components/AIMessageActions.svelte @@ -1,5 +1,6 @@ - diff --git a/apps/frontend/src/lib/components/LoginModal.svelte b/apps/frontend/src/lib/components/LoginModal.svelte index b5d6519..97c405f 100644 --- a/apps/frontend/src/lib/components/LoginModal.svelte +++ b/apps/frontend/src/lib/components/LoginModal.svelte @@ -19,11 +19,15 @@ -
- -

- {m.login_modal_message()} -

- +
+
+ +

+ {m.login_modal_message()} +

+
+
+ +
diff --git a/apps/frontend/src/lib/components/SubmitButton.svelte b/apps/frontend/src/lib/components/SubmitButton.svelte index be09de8..a3f82e6 100644 --- a/apps/frontend/src/lib/components/SubmitButton.svelte +++ b/apps/frontend/src/lib/components/SubmitButton.svelte @@ -1,6 +1,7 @@ + + + +{#if href} + + {@render children?.()} + +{:else} + +{/if} diff --git a/apps/frontend/src/lib/components/ui/button/index.ts b/apps/frontend/src/lib/components/ui/button/index.ts new file mode 100644 index 0000000..5414d9d --- /dev/null +++ b/apps/frontend/src/lib/components/ui/button/index.ts @@ -0,0 +1,17 @@ +import Root, { + type ButtonProps, + type ButtonSize, + type ButtonVariant, + buttonVariants +} from './button.svelte'; + +export { + Root, + type ButtonProps as Props, + // + Root as Button, + buttonVariants, + type ButtonProps, + type ButtonSize, + type ButtonVariant +}; diff --git a/apps/frontend/src/routes/+layout.svelte b/apps/frontend/src/routes/+layout.svelte index 240b7f4..eb85cd8 100644 --- a/apps/frontend/src/routes/+layout.svelte +++ b/apps/frontend/src/routes/+layout.svelte @@ -12,7 +12,6 @@ SunSolid } from 'flowbite-svelte-icons'; import { - Button, Navbar, NavBrand, NavLi, @@ -23,6 +22,7 @@ DropdownDivider, Avatar } from 'flowbite-svelte'; + import { Button } from '$lib/components/ui/button'; import { ModeWatcher, toggleMode, mode } from 'mode-watcher'; @@ -44,12 +44,8 @@
{#if page.data.session} -
diff --git a/apps/frontend/src/routes/+page.svelte b/apps/frontend/src/routes/+page.svelte index 1d1de89..e08ae0c 100644 --- a/apps/frontend/src/routes/+page.svelte +++ b/apps/frontend/src/routes/+page.svelte @@ -1,6 +1,6 @@ @@ -22,14 +22,14 @@ class="mb-8 flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4 lg:mb-16" > - -