Skip to content

Commit 620862e

Browse files
TMHSDigitalTMHSDigital
committed
Refactor web.py and enhance chat.html for tool integration and settings management
- Refactored `web.py` to improve client initialization and added a new endpoint for saving API keys to the `.env` file. - Introduced a tool panel in `chat.html` for managing tool settings and API keys, allowing users to toggle tools and input their API keys. - Enhanced the settings modal to include tabs for general settings and tool configurations, improving user experience. - Added JavaScript functions for loading and saving tool settings using localStorage, ensuring a seamless user interface. - Updated CSS styles for the tool panel and settings modal to enhance visual appeal and usability.
1 parent b779667 commit 620862e

3 files changed

Lines changed: 873 additions & 9 deletions

File tree

‎src/deepseek_wrapper/static/style.css‎

Lines changed: 367 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -703,4 +703,371 @@ main.chat-container + form#chat-form {
703703
form#chat-form + form#upload-form {
704704
border-top: 1px dashed var(--border-color); /* Dashed line to separate upload form */
705705
padding-top: 0.75em;
706+
}
707+
708+
/* Tool Panel Styles */
709+
.tool-panel {
710+
position: fixed;
711+
left: 0;
712+
top: 56px; /* Match header height */
713+
bottom: 0;
714+
width: 250px;
715+
background-color: var(--bg-content-area);
716+
border-right: 1px solid var(--border-color);
717+
display: flex;
718+
flex-direction: column;
719+
z-index: 100;
720+
transition: transform 0.3s ease-in-out;
721+
overflow-y: auto;
722+
}
723+
724+
.tool-panel.collapsed {
725+
transform: translateX(-100%);
726+
}
727+
728+
.tool-panel-header {
729+
display: flex;
730+
justify-content: space-between;
731+
align-items: center;
732+
padding: 1rem;
733+
border-bottom: 1px solid var(--border-color);
734+
}
735+
736+
.tool-panel-header h2 {
737+
font-size: 1rem;
738+
font-weight: 600;
739+
margin: 0;
740+
}
741+
742+
.collapse-btn {
743+
background: transparent;
744+
border: none;
745+
color: var(--text-secondary);
746+
cursor: pointer;
747+
padding: 0.25rem;
748+
display: flex;
749+
align-items: center;
750+
justify-content: center;
751+
border-radius: var(--radius-sm);
752+
}
753+
754+
.collapse-btn:hover {
755+
background-color: color-mix(in srgb, var(--primary) 10%, transparent);
756+
color: var(--primary);
757+
}
758+
759+
.tool-sections {
760+
flex: 1;
761+
overflow-y: auto;
762+
padding: 0.5rem 0;
763+
}
764+
765+
.tool-section {
766+
margin-bottom: 1rem;
767+
}
768+
769+
.tool-section h3 {
770+
font-size: 0.8rem;
771+
font-weight: 600;
772+
color: var(--text-secondary);
773+
padding: 0 1rem;
774+
margin: 0.5rem 0;
775+
text-transform: uppercase;
776+
}
777+
778+
.tool-list {
779+
display: flex;
780+
flex-direction: column;
781+
gap: 0.25rem;
782+
}
783+
784+
.tool-item {
785+
display: flex;
786+
align-items: center;
787+
padding: 0.625rem 1rem;
788+
cursor: pointer;
789+
border-radius: 0;
790+
transition: background-color 0.2s;
791+
}
792+
793+
.tool-item:hover {
794+
background-color: color-mix(in srgb, var(--primary) 8%, transparent);
795+
}
796+
797+
.tool-item.active {
798+
background-color: color-mix(in srgb, var(--primary) 15%, transparent);
799+
}
800+
801+
.tool-icon {
802+
display: flex;
803+
align-items: center;
804+
justify-content: center;
805+
width: 32px;
806+
height: 32px;
807+
border-radius: var(--radius-sm);
808+
background-color: color-mix(in srgb, var(--primary) 10%, transparent);
809+
color: var(--primary);
810+
margin-right: 0.75rem;
811+
flex-shrink: 0;
812+
}
813+
814+
.tool-details {
815+
display: flex;
816+
flex-direction: column;
817+
flex: 1;
818+
}
819+
820+
.tool-name {
821+
font-weight: 500;
822+
font-size: 0.875rem;
823+
color: var(--text-primary);
824+
}
825+
826+
.tool-description {
827+
font-size: 0.75rem;
828+
color: var(--text-secondary);
829+
margin-top: 0.125rem;
830+
}
831+
832+
.toggle-panel-btn-container {
833+
padding: 0.75rem;
834+
border-top: 1px solid var(--border-color);
835+
}
836+
837+
.toggle-panel-btn {
838+
width: 100%;
839+
background-color: transparent;
840+
border: 1px solid var(--border-color);
841+
color: var(--text-secondary);
842+
padding: 0.5rem;
843+
border-radius: var(--radius-md);
844+
cursor: pointer;
845+
display: flex;
846+
align-items: center;
847+
justify-content: center;
848+
}
849+
850+
.toggle-panel-btn:hover {
851+
background-color: color-mix(in srgb, var(--primary) 5%, transparent);
852+
color: var(--primary);
853+
}
854+
855+
.expand-tools-btn {
856+
position: fixed;
857+
left: 0;
858+
top: 50%;
859+
transform: translateY(-50%);
860+
background-color: var(--bg-content-area);
861+
border: 1px solid var(--border-color);
862+
border-left: none;
863+
color: var(--text-secondary);
864+
padding: 0.625rem 0.5rem;
865+
border-radius: 0 var(--radius-md) var(--radius-md) 0;
866+
cursor: pointer;
867+
display: flex;
868+
align-items: center;
869+
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
870+
z-index: 99;
871+
display: none; /* Hidden by default, shown when panel is collapsed */
872+
}
873+
874+
.expand-tools-btn span {
875+
display: none;
876+
margin-left: 0.375rem;
877+
font-size: 0.875rem;
878+
font-weight: 500;
879+
}
880+
881+
.expand-tools-btn:hover {
882+
background-color: color-mix(in srgb, var(--primary) 5%, transparent);
883+
color: var(--primary);
884+
}
885+
886+
.expand-tools-btn:hover span {
887+
display: inline;
888+
}
889+
890+
/* Container Adjustment for Tool Panel */
891+
.container.with-tool-panel .chat-container,
892+
.container.with-tool-panel form#chat-form,
893+
.container.with-tool-panel form#upload-form {
894+
margin-left: 250px;
895+
width: calc(100% - 250px);
896+
max-width: none;
897+
}
898+
899+
/* Responsive Styles for Tool Panel */
900+
@media (max-width: 768px) {
901+
.tool-panel {
902+
width: 100%;
903+
border-right: none;
904+
}
905+
906+
.container.with-tool-panel .chat-container,
907+
.container.with-tool-panel form#chat-form,
908+
.container.with-tool-panel form#upload-form {
909+
margin-left: 0;
910+
width: 100%;
911+
}
912+
913+
.expand-tools-btn {
914+
bottom: 1rem;
915+
top: auto;
916+
transform: none;
917+
left: 1rem;
918+
border-radius: var(--radius-md);
919+
border-left: 1px solid var(--border-color);
920+
}
921+
922+
.expand-tools-btn span {
923+
display: inline;
924+
}
925+
}
926+
927+
/* Settings Modal Tabs */
928+
.settings-tabs {
929+
display: flex;
930+
margin-bottom: 1.5rem;
931+
border-bottom: 1px solid var(--border-color);
932+
}
933+
934+
.settings-tab-btn {
935+
background: transparent;
936+
border: none;
937+
padding: 0.5rem 1rem;
938+
margin-right: 0.5rem;
939+
color: var(--text-secondary);
940+
cursor: pointer;
941+
border-bottom: 2px solid transparent;
942+
font-weight: 500;
943+
transition: all 0.2s ease;
944+
}
945+
946+
.settings-tab-btn:hover {
947+
color: var(--primary);
948+
background: transparent;
949+
transform: none;
950+
}
951+
952+
.settings-tab-btn.active {
953+
color: var(--primary);
954+
border-bottom-color: var(--primary);
955+
}
956+
957+
.settings-tab-content {
958+
display: none;
959+
}
960+
961+
.settings-tab-content.active {
962+
display: block;
963+
}
964+
965+
/* Tool Configuration */
966+
.tool-config-list {
967+
max-height: 400px;
968+
overflow-y: auto;
969+
}
970+
971+
.tool-config-item {
972+
margin-bottom: 1rem;
973+
border: 1px solid var(--border-color);
974+
border-radius: var(--radius-md);
975+
overflow: hidden;
976+
}
977+
978+
.tool-config-header {
979+
display: flex;
980+
align-items: center;
981+
padding: 0.75rem 1rem;
982+
background-color: var(--bg-content-area);
983+
cursor: pointer;
984+
}
985+
986+
.tool-config-body {
987+
padding: 1rem;
988+
border-top: 1px solid var(--border-color);
989+
background-color: var(--bg-main);
990+
}
991+
992+
.tool-config-body label {
993+
display: block;
994+
margin-bottom: 0.25rem;
995+
font-weight: 500;
996+
}
997+
998+
.tool-config-body input {
999+
width: 100%;
1000+
padding: 0.5rem;
1001+
margin-bottom: 1rem;
1002+
border: 1px solid var(--border-color);
1003+
border-radius: var(--radius-sm);
1004+
background-color: var(--bg-main);
1005+
color: var(--text-primary);
1006+
}
1007+
1008+
.tool-config-body small {
1009+
display: block;
1010+
color: var(--text-secondary);
1011+
font-size: 0.75rem;
1012+
margin-top: -0.5rem;
1013+
margin-bottom: 0.5rem;
1014+
}
1015+
1016+
/* Toggle Switch */
1017+
.switch {
1018+
position: relative;
1019+
display: inline-block;
1020+
width: 46px;
1021+
height: 24px;
1022+
margin-left: auto;
1023+
}
1024+
1025+
.switch input {
1026+
opacity: 0;
1027+
width: 0;
1028+
height: 0;
1029+
}
1030+
1031+
.slider {
1032+
position: absolute;
1033+
cursor: pointer;
1034+
top: 0;
1035+
left: 0;
1036+
right: 0;
1037+
bottom: 0;
1038+
background-color: var(--border-color);
1039+
transition: .3s;
1040+
border-radius: 24px;
1041+
}
1042+
1043+
.slider:before {
1044+
position: absolute;
1045+
content: "";
1046+
height: 18px;
1047+
width: 18px;
1048+
left: 3px;
1049+
bottom: 3px;
1050+
background-color: white;
1051+
transition: .3s;
1052+
border-radius: 50%;
1053+
}
1054+
1055+
input:checked + .slider {
1056+
background-color: var(--primary);
1057+
}
1058+
1059+
input:checked + .slider:before {
1060+
transform: translateX(22px);
1061+
}
1062+
1063+
.save-api-btn {
1064+
margin-top: 1rem;
1065+
width: 100%;
1066+
background-color: var(--primary);
1067+
color: var(--text-on-primary);
1068+
padding: 0.75rem;
1069+
border: none;
1070+
border-radius: var(--radius-md);
1071+
cursor: pointer;
1072+
font-weight: 500;
7061073
}

0 commit comments

Comments
 (0)