Sahaj Jain 2548f49de1 ai chat (#107)
* Enhanced Editor (#100)

* refactor: editor page to improve responsiveness

* feat: add editor tab persistance to url

* chore: clean up classNames

* feat: enhance theme color-preview to make it responsive

* feat: add ai chat tab working with local state

* successful responses return a theme color-preview
* error responses return a generic message

* fix: invalid tabs fallback to default tab "colors"

* fix: remove messages scroll animation on tabs change and remove duplicate preview

* fix: minor fixes in classNames

* feat: Chat starts with a default message

* refactor: Enhance editor controls and toolbar buttons to disable when generating theme

- Updated button components to be extendible.
- Refactored buttons to utilize TooltipWrapper for consistent tooltip behavior.

* fix: sync controls tabs by 'value' instead of 'defaultValue'

* fix: load messages from local storage, otherwise set a default initial message

* fix: editor mention list positions correctly and add a tab handler for selecting mention

* fix: build errors due to unused imports

* chore: improve defaults and styles for ai chat interface and editor

* refactor: move AIChat state management to a zustand store

* feat: preserve control tab between edit mode and traditional editor mode

* feat: reset ai chat on editor reset button click

* feat: load chat messages dynamically to avoid layout shifts due to local storage

* fix: Use const id for default ai message to avoid re-render

* fix: Use searchParams for callback url as well after auth

* refactor: Remove unused getEditorConfig code

* feat: Only have 1 handler per postlogin action type

This was causing issues in AI Chat form. AI_GENERATE_FROM_CHAT action
was being scheduled twice because of re-render (caused by lazy-loaded
component)

* fix: Add user message for post login action

* refactor: Only use JSONContent in application state (derive textContent from it)

* feat: Auto-attach current theme to prompt after 1st user message

* feat: clean up AI interface and add community themes section

* feat: AI entrypoint redirect to main Editor and trigger theme generation

* chore: improve styles on ai page

* refactor: clean up AI components components from AI page and Editor page

* refactor: share repeated theme generation logic

* fix: chat messages inconsistent padding and pill buttons disabled state

* fix: build error

* feat: remove AI Generation Dialog and related logic

* feat: show agent response about the theme

* refactor: simplify theme generation logic and improve error handling

* refactor: transition from JSONContent to AIPromptData for theme generation

* feat: add retry functionality for user messages in AI chat interface

* refactor: remove unused loading fallback component and integrate loading indicator in chat messages

* change position of retry button

* feat: Improve system prompt

* refactor: replace createCurrentThemePrompt with attachCurrentThemeMention for improved prompt handling

* feat: add a placeholder for new chat and fix chat area styles

* chore: hide Community themes from AI page

* fix: build errors

* fix: ai theme generation only happens when there is content to be sent as the prompt

* feat: show AI tab in production

* fix: Early return after showing error message in ai chat

* feat: Attach last generated message instead of current theme for chat

* Use @ mentions in example prompts

* Enhance mention rendering in AI prompts and update mention styles in CSS

* skip posthog on dev

* Enhanced Editor (#100)

* refactor: editor page to improve responsiveness

* feat: add editor tab persistance to url

* chore: clean up classNames

* feat: enhance theme color-preview to make it responsive

* feat: add ai chat tab working with local state

* successful responses return a theme color-preview
* error responses return a generic message

* fix: invalid tabs fallback to default tab "colors"

* fix: remove messages scroll animation on tabs change and remove duplicate preview

* fix: minor fixes in classNames

* feat: Chat starts with a default message

* refactor: Enhance editor controls and toolbar buttons to disable when generating theme

- Updated button components to be extendible.
- Refactored buttons to utilize TooltipWrapper for consistent tooltip behavior.

* fix: sync controls tabs by 'value' instead of 'defaultValue'

* fix: load messages from local storage, otherwise set a default initial message

* fix: editor mention list positions correctly and add a tab handler for selecting mention

* fix: build errors due to unused imports

* chore: improve defaults and styles for ai chat interface and editor

* refactor: move AIChat state management to a zustand store

* feat: preserve control tab between edit mode and traditional editor mode

* feat: reset ai chat on editor reset button click

* feat: load chat messages dynamically to avoid layout shifts due to local storage

* fix: Use const id for default ai message to avoid re-render

* fix: Use searchParams for callback url as well after auth

* refactor: Remove unused getEditorConfig code

* feat: Only have 1 handler per postlogin action type

This was causing issues in AI Chat form. AI_GENERATE_FROM_CHAT action
was being scheduled twice because of re-render (caused by lazy-loaded
component)

* fix: Add user message for post login action

* refactor: Only use JSONContent in application state (derive textContent from it)

* feat: Auto-attach current theme to prompt after 1st user message

* feat: clean up AI interface and add community themes section

* feat: AI entrypoint redirect to main Editor and trigger theme generation

* chore: improve styles on ai page

* refactor: clean up AI components components from AI page and Editor page

* refactor: share repeated theme generation logic

* fix: chat messages inconsistent padding and pill buttons disabled state

* fix: build error

* feat: remove AI Generation Dialog and related logic

* feat: show agent response about the theme

* refactor: simplify theme generation logic and improve error handling

* refactor: transition from JSONContent to AIPromptData for theme generation

* feat: add retry functionality for user messages in AI chat interface

* refactor: remove unused loading fallback component and integrate loading indicator in chat messages

* change position of retry button

* feat: Improve system prompt

* refactor: replace createCurrentThemePrompt with attachCurrentThemeMention for improved prompt handling

* feat: add a placeholder for new chat and fix chat area styles

* chore: hide Community themes from AI page

* fix: build errors

* fix: ai theme generation only happens when there is content to be sent as the prompt

* feat: show AI tab in production

* fix: Early return after showing error message in ai chat

* feat: Attach last generated message instead of current theme for chat

* Use @ mentions in example prompts

* Enhance mention rendering in AI prompts and update mention styles in CSS

* fix: missing fade effect on chat messages scroll area and overflow in placeholder buttons

* feat: add user name from session to the chat placeholder component

* feat: Improve system prompt context

* chore: remove unnecessary context from example prompts

* feat: Enhance mention list with auto-scroll functionality and update prompt structures in no-messages placeholder

* feat: Add character limit for AI prompt input and integrate character count extension

* fix: Simplify prompt data handling in AI chat component and adjust textarea behavior during AI generation

* fix: Update theme state handling to include current mode in editor store

* chore: improve styles for consistency

* feat: add fun prompts to chat placeholder

* feat: add typography demo to preview panel

* feat: add responsive cards demo based on shadcn showcase

* fix: typography demo scroll area

* fix: build errors due to components refactor

* fix: wrap typography demo in ExamplesPreviewContainer

* feat: change default theme to match shadcn/ui default

* chore: move some theme previews into a dropdown to keep ui clean

---------

Co-authored-by: Luis Llanes <137589205+llanesluis@users.noreply.github.com>
Co-authored-by: Luis Llanes <luisllaboj@gmail.com>
2025-05-31 20:08:53 +05:30
2025-05-09 01:57:43 +05:30
2025-05-31 20:08:53 +05:30
2025-05-24 03:26:03 +05:30
2025-05-31 20:08:53 +05:30
2025-05-31 20:08:53 +05:30
2025-04-25 23:32:45 +05:30
2025-05-31 20:08:53 +05:30
2025-05-31 20:08:53 +05:30
2025-05-31 20:08:53 +05:30
2025-05-01 01:00:16 +05:30
2025-05-31 20:08:53 +05:30
2025-05-31 20:08:53 +05:30
2025-05-31 20:08:53 +05:30
2025-05-23 13:49:02 +05:30
2025-05-06 17:15:05 +05:30
2025-04-25 23:32:45 +05:30
2025-04-17 16:01:10 +05:30
2025-04-23 18:52:58 +05:30
2025-05-02 03:24:18 +05:30
2025-05-31 20:08:53 +05:30
2025-05-31 20:08:53 +05:30
2025-05-23 23:15:39 +05:30
2025-05-02 02:35:02 +05:30
2025-04-25 23:32:45 +05:30

tweakcn.com


tweakcn is a powerful Visual Theme Editor for tailwind CSS & shadcn/ui components. It comes with Beautiful theme presets to get started, while aiming to offer advanced customisation for each aspect of your UI

tweakcn.com

Motivation

Websites made with shadcn/ui famously look the same. tweakcn is a tool that helps you customize shadcn/ui components visually, to make your components stand-out. The goal is to build a platform where a user can discover endless customization options and then have the ability to put their own twist on it. Check our roadmap for more information

Current Features

You can find the full feature list here: https://tweakcn.com/#features

Roadmap

You can find the updated roadmap here: https://tweakcn.com/#roadmap

Run Locally

IMPORTANT: For contributions, please see CONTRIBUTING.md.

Prerequisites

  • Node.js 18+
  • npm / yarn / pnpm

Installation

  1. Clone the repository:
git clone https://github.com/jnsahaj/tweakcn.git
cd tweakcn
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open http://localhost:3000 in your browser.

Contributors

Made with contrib.rocks.

Interested in Contributing?

Contributions are welcome! Please feel free to submit a Pull Request.

Star History

GitHub Star History for jnsahaj/tweakcn

S
Description
A visual no-code theme editor for shadcn/ui components
Readme Apache-2.0 94 MiB
Languages
TypeScript 98.7%
JavaScript 0.9%
CSS 0.4%