Style improve fe layout and interaction
this PR includes:
- extract the global style vars for consistent style.
- Integrate configuration in the same place(Setting Modal). And cache the user configuration in the local storage (user doesn't need to select every time)
- unify the color, especially the bg color.
- change almost all .css to Tailwind.
👍 Will take a closer look, maybe need to resolve the conflict.
This looks fantastic! A few comments:
- We should reduce the number of UI libraries. We currently use DaisyUI and this PR adds both NextUI and Ant Design. Using 3 UI libraries reduces consistency and increases bundle size. I don't think we use a lot of DaisyUI so the easiest way to do this might be to remove DaisyUI and use NextUI components instead.
- We'll want cache invalidation when the list of models/agents changes.
- IMO the settings component takes too many props.
(2) and (3) are low-priority but we should really address (1)
agree, we should keep as few third-party dependencies as possible.
agree, i've just thought the daisyui is too "raw" to me~ so I import the nextui and antd for quickly dev, but i think keep one is okay, cuz i like the input of nextui and select of antd 😅
This looks fantastic! A few comments:
- We should reduce the number of UI libraries. We currently use DaisyUI and this PR adds both NextUI and Ant Design. Using 3 UI libraries reduces consistency and increases bundle size. I don't think we use a lot of DaisyUI so the easiest way to do this might be to remove DaisyUI and use NextUI components instead.
- We'll want cache invalidation when the list of models/agents changes.
- IMO the settings component takes too many props.
(2) and (3) are low-priority but we should really address (1)
- yes, as i said above, i think nextui more faster for developing. it makes sense to switch to nextui.
- sure, i just realized a basic function.
- haha, i also think so, i can move these inside to components.
@yimothysu i've just updated the PR, modified includes:
- remove daisyui, switch to nextui and antd;
- reduce the props of Workspace component;
- adjust style of chat bubble and workspace tabs.
Screenshot is here:
At first glance, it doesn't seem like we should be using both nextui and antd. Is there any reason you can't use just one of those?
(UI improvements look great btw!)
At first glance, it doesn't seem like we should be using both nextui and antd. Is there any reason you can't use just one of those?
yes, but as I said before, the antd has more convenient components that nextui doesn't have, which can let us iterate more faster. But we can convergence in the future, I think it's priority not too high right now
Having been through this before--it's very hard to rip out a UI framework once people start using it.
I defer to the frontend folks, but IMO we should standardize on a single component framework from day 1
Having been through this before--it's very hard to rip out a UI framework once people start using it.
I defer to the frontend folks, but IMO we should standardize on a single component framework from day 1
I completely agree with @rbren's suggestion about using a single UI library from day one. What do you think about adopting shadcn? It integrates seamlessly with Tailwind, which we're already using, making it an excellent pairing.
i removed the antd, currently all in nextui