diff --git a/luci-app-chatgpt-web/Makefile b/luci-app-chatgpt-web/Makefile index 723fb4e12..b5cae97b0 100644 --- a/luci-app-chatgpt-web/Makefile +++ b/luci-app-chatgpt-web/Makefile @@ -1,6 +1,6 @@ # SPDX-License-Identifier: GPL-3.0-only # -# Copyright (C) 2021-2022 sirpdboy https://github.com/sirpdboy/chatgpt-web.git +# Copyright (C) 2023-2025 sirpdboy https://github.com/sirpdboy/luci-app-chatgpt-web # # This is free software, licensed under the Apache License, Version 2.0 . # @@ -8,7 +8,7 @@ include $(TOPDIR)/rules.mk NAME:=chatgpt-web PKG_NAME:=luci-app-$(NAME) -PKG_VERSION:=1.1.4 +PKG_VERSION:=1.2.1 PKG_RELEASE:=16 LUCI_TITLE:=LuCI Support for chatgpt-web Client diff --git a/luci-app-chatgpt-web/luasrc/controller/chatgpt-web.lua b/luci-app-chatgpt-web/luasrc/controller/chatgpt-web.lua index 03c2a3b09..c100132c8 100644 --- a/luci-app-chatgpt-web/luasrc/controller/chatgpt-web.lua +++ b/luci-app-chatgpt-web/luasrc/controller/chatgpt-web.lua @@ -1,4 +1,4 @@ --- Copyright (C) 2023 sirpdboy https://github.com/sirpdboy/chatgpt-web.git +-- Copyright (C) 2023-2025 sirpdboy https://github.com/sirpdboy/luci-app-chatgpt-web -- Licensed to the public under the Apache License 2.0. module("luci.controller.chatgpt-web", package.seeall) diff --git a/luci-app-chatgpt-web/luasrc/model/cbi/chatgpt-web.lua b/luci-app-chatgpt-web/luasrc/model/cbi/chatgpt-web.lua index 0b4a05abe..da4130fbb 100644 --- a/luci-app-chatgpt-web/luasrc/model/cbi/chatgpt-web.lua +++ b/luci-app-chatgpt-web/luasrc/model/cbi/chatgpt-web.lua @@ -1,4 +1,4 @@ --- Copyright (C) 2023 sirpdboy https://github.com/sirpdboy/chatgpt-web.git +-- Copyright (C) 2023-2025 sirpdboy https://github.com/sirpdboy/https://github.com/sirpdboy/luci-app-chatgpt-web local m, s ,o @@ -10,14 +10,6 @@ s = m:section(TypedSection, "basic", translate("Base Setting")) s.addremove = false s.anonymous = true -o = s:option(ListValue,"modelver",translate("GPT Model")) -o:value("gpt-3.5-turbo",translate("gpt-3.5")) -o:value("gpt-3.5-turbo-16k",translate("gpt-3.5-turbo-16k")) -o:value("gpt-4",translate("gpt-4")) -o:value("gpt-4-browsing",translate("gpt-4-browsing")) -o:value("gpt-4-32k",translate("gpt-4-32k")) -o.default="gpt-3.5-turbo" -o.rmempty = true o = s:option(Value,"userpic",translate("Character images")) o:value("girl.jpg",translate("girl")) @@ -35,18 +27,6 @@ o:value("cartoongirl2.jpg",translate("cartoongirl2")) o.rmempty = true o.default="girl.jpg" -o=s:option(TextValue, "systemrole" ,translate("Default Role Settings")) -o.rows = 2 -o.rmempty=false -o = s:option(Value,"apiHost",translate("OpenAI interface")) -o.description = translate("") -o.rmempty = true -o.default="https://api.openai.com/" - -o = s:option(Value, "apikey", translate("API Key")) -o.description = translate("Enter your own API key, and if you do not have one, enter the official website API to generate it: ")..translate("Click to open") -o.rmempty = true -o.password = true return m diff --git a/luci-app-chatgpt-web/luasrc/model/cbi/chatgpt.lua b/luci-app-chatgpt-web/luasrc/model/cbi/chatgpt.lua index 348017b59..162de6d0a 100644 --- a/luci-app-chatgpt-web/luasrc/model/cbi/chatgpt.lua +++ b/luci-app-chatgpt-web/luasrc/model/cbi/chatgpt.lua @@ -1,4 +1,4 @@ --- Copyright (C) 2023 sirpdboy https://github.com/sirpdboy/chatgpt-web.git +-- Copyright (C) 2023-2025 sirpdboy https://github.com/sirpdboy/luci-app-chatgpt-web require("luci.util") local m, s diff --git a/luci-app-chatgpt-web/luasrc/view/chatgpt-web.htm b/luci-app-chatgpt-web/luasrc/view/chatgpt-web.htm index 4cbbff385..61f14ac13 100644 --- a/luci-app-chatgpt-web/luasrc/view/chatgpt-web.htm +++ b/luci-app-chatgpt-web/luasrc/view/chatgpt-web.htm @@ -1,43 +1,112 @@ <%# - Copyright 2023 sirpdboy Wich https://github.com/sirpdboy/chatgpt-web.git + Copyright 2023-2025 sirpdboy Wich https://github.com/sirpdboy/luci-app-chatgpt-web Licensed to the public under the Apache License 2.0. -%> <% local fs = require "nixio.fs" local dsp = require "luci.dispatcher" local uci = luci.model.uci.cursor() -local apihosts = uci:get_first('chatgpt-web', 'basic', 'apiHost') local apikeys = uci:get_first('chatgpt-web', 'basic', 'apikey') -local modelver = uci:get_first('chatgpt-web', 'basic', 'modelver') local userpic = "/luci-static/chatgpt-web/user/" .. uci:get_first('chatgpt-web', 'basic', 'userpic') local sysrole = uci:get_first('chatgpt-web', 'basic', 'systemrole') -%> -
+ +
- + + d="M1107.3 299.1c-198 0-373.9 127.3-435.2 315.3C544.8 640.6 434.9 720.2 370.5 833c-99.3 171.4-76.6 386.9 56.4 533.8-41.1 123.1-27 257.7 38.6 369.2 98.7 172 297.3 260.2 491.6 219.2 86.1 97 209.8 152.3 339.6 151.8 198 0 373.9-127.3 435.3-315.3 127.5-26.3 237.2-105.9 301-218.5 99.9-171.4 77.2-386.9-55.8-533.9v-.6c41.1-123.1 27-257.8-38.6-369.8-98.7-171.4-297.3-259.6-491-218.6-86.6-96.8-210.5-151.8-340.3-151.2zm0 117.5-.6.6c79.7 0 156.3 27.5 217.6 78.4-2.5 1.2-7.4 4.3-11 6.1L952.8 709.3c-18.4 10.4-29.4 30-29.4 51.4V1248l-155.1-89.4V755.8c-.1-187.1 151.6-338.9 339-339.2zm434.2 141.9c121.6-.2 234 64.5 294.7 169.8 39.2 68.6 53.9 148.8 40.4 226.5-2.5-1.8-7.3-4.3-10.4-6.1l-360.4-208.2c-18.4-10.4-41-10.4-59.4 0L1024 984.2V805.4L1372.7 604c51.3-29.7 109.5-45.4 168.8-45.5zM650 743.5v427.9c0 21.4 11 40.4 29.4 51.4l421.7 243-155.7 90L597.2 1355c-162-93.8-217.4-300.9-123.8-462.8C513.1 823.6 575.5 771 650 743.5zm807.9 106 348.8 200.8c162.5 93.7 217.6 300.6 123.8 462.8l.6.6c-39.8 68.6-102.4 121.2-176.5 148.2v-428c0-21.4-11-41-29.4-51.4l-422.3-243.7 155-89.3zM1201.7 997l177.8 102.8v205.1l-177.8 102.8-177.8-102.8v-205.1L1201.7 997zm279.5 161.6 155.1 89.4v402.2c0 187.3-152 339.2-339 339.2v-.6c-79.1 0-156.3-27.6-217-78.4 2.5-1.2 8-4.3 11-6.1l360.4-207.5c18.4-10.4 30-30 29.4-51.4l.1-486.8zM1380 1421.9v178.8l-348.8 200.8c-162.5 93.1-369.6 38-463.4-123.7h.6c-39.8-68-54-148.8-40.5-226.5 2.5 1.8 7.4 4.3 10.4 6.1l360.4 208.2c18.4 10.4 41 10.4 59.4 0l421.9-243.7z" /> + + + + + + + + + + + + + + + + + + + + d="M3.07 10.876C3.623 6.436 7.41 3 12 3a9.15 9.15 0 0 1 6.012 2.254V4a1 1 0 1 1 2 0v4a1 1 0 0 1-1 1H15a1 1 0 1 1 0-2h1.957A7.15 7.15 0 0 0 12 5a7 7 0 0 0-6.946 6.124 1 1 0 1 1-1.984-.248m16.992 1.132a1 1 0 0 1 .868 1.116C20.377 17.564 16.59 21 12 21a9.15 9.15 0 0 1-6-2.244V20a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H7.043A7.15 7.15 0 0 0 12 19a7 7 0 0 0 6.946-6.124 1 1 0 0 1 1.116-.868"> + d="M3.07 10.876C3.623 6.436 7.41 3 12 3a9.15 9.15 0 0 1 6.012 2.254V4a1 1 0 1 1 2 0v4a1 1 0 0 1-1 1H15a1 1 0 1 1 0-2h1.957A7.15 7.15 0 0 0 12 5a7 7 0 0 0-6.946 6.124 1 1 0 1 1-1.984-.248" /> - + - + @@ -122,7 +191,7 @@ function cbi_validate_form(form) { - + @@ -149,8 +218,7 @@ function cbi_validate_form(form) { - + @@ -169,79 +237,117 @@ function cbi_validate_form(form) { + + + - + + + + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + +
ChatGPT
- - - +
+
+
+
+
-
\ No newline at end of file diff --git a/luci-app-chatgpt-web/root/www/luci-static/chatgpt-web/11.11.1github.min.css b/luci-app-chatgpt-web/root/www/luci-static/chatgpt-web/11.11.1github.min.css new file mode 100644 index 000000000..275239a7a --- /dev/null +++ b/luci-app-chatgpt-web/root/www/luci-static/chatgpt-web/11.11.1github.min.css @@ -0,0 +1,10 @@ +pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! + Theme: GitHub + Description: Light theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Outdated base version: https://github.com/primer/github-syntax-light + Current colors taken from GitHub's CSS +*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0} \ No newline at end of file diff --git a/luci-app-chatgpt-web/root/www/luci-static/chatgpt-web/chatgpt-web.css b/luci-app-chatgpt-web/root/www/luci-static/chatgpt-web/chatgpt-web.css index 648ff9894..7a24e3766 100644 --- a/luci-app-chatgpt-web/root/www/luci-static/chatgpt-web/chatgpt-web.css +++ b/luci-app-chatgpt-web/root/www/luci-static/chatgpt-web/chatgpt-web.css @@ -7,10 +7,9 @@ border-radius: 8px; background-color: rgba(255,255,255,0.5); overflow: auto; -} + } - - .overlay { + .chat_window>.overlay { width: 100%; height: 100%; position: absolute; @@ -23,18 +22,102 @@ cursor: pointer; transition: all 120ms ease-in-out; } - + + .chat_window .mainContent .cbi-input-invalid { + color: var(--title-color); + border-bottom-color: var(--title-color); + } + @media screen and (min-width: 800px) { + + .mainContent { + width: calc(100% - 250px); + } + + .chat_window>.nav { + position: relative; + margin-left: -250px; + transition: margin-left 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + + .show-nav .nav { + margin-left: 0; + } + + #sysDialog { + max-width: 600px; + } + + .sysContent { + display: flex; + } + + .sysSwitch { + flex-shrink: 0; + width: 160px; + } + + .sysSwitch>div { + padding-left: 6px; + } + + .sysDetail { + margin-left: 12px; + margin-top: 5px; + } + } + + @media screen and (max-width: 800px) { + + .mainContent { + width: 100%; + } + + .chat_window>.nav { + position: absolute !important; + left: -250px; + transition: left 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + + .show-nav .nav { + left: 0; + box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 16px 24px 2px, rgba(0, 0, 0, 0.12) 0px 6px 30px 5px; + } + + .show-nav .overlay { + visibility: visible; + opacity: 1; + } + + #sysDialog { + max-width: 400px; + } + + .sysSwitch { + display: flex; + } + + .sysSwitch>div { + width: 50%; + justify-content: center; + } + + .sysDetail { + margin-top: 8px; + } + } .full_window { max-width: none; max-height: none; } - .chatnav { + .chat_window>.nav { width: 250px; - border-right: 1px solid #e0e0e0;; - background-color: rgba(255,255,255,0.5); + background-color: rgba(var(--primary-rgbbody),1); + color: var(--body-color); top: 0; z-index: 99; flex-shrink: 0; @@ -53,6 +136,9 @@ flex: 1; } + .show-nav .nav { + margin-left: 0; + } .show-nav .chatnav { margin-left: 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 16px 24px 2px, rgba(0, 0, 0, 0.12) 0px 6px 30px 5px; @@ -77,6 +163,7 @@ padding: 5px 7px; border-radius: 4px; cursor: pointer; + -webkit-tap-highlight-color: transparent; } .top_menu .toggler:hover { @@ -114,11 +201,31 @@ pointer-events: none; } - .title>span { + #selector { position: absolute; top: 50%; left: 50%; + padding: 0 4px 0 10px; + cursor: pointer; + font-size: 20px; transform: translate(-50%, -50%); + pointer-events: auto; + border-radius: 4px; + -webkit-user-select: none; + user-select: none; + display: flex; + align-items: center; + } + + #selector:hover { + color: var(--title-color); + } + + #modelVer { + margin-left: 6px; + margin-right: 4px; + height: 40px; + line-height: 38px; } .messages { @@ -127,63 +234,76 @@ overflow-x: hidden; overflow-y: auto; font-size: 16px; - color: #24292f; width: 100%; text-align: center; } .messages::-webkit-scrollbar, + #chatlog .markdown-body>pre::-webkit-scrollbar, #chatlog .markdown-body>pre>code::-webkit-scrollbar, + #chatlog .responseBody pre>code::-webkit-scrollbar, #setDialog::-webkit-scrollbar, .allList::-webkit-scrollbar, - .sysDetail::-webkit-scrollbar { + .sysDetail::-webkit-scrollbar, + #apiSelect::-webkit-scrollbar { width: 10px; height: 10px; } .messages::-webkit-scrollbar-track, + #chatlog .markdown-body>pre::-webkit-scrollbar-track, #chatlog .markdown-body>pre>code::-webkit-scrollbar-track, + #chatlog .responseBody pre>code::-webkit-scrollbar-track, #setDialog::-webkit-scrollbar-track, .allList::-webkit-scrollbar-track, - .sysDetail::-webkit-scrollbar-track { + .sysDetail::-webkit-scrollbar-track, + #apiSelect::-webkit-scrollbar-track { background-clip: padding-box; background: transparent; border: none; } .messages::-webkit-scrollbar-corner, + #chatlog .markdown-body>pre::-webkit-scrollbar-corner, #chatlog .markdown-body>pre>code::-webkit-scrollbar-corner, + #chatlog .responseBody pre>code::-webkit-scrollbar-corner, #setDialog::-webkit-scrollbar-corner, .allList::-webkit-scrollbar-corner, - .sysDetail::-webkit-scrollbar-corner { + .sysDetail::-webkit-scrollbar-corner, + #apiSelect::-webkit-scrollbar-corner { background-color: transparent; } .messages::-webkit-scrollbar-thumb, + #chatlog .markdown-body>pre::-webkit-scrollbar-thumb, #chatlog .markdown-body>pre>code::-webkit-scrollbar-thumb, + #chatlog .responseBody pre>code::-webkit-scrollbar-thumb, #setDialog::-webkit-scrollbar-thumb, .allList::-webkit-scrollbar-thumb, - .sysDetail::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.2); + .sysDetail::-webkit-scrollbar-thumb, + #apiSelect::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.1); background-clip: padding-box; border: solid transparent; border-radius: 10px; } .messages::-webkit-scrollbar-thumb:hover, + #chatlog .markdown-body>pre::-webkit-scrollbar-thumb:hover, #chatlog .markdown-body>pre>code::-webkit-scrollbar-thumb:hover, + #chatlog .responseBody pre>code::-webkit-scrollbar-thumb:hover, #setDialog::-webkit-scrollbar-thumb:hover, .allList::-webkit-scrollbar-thumb:hover, - .sysDetail::-webkit-scrollbar-thumb:hover { + .sysDetail::-webkit-scrollbar-thumb:hover, + #apiSelect::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.4); } - #chatlog { word-wrap: break-word; text-align: start; @@ -192,7 +312,6 @@ #chatlog>div { padding: 18px 40px 18px 54px; } - .chatAvatar { position: absolute; width: 30px; @@ -201,33 +320,24 @@ } .request>.chatAvatar { - top: 14px; - right: 53px; + top: 18px; + left: 13px; margin-top: 15px; margin-bottom: 15px; } .response>.chatAvatar { background: #10a37f; - top: 18px; - left: 13px; margin-top: 15px; margin-bottom: 15px; } - .response .gpt3Avatar { - top: 18px; - left: 13px; - background: #19c37d; + .gptAvatar>svg { + margin-top: 3px; + margin-left: 3px; } - .response .gpt4Avatar { - top: 18px; - left: 13px; - background: #ab68ff; - } - .chatAvatar>img { display: block; width: 100%; @@ -235,6 +345,7 @@ border-radius: 2px; } + .modelAvatar>svg, .chatAvatar>svg { display: block; margin-top: 4px; @@ -243,16 +354,18 @@ #chatlog .request { position: relative; + background-color: var(--inputborder-color); display: flex; justify-content: center; } - .request>.requestBody { + + .response .responseBody { display: flex; justify-content: flex-end; margin: 18px 45px 18px 20px; - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; font-size: 15px; + } .requestBody { white-space: pre-wrap; @@ -261,7 +374,7 @@ } #chatlog .response { - background-color: rgba(255,255,255,0.2); + background-color: var(--inputborder-color); position: relative; } @@ -270,22 +383,45 @@ flex: 1; font-size: 15px; background-color: rgba(255,255,255,0)!important; + } - #chatlog .markdown-body>pre { + #chatlog .markdown-body a { + padding: 0 1px 0 2px; + } + + #chatlog .markdown-body pre { overflow-x: auto; padding: 10px; position: relative; white-space: pre-wrap; - background-color: rgba(255,255,255,0.5)!important; + background-color: var(--inputborder-color)!important; + } - #chatlog .markdown-body>pre>code { + #chatlog .markdown-body .mermaid { + margin-bottom: 8px; + padding: 0 10px 0 10px; + position: relative; + border-radius: 6px; + } + + .mermaid>svg { + cursor: pointer; + max-height: 600px; + display: block; + } + + #chatlog .markdown-body pre>code { overflow-x: auto; white-space: pre-wrap; display: block; } + #chatlog .markdown-body ul { + list-style-type: disc; + } + .m-mdic-copy-wrapper { position: absolute; top: 5px; @@ -338,6 +474,12 @@ transition: color 0.2s; } + .m-mdic-copy-wrapper span.u-mdic-copy-code_lang::before, + .m-mdic-copy-wrapper div.u-mdic-copy-notify::before, + .m-mdic-copy-wrapper button.u-mdic-copy-btn::before { + content: attr(text); + } + .m-mdic-copy-wrapper button.u-mdic-copy-btn:hover { color: #555; } @@ -373,7 +515,7 @@ width: 100%; padding: 10px 10px; max-width: 91%; - margin: 0 auto; + margin: 0 auto; } .bottom_wrapper .message_input_wrapper { @@ -383,21 +525,22 @@ } .bottom_wrapper .message_input_wrapper .message_input_text { - border-radius: 4px; - outline: none; - background-color: rgba(255,255,255,0.2); - height: 47px; - font-size: 16px; - max-height: 200px; - padding: 13px 0 13px 13px; + border-radius: 4px; + border: none; + outline: none; + resize: none; + background-color: var(--inputborder-color); + height: 47px; + font-size: 16px; + max-height: 200px; + padding: 13px 0 13px 13px; width: 100%!important; - display: block; - transition: background 0.3s; - + display: block; + transition: background-color 250ms; } .bottom_wrapper .message_input_wrapper .message_input_text:focus { - background-color: rgba(255,255,255,0.5); + background-color: var(--inputborder-color); } .bottom_wrapper .message_input_wrapper .message_input_text::-webkit-scrollbar { @@ -408,17 +551,17 @@ #sendbutton { width: 70px; - height: 47px; - font-size: 18px; - font-weight: bold; + height: 47px; + font-size: 18px; + font-weight: bold; color: #fff; background-color: #7ac516; padding: 0.5rem 0.5rem; transition: all 0.2s linear; position: absolute; right: 65px; - bottom: 10px; - cursor: not-allowed; + bottom: 10px; + cursor: not-allowed; } .activeSendBtn { @@ -431,12 +574,12 @@ } .clearConv { - position: absolute; - right: 10px; - bottom: 10px; - width: 47px; + position: absolute; + right: 10px; + bottom: 10px; + width: 47px; padding: 0.5rem 0.5rem; - height: 47px; + height: 47px; } .clearConv>svg { @@ -445,6 +588,9 @@ left: 50%; } + .clearConv:hover { + background-color: var(--body-hover-bgcolor); + } .clearConv svg:first-child { display: none; @@ -520,30 +666,28 @@ top: 1px; -webkit-transform: translateZ(0); transform: translateZ(0); - -webkit-transition: 0.3s ease; - transition: 0.3s ease; + -webkit-transition: all 250ms; + transition: all 250ms; } .switch-slide input:checked+label { background: #99c959; - transition: 0.3s ease; + -webkit-transition: all 250ms; + transition: all 250ms; } .switch-slide input:checked+label:after { left: 21px; } -.settings { - padding: 5px 7px; - margin-right: 10px; - display: flex; - position: absolute; - float: right; - border-radius: 4px; - width: 40px; - height: 40px; - cursor: pointer; - top: 5px; -} + + .settings { + padding: 0px 7px; + margin-top: -40px; + float: right; + border-radius: 4px; + cursor: pointer; + top: 5px; + } .setBtn { @@ -551,16 +695,15 @@ cursor: pointer; padding: 5px; border: none; - background-color: transparent; border-radius: 4px; } - #setting>svg { + .setBtn>svg { display: block; color: #909090; } - #setting:hover { + .setBtn:hover { background: #e0e0e0;; } @@ -568,17 +711,87 @@ right: 15px; } + #toggleFull { + right: 56px; + } + #toggleLight *, + #toggleFull * { + pointer-events: none; + } .showSetting { - background: #c0c0c0 !important; + background-color: var(--inputborder-color); + } + + .showModels { + background-color: var(--inputborder-color); + } + + .showModels>svg:last-child { + transform: scaleY(-1); + } + + #modelDialog { + position: absolute; + z-index: 2; + background: rgba(var(--primary-rgbbody), 1); + width: 240px; + left: 50%; + transform: translateX(-50%); + top: 46px; + overflow-y: auto; + max-height: calc(100% - 55px); + -webkit-user-select: none; + user-select: none; + border-radius: 4px; + padding: 8px 5px 8px 5px; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); + } + + .modelSingle { + height: 40px; + border-radius: 3px; + cursor: pointer; + line-height: 40px; + display: flex; + align-items: center; + position: relative; + } + + .modelSingle * { + pointer-events: none; + } + + .modelSingle:hover { + background-color: var(--body-hover-bgcolor); + } + + .activeModel::before { + content: ""; + position: absolute; + right: 15px; + top: 7px; + width: 8px; + height: 16px; + border-style: solid; + border-width: 0 4px 4px 0; + transform: rotate(45deg); + } + + .modelAvatar { + margin-left: 6px; + margin-right: 10px; + width: 30px; + flex-shrink: 0; + border-radius: 2px; + height: 30px; } #setDialog { - color: #404040; position: absolute; z-index: 2; - background: #f6f6f6; + background-color: rgba(var(--primary-rgbbody),1); width: 320px; right: 6px; top: 46px; @@ -616,10 +829,18 @@ margin-top: 10px; } - #voiceRecSetting select, - #speechDetail select { - background: #fff; - color: #24292f; + #voiceRecSetting select, #speechDetail select { + color: var(--title-color); + + } + .inputTextClass { + outline: none; + border-radius: 2px; + margin-top: 3px; + height: 32px; + font-size: 15px; + padding-left: 6px; + border: none; } .areaTextClass { @@ -669,7 +890,7 @@ height: 32px; border-radius: 3px; line-height: 32px; - background: #eaeaea; + background-color: var(--inputborder-color); text-align: center; padding: 0px 8px; display: flex; @@ -709,8 +930,6 @@ border-radius: 3px; width: 120px; border-color: rgba(0, 0, 0, .3); - background: #fff; - color: #24292f; } .selectDef { @@ -762,7 +981,6 @@ bottom: -5px; display: flex; justify-content: space-between; - visibility: visible; z-index: 1; color: #808080; @@ -855,16 +1073,16 @@ border-radius: 3px; margin-left: 4px; cursor: pointer; - background: #eaeaea; + color: var(--title-color); padding: 1px 5px; } #voiceTypes>span:hover { - background-color: #d0d0d0; + background-color: var(--body-hover-bgcolor); } .selVoiceType { - background: #d0d0d0 !important; + background-color: var(--inputborder-color); } .navHeader { @@ -874,14 +1092,12 @@ justify-content: space-between; } - #newChat { text-align: center; width: 80%; height: 40px; border-radius: 3px; - background: #e8e8e8; - color: #404040; + background: var(--inputborder-color); display: flex; align-items: center; justify-content: center; @@ -892,7 +1108,7 @@ } .navHeader>div:hover { - background: #e0e0e0 !important; + background: var(--body-hover-bgcolor)!important; } #newChat>svg { @@ -904,10 +1120,9 @@ width: 40px; margin-left: 10px; border-radius: 3px; - color: #404040; + background: var(--inputborder-color); cursor: pointer; position: relative; - background: #e8e8e8; -webkit-user-select: none; user-select: none; } @@ -930,13 +1145,12 @@ font-size: 16px; outline: none; border: none; - color: #24292f; - background: #e8e8e8; + background: var(--inputborder-color); border-radius: 3px; } #searchChat:focus { - background: #e0e0e0; + background: var(--inputborder-color); } #searchChat:placeholder-shown+#clearSearch { @@ -948,26 +1162,46 @@ right: 12px; top: 8px; cursor: pointer; - color: #404040; } #clearSearch:hover { - color: #000; + color: var(--title-color); } #clearSearch>svg { display: block; } - .divider { - width: 100%; - border-top: 1px solid #e0e0e0; - margin: 4px 0; + .seledSearch { + background: var(--inputborder-color)!important; + } + + #matchCaseSearch { + position: absolute; + right: 12px; + top: 8px; + cursor: pointer; + border-radius: 3px; + color: var(--inputborder-color); + } + + #matchCaseSearch:hover { + background: var(--body-hover-bgcolor); + } + + #matchCaseSearch>svg { + display: block; } .navFooter { padding-bottom: 8px; - background: #e8e8e8; + background: var(--inputborder-color); + } + + .navFooter .divider { + width: 100%; + border-top: 1px solid var(--inputborder-color); + margin: 4px 0; } .navFunc { @@ -985,32 +1219,25 @@ border-radius: 20px; text-align: center; padding: 8px 8px; - color: #404040; font-size: 14px; cursor: pointer; } .navFunc>div:hover, .navFunc>label:hover { - background: #e0e0e0; + background: var(--body-hover-bgcolor); } - .links { + .navFooter .links { text-align: center; + -webkit-user-select: none; + user-select: none; } - .links a { - color: #404040; + .navFooter .links a { text-decoration: none; } - .links a:hover { - color: #24292f !important; - } - - .links a:visited { - color: #404040; - } .allList { width: 100%; @@ -1050,7 +1277,6 @@ cursor: pointer; width: 100%; height: 50px; - color: #909090; ; display: flex; justify-content: space-between; align-items: center; @@ -1065,7 +1291,6 @@ .headLi>svg, .chatLi>svg { margin-left: 10px; - color: #404040; pointer-events: none; } @@ -1079,7 +1304,13 @@ pointer-events: none; } - .headLi .folderInfo, + .headLi .folderInfo { + position: absolute; + left: 40px; + height: 40px; + max-width: calc(100% - 115px); + } + .chatLi .chatInfo { position: absolute; left: 45px; @@ -1094,12 +1325,11 @@ } .chatInfo span { - background: #f8b26a; + background: var(--inputborder-color)!important; } .headLi .folderName, .chatLi .chatName { - color: #404040; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -1109,7 +1339,6 @@ .headLi .folderNum, .chatLi .chatPre { - color: #404040; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -1122,16 +1351,29 @@ .chatLi .chatOption { visibility: hidden; display: flex; - color: #777; margin-right: 5px; } + .folderLi .chatLi>svg { + margin-left: 5px; + } + + .folderLi .chatLi .chatInfo { + left: 35px; + max-width: calc(100% - 85px); + } + + .folderLi .chatLi #activeChatEdit { + left: 32px; + width: calc(100% - 60px) + } + .folderLi:hover { - background: #eaeaea; + background: var(--body-hover-bgcolor)!important; } .chatLi:hover { - background: #e0e0e0; + background: var(--body-hover-bgcolor)!important; } .headLi:hover .folderOption, @@ -1141,15 +1383,16 @@ .activeFolder, .activeChatLi { - background: #d0d0d0 !important; + background: var(--inputborder-color)!important; } .activeChatLi .chatOption { visibility: visible !important; } + .folderOption>svg:hover, .chatOption>svg:hover { - color: #444; + color: var(--title-color); } #activeChatEdit { @@ -1157,8 +1400,8 @@ left: 42px; font-size: 16px; border-radius: 2px; - color: #24292f; - background: #fff; + color: var(--title-color); + background-color: rgba(var(--primary-rgbbody),1); outline: none; border: none; pointer-events: auto; @@ -1187,16 +1430,59 @@ text-align: center; } - #loadMask svg { - width: 160px; - height: 80px; + @keyframes loading { + + 0%, + 100% { + transform: scale(0); + } + + 50% { + transform: scale(1); + } } - #loadMask>div>div { + .loadingCSSIcon { + position: relative; + display: flex; + align-items: center; + justify-content: space-evenly; + } + + .loadingCSSIcon div { + width: 15%; + height: 0; + padding-bottom: 15%; + border-radius: 50%; + animation: loading 1s cubic-bezier(0.3, 0, 0.7, 1) infinite; + } + + .loadingCSSIcon div:nth-child(1) { + background: #e15b64; + animation-delay: -0.4s + } + + .loadingCSSIcon div:nth-child(2) { + background: #f8b26a; + animation-delay: -0.2s + } + + .loadingCSSIcon div:nth-child(3) { + background: #99c959; + animation-delay: 0s; + } + + #loadMask>div>:first-child { font-size: 40px; color: #909090; ; } + #loadMask>div>:last-child { + width: 140px; + height: 70px; + margin: 0 auto; + } + #voiceRec { position: absolute; right: 0; @@ -1319,6 +1605,7 @@ -webkit-user-select: none; user-select: none; border-radius: 3px; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); } #voiceRecSetting select { @@ -1326,6 +1613,7 @@ outline: none; height: 28px; border-radius: 3px; + border-color: rgba(0, 0, 0, .3); } .presetModelCls label { @@ -1339,29 +1627,37 @@ font-size: 15px; } + .modelSwitch, .setSwitch { display: flex; - } + .modelSwitch { + margin-bottom: 10px; + -webkit-user-select: none; + user-select: none; + } + + .modelSwitch>div, .setSwitch>div { - border-radius: 3px; - width: calc(100% / 3); - height: 32px; - line-height: 32px; - text-align: center; - cursor: pointer; + border-radius: 3px; + width: calc(100% / 3); + padding: 8px; + line-height: 1; + text-align: center; + cursor: pointer; } + .modelSwitch>div:hover, .setSwitch>div:hover { - background-color: #e0e0e0; + background-color: var(--body-hover-bgcolor); } .activeSwitch { - background-color: #d0d0d0!important; + background-color: var(--inputborder-color); } - #checkVoiceLoad { + .checkLoad { height: 32px; border-radius: 3px; line-height: 32px; @@ -1372,7 +1668,7 @@ cursor: pointer; } - #checkVoiceLoad:hover { + .checkLoad:hover { background: #c0c0c0; } @@ -1384,7 +1680,7 @@ display: inline !important; } - #checkVoiceLoad>svg { + .checkLoad>svg { display: none; margin-right: 8px; height: 32px; @@ -1396,7 +1692,7 @@ line-height: 30px; } - #sysDialog { + #sysMask { display: none; position: fixed; z-index: 200; @@ -1408,24 +1704,54 @@ justify-content: center; align-items: center; background: rgba(0, 0, 0, .4); + -webkit-tap-highlight-color: transparent; } - #sysContent { + #sysDialog { position: relative; - background: #f5f5f5f5; - color: #404040; + background: rgba(var(--primary-rgbbody),1); cursor: auto; max-height: 100%; - max-width: 400px; + width: 100%; display: flex; flex-direction: column; border-radius: 4px; - padding: 12px 20px 16px 20px; + padding: 20px; } .sysTitle { font-size: 20px; font-weight: bold; + margin-bottom: 8px; + -webkit-user-select: none; + user-select: none; + } + + .sysSwitch, + .sysSwitch>div * { + pointer-events: none; + } + + .sysSwitch>div { + border-radius: 3px; + height: 32px; + line-height: 32px; + text-align: center; + cursor: pointer; + pointer-events: auto; + font-weight: bold; + display: flex; + align-items: center; + -webkit-user-select: none; + user-select: none; + } + + .sysSwitch>div>svg { + margin-right: 4px; + } + + .sysSwitch>div:hover { + background-color: var(--body-hover-bgcolor); } .sysDetail { @@ -1450,11 +1776,27 @@ margin-top: 8px; } + .setNotNormalFlow { + position: relative; + } + .setTitle { margin-bottom: 6px; font-weight: bold; + -webkit-user-select: none; + user-select: none; } + .setDetail { + margin: 0 10px; + -webkit-user-select: none; + user-select: none; + } + + .autoSelect>label, + .autoSelect>input { + cursor: pointer; + } .dataDetail { display: flex; @@ -1470,7 +1812,6 @@ text-align: center; padding: 6px 8px; margin-right: 12px; - color: #404040; font-size: 15px; cursor: pointer; display: flex; @@ -1480,7 +1821,52 @@ .dataDetail>div:hover, .dataDetail>label:hover { - background: #e8e8e8; + background-color: var(--body-hover-bgcolor); + } + + .keyOptionDetail { + display: flex; + margin-top: 10px; + } + + #resetHotKey { + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + font-size: 15px; + border-radius: 3px; + padding: 6px 8px; + margin-left: 90px; + } + + #resetHotKey>svg { + margin-right: 4px; + } + + #resetHotKey:hover { + background-color:var(--body-hover-bgcolor); + } + + .hotKeyDetail>div { + position: relative; + height: 30px; + margin-bottom: 2px; + } + + .hotKeyDetail label { + line-height: 30px; + } + + .hotKeyDetail select { + position: absolute; + left: 110px; + outline: none; + border-radius: 3px; + width: 120px; + border-color: rgba(0, 0, 0, .3); + height: 30px; + font-size: 15px; } .avatarDetail { @@ -1505,32 +1891,6 @@ width: 100%; height: 34px; border: 1px solid rgba(0, 0, 0, .3); - background: #fff; - color: #24292f; - } - - .apiDetail { - display: flex; - } - - .apiDetail input { - flex: 1; - } - - .apiDetail>div { - background: #d0d0d0; - border-radius: 3px; - width: 108px; - text-align: center; - cursor: pointer; - margin-top: 2px; - height: 34px; - line-height: 34px; - font-size: 15px; - } - - .apiDetail>div:hover { - background: #e0e0e0; } .themeDetail { @@ -1549,7 +1909,6 @@ border-radius: 20px; text-align: center; padding: 8px 8px; - color: #404040; font-size: 14px; cursor: pointer; } @@ -1559,19 +1918,31 @@ } .themeDetail>div:hover { - background: #e8e8e8; + background-color: var(--body-hover-bgcolor); } .darkTheme>div:first-child { - background: #d0d0d0; + background-color: var(--inputborder-color); } .lightTheme>div:nth-child(2) { - background: #d0d0d0; + background-color: var(--inputborder-color); } .autoTheme>div:nth-child(3) { - background: #d0d0d0; + background-color: var(--inputborder-color); + } + + .langDetail { + width: 110px; + } + + .enLang>div:first-child { + background-color: var(--inputborder-color); + } + + .zhLang>div:nth-child(2) { + background-color: var(--inputborder-color); } #customAutoSet input { @@ -1600,10 +1971,6 @@ overflow: hidden; } - .expiredBar { - background: #e15b64; - } - .nowProgress { position: absolute; left: 0; @@ -1621,7 +1988,7 @@ } .cursorCls { - background: var(--chat-text-color); + background-color: var(--inputborder-color); width: 4px; animation: 1s cursor-blinker infinite step-start; } @@ -1638,5 +2005,162 @@ 100% { opacity: 0; } - } - + } + + .apiSelsContainer { + position: relative; + z-index: 1; + } + + #apiSelect { + position: absolute; + top: 64px; + padding: 4px 0; + width: calc(100% - 20px); + left: 10px; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); + max-height: 180px; + overflow-y: auto; + -webkit-user-select: none; + user-select: none; + } + + #apiSelect>div { + pointer-events: auto; + cursor: pointer; + font-size: 15px; + padding: 6px 0 6px 8px; + height: 36px; + display: flex; + justify-content: space-between; + align-items: center; + } + + #apiSelect>div:hover { + background-color:var(--body-hover-bgcolor); + } + + #apiSelect>div>span { + height: 100%; + line-height: 23px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #apiSelect>div * { + pointer-events: none; + } + + .delApiOption:hover { + background-color: var(--body-hover-bgcolor); + } + + .delApiOption { + width: 36px; + height: 36px; + flex-shrink: 0; + pointer-events: auto !important; + } + + .delApiOption>svg { + margin: 6px; + display: block; + } + + @keyframes textInOut { + from { + opacity: 0; + } + + to { + opacity: 1; + } + } + + .response[data-loading="true"]>.responseBody>*:not(.cursorCls) { + animation: textInOut 0.48s ease-in-out forwards; + } + + .cotBtn { + width: 120px; + height: 32px; + font-size: 14px; + user-select: none; + background-color: var(--inputborder-color); + position: relative; + padding-left: 14px; + line-height: 32px; + border-radius: 8px; + margin-bottom: 12px; + cursor: pointer; + } + + .cotBtn:hover { + background-color: var(--body-hover-bgcolor); + } + + .cotBtn.endCot { + width: 142px; + } + + .cotBtn::after { + content: ''; + display: inline-block; + position: absolute; + right: 15px; + top: 14px; + width: 6px; + height: 6px; + transform: rotate(-45deg); + } + + .cotBtn.down::after { + top: 11px; + transform: rotate(135deg); + } + + .cotContent { + background-color: var(--inputborder-color); + padding-left: 12px; + font-size: 14px; + } + + .cotContent>:last-child { + margin-bottom: 12px !important; + } + + .hide { + display: none; + } + +