feat: @llamaindex/chat-ui components #1
Conversation
| <div | ||
| ref={scrollableChatContainerRef} | ||
| className={cn( | ||
| 'relative flex-1 overflow-y-auto rounded-xl bg-white p-4 shadow-xl', |
There was a problem hiding this comment.
the components still contain a lot of styling compared to the radix primitives. e.g. here how could a user not use rounded-xl or shadow-xl?
There was a problem hiding this comment.
They can custom style of ChatMessages like this:
<ChatMessages className="rounded-none shadow-none" />
There was a problem hiding this comment.
the components still contain a lot of styling compared to the radix primitives
Yes, actually we can remove css like border, shadow, background, color. But I think we should let these default styles like Shadcn do for their components (eg. Shadcn Button has color and rounded corner).
There was a problem hiding this comment.
AFAIK shadcn just provides styling templates of style-less radix components. So the shadcn button is styled here https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/button.tsx but it uses the unstyled slot here: https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
There was a problem hiding this comment.
therefore shadcn code is to be copied (because it contains all the style) and then the user can modify it as wanted
There was a problem hiding this comment.
so, from my understanding, we have two options:
- keep it as is: as a result, there will be some default styling in this package
- remove styling completely and move the style to the code generated by create-llama
There was a problem hiding this comment.
Yes, I think we should remove unnecessary styling like: rounded-xl bg-white p-4 shadow-xl and put them in then generated code of create-llama.
The position or layout styling (relative flex ...) is important so we can keep them in this package
There was a problem hiding this comment.
Sounds good for me!
There was a problem hiding this comment.
@elviskahoro, what are your thoughts on re-using these components in Reflex?
packages/chat-ui/src/styles.css
Outdated
| @@ -3,7 +3,7 @@ | |||
| @tailwind utilities; | |||
|
|
|||
| @layer base { | |||
| :root { | |||
| .llamaindex-chat-ui { | |||
There was a problem hiding this comment.
can we inline this? then the user does not need to import style.css
README.md
Outdated
| import { useChatInput } from '@llamaindex/chat-ui' | ||
|
|
||
| const LlamaCloudSelector = () => { | ||
| const { data, setData } = useChat() |
There was a problem hiding this comment.
update with changes of example above
README.md
Outdated
| Or you can extend them with your own children components and styles: | ||
|
|
||
| ```tsx | ||
| import '@llamaindex/chat-ui/styles.css' |
There was a problem hiding this comment.
| import '@llamaindex/chat-ui/styles.css' |
| @@ -0,0 +1,27 @@ | |||
| .llamaindex-chat-ui { | |||
There was a problem hiding this comment.
aren't the shadcn components just using :root? so we do we need a own namespace here?
No description provided.