-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Sidebar history Section #50
Conversation
cf2d7c6
to
3b97558
Compare
Signed-off-by: Sauradip Ghosh <[email protected]>
Signed-off-by: Sauradip Ghosh <[email protected]>
Signed-off-by: Sauradip Ghosh <[email protected]>
Signed-off-by: Sauradip Ghosh <[email protected]>
90b84b5
to
b1a160c
Compare
Signed-off-by: Sauradip Ghosh <[email protected]>
Signed-off-by: Sauradip Ghosh <[email protected]>
</Button> | ||
</DropdownMenuTrigger> | ||
<DropdownMenuContent className="w-56"> | ||
<DropdownMenuSeparator /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Dont need this.
> | ||
<Pin className="mr-2" /> Pin | ||
</DropdownMenuCheckboxItem> | ||
<button className="p-[7px] flex flex-rowtext-left w-full hover:bg-hover-blue border-none hover:border-none "> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think these can be Link
instead.
@@ -24,6 +24,7 @@ const config = { | |||
extend: { | |||
colors: { | |||
border: 'hsl(var(--border))', | |||
'hover-blue': '#f1f5f9', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove this, just use a lighter shade of whatever is available.
useEffect(() => { | ||
setButtonClass( | ||
`rounded-full flex-shrink-0 transition-opacity duration-200 ${ | ||
message.content.trim() | ||
? 'opacity-100' | ||
: 'opacity-50' | ||
}` | ||
); | ||
}, [message.content]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You could instead use a disabled variable. Makes it easier when you extend it with global state.
@@ -111,9 +124,10 @@ const ChatBottomBar = ({ onSend }: Props) => { | |||
<Button | |||
size="icon" | |||
variant="default" | |||
className="rounded-full flex-shrink-0" | |||
className={buttonClass} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And the styling logic moves here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note: You can use cn()
from utils
.
</span> | ||
</button> | ||
|
||
<button className="p-[7px] flex flex-rowtext-left w-full hover:bg-hover-blue border-none hover:border-none "> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This too.
Signed-off-by: Sauradip Ghosh <[email protected]>
Signed-off-by: Sauradip Ghosh <[email protected]>
Summary:
Truncated Display for History Titles
Added a feature to truncate titles in the Sidebar History component.
Introduced a truncate Title helper function to limit the title length to 17 characters and append an ellipsis if necessary.
Added a historyData.ts file to provide mock data for testing and development.
Dynamic Opacity for Send Button :-
Ensure that the send button in the
ChatBottomBar
component appears with50%
opacity when the input field is empty.Verify that the opacity changes to
100%
when the input field is not empty.Confirm that the button is disabled when no text is entered and enabled when text is present.
Backend Integration:
Screencast.from.2024-08-12.23-34-52.mp4