Skip to content

Conversation

@bjoaquinc
Copy link
Contributor

@bjoaquinc bjoaquinc commented Jun 19, 2025

📝 Summary

Added a footer with mode and model dropdowns. Updated the Settings button to an icon on the right side

Screenshot 2025-06-19 at 1 11 14 AM

🔍 Description of Changes

  • Added footer in chat input (see image):
    • Added mode dropdown with two options: ask and manual (Commented out until we add tools for ask mode)
    • Added a model dropdown for easy updating and visibility
    • Added send button that also functions as stop button while the LLM is generating text
  • Changed the ai settings button to an icon on the right side (see image)

Next PR: Set up /tool endpoint and call it from the onToolCall() function in chat-panel.tsx

📋 Checklist

  • I have read the contributor guidelines.
  • For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
  • I have added tests for the changes made.
  • I have run the code and verified that it works as expected.

📜 Reviewers

@mscolnick

@vercel
Copy link

vercel bot commented Jun 19, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
marimo-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 19, 2025 7:10pm

PlusIcon,
SendIcon,
Settings,
Square,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super nit: i try to add *Icon instead (e.g. SquareIcon) because they always conflict with other components

icon={<BotMessageSquareIcon />}
/>
)}
{chats.map((chat) => (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe its fixed now, but last i opened this, the chat item in the history did not extend the full width. just wanted to callout in case you saw the same

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I noticed that after one of your previous commits the chat history got wider

Screenshot 2025-06-19 at 2 29 24 PM

Is this what you were referring to?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yea exactly. it would be nice to be a single column list (and not centered). im not sure what happened.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

feel free to design as you see fit too

Copy link
Contributor Author

@bjoaquinc bjoaquinc Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright so i changed the following:

  • Ordered the chats from newest - oldest rather than oldest - newest
  • Made each chat full width and aligned left
  • Updated the title creation to only add ... if the first message is cut short, also increased the characters from 30 to 50 to fill up the new width better
Screenshot 2025-06-19 at 3 01 31 PM

</SelectContent>
</Select> */}
<Select value={currentModel} onValueChange={handleModelChange}>
<SelectTrigger className="h-6 text-xs border-0 bg-transparent hover:bg-muted/30 focus:ring-0 focus:shadow-none py-0 px-2 gap-1">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion to make it clearer h-6 text-xs border-border !shadow-none !ring-0 bg-muted

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Way better! thanks. Especially this: !shadow-none

@mscolnick mscolnick merged commit cddaef3 into marimo-team:main Jun 19, 2025
19 of 20 checks passed
@bjoaquinc bjoaquinc deleted the chat-panel-ui branch June 22, 2025 04:53
sebbeutler pushed a commit to sebbeutler/marimo that referenced this pull request Jun 28, 2025
…marimo-team#5354)

## 📝 Summary

<!--
Provide a concise summary of what this pull request is addressing.

If this PR fixes any issues, list them here by number (e.g., Fixes
marimo-team#123).
-->

Added a footer with mode and model dropdowns. Updated the Settings
button to an icon on the right side

<img width="434" alt="Screenshot 2025-06-19 at 1 11 14 AM"
src="https://github.com/user-attachments/assets/2ca46d04-98eb-4173-a4c5-f1e2235624d9"
/>


## 🔍 Description of Changes

<!--
Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->
- Added footer in chat input (see image):
- Added mode dropdown with two options: **ask** and **manual**
(Commented out until we add tools for ask mode)
    - Added a model dropdown for easy updating and visibility
- Added send button that also functions as stop button while the LLM is
generating text
- Changed the ai settings button to an icon on the right side (see
image)

Next PR: Set up /tool endpoint and call it from the onToolCall()
function in chat-panel.tsx

## 📋 Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [x] I have run the code and verified that it works as expected.

## 📜 Reviewers

<!--
Tag potential reviewers from the community or maintainers who might be
interested in reviewing this pull request.

Your PR will be reviewed more quickly if you can figure out the right
person to tag with @ -->

@mscolnick
sebbeutler pushed a commit to sebbeutler/marimo that referenced this pull request Jul 7, 2025
…marimo-team#5354)

## 📝 Summary

<!--
Provide a concise summary of what this pull request is addressing.

If this PR fixes any issues, list them here by number (e.g., Fixes
marimo-team#123).
-->

Added a footer with mode and model dropdowns. Updated the Settings
button to an icon on the right side

<img width="434" alt="Screenshot 2025-06-19 at 1 11 14 AM"
src="https://github.com/user-attachments/assets/2ca46d04-98eb-4173-a4c5-f1e2235624d9"
/>


## 🔍 Description of Changes

<!--
Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->
- Added footer in chat input (see image):
- Added mode dropdown with two options: **ask** and **manual**
(Commented out until we add tools for ask mode)
    - Added a model dropdown for easy updating and visibility
- Added send button that also functions as stop button while the LLM is
generating text
- Changed the ai settings button to an icon on the right side (see
image)

Next PR: Set up /tool endpoint and call it from the onToolCall()
function in chat-panel.tsx

## 📋 Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [x] I have run the code and verified that it works as expected.

## 📜 Reviewers

<!--
Tag potential reviewers from the community or maintainers who might be
interested in reviewing this pull request.

Your PR will be reviewed more quickly if you can figure out the right
person to tag with @ -->

@mscolnick
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants