Public/kotaemon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add toggle dark mode button on main Chat UI (#423)

Browse Source 
* feat: add toggle dark mode button on main UI

* docs: update docs
This commit is contained in:
Tuan Anh Nguyen Dang (Tadashi_Cin) 2024-10-22 18:48:18 +07:00 committed by GitHub
parent 764fe595f4
commit f2f192ed72
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 41 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/about.md
View File

@ -4,7 +4,7 @@ An open-source tool for chatting with your documents. Built with both end users
developers in mind. developers in mind.
[Source Code](https://github.com/Cinnamon/kotaemon) | [Source Code](https://github.com/Cinnamon/kotaemon) |
[Live Demo](https://huggingface.co/spaces/lone17/kotaemon-app) [Live Demo](https://huggingface.co/spaces/cin-model/kotaemon-demo)
[User Guide](https://cinnamon.github.io/kotaemon/) | [User Guide](https://cinnamon.github.io/kotaemon/) |
[Developer Guide](https://cinnamon.github.io/kotaemon/development/) | [Developer Guide](https://cinnamon.github.io/kotaemon/development/) |

8
libs/ktem/ktem/assets/css/main.css
View File

@ -102,7 +102,7 @@ button.selected {
} }
mark { mark {
background-color: #1496bb; background-color: #10b981;
} }
/* clpse */ /* clpse */
@ -157,6 +157,12 @@ mark {
display: block !important; display: block !important;
} }
#toggle-dark-button {
position: fixed;
top: 6px;
right: 40px;
}
.scrollable { .scrollable {
overflow-y: auto; overflow-y: auto;
} }

13
libs/ktem/ktem/assets/icons/dark_mode.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="800px" height="800px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<title>ic_fluent_dark_theme_24_regular</title>
<desc>Created with Sketch.</desc>
<g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ic_fluent_dark_theme_24_regular" fill="#cecece" fill-rule="nonzero">
<path d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,20.5 L12,3.5 C16.6944204,3.5 20.5,7.30557963 20.5,12 C20.5,16.6944204 16.6944204,20.5 12,20.5 Z" id="🎨-Color">
</path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 855 B

2
libs/ktem/ktem/assets/md/about.md
View File

@ -3,7 +3,7 @@
An open-source tool for you to chat with your documents. An open-source tool for you to chat with your documents.
[Source Code](https://github.com/Cinnamon/kotaemon) | [Source Code](https://github.com/Cinnamon/kotaemon) |
[Demo](https://huggingface.co/spaces/lone17/kotaemon-app) [Demo](https://huggingface.co/spaces/cin-model/kotaemon-demo)
[User Guide](https://cinnamon.github.io/kotaemon/) | [User Guide](https://cinnamon.github.io/kotaemon/) |
[Developer Guide](https://cinnamon.github.io/kotaemon/development/) | [Developer Guide](https://cinnamon.github.io/kotaemon/development/) |

20
libs/ktem/ktem/pages/chat/control.py
View File

@ -38,7 +38,25 @@ class ConversationControl(BasePage):
self.on_building_ui() self.on_building_ui()
def on_building_ui(self): def on_building_ui(self):
gr.Markdown("## Conversations") with gr.Row():
gr.Markdown("## Conversations")
self.btn_toggle_dark_mode = gr.Button(
value="",
icon=f"{ASSETS_DIR}/dark_mode.svg",
scale=1,
size="sm",
elem_classes=["no-background", "body-text-color"],
elem_id="toggle-dark-button",
)
self.btn_toggle_dark_mode.click(
None,
js="""
() => {
document.body.classList.toggle('dark');
}
""",
)
self.conversation_id = gr.State(value="") self.conversation_id = gr.State(value="")
self.conversation = gr.Dropdown( self.conversation = gr.Dropdown(
label="Chat sessions", label="Chat sessions",