settings.tsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. import { useState, useEffect } from "react";
  2. import EmojiPicker, { Theme as EmojiTheme } from "emoji-picker-react";
  3. import styles from "./settings.module.scss";
  4. import ResetIcon from "../icons/reload.svg";
  5. import CloseIcon from "../icons/close.svg";
  6. import ClearIcon from "../icons/clear.svg";
  7. import { List, ListItem, Popover } from "./ui-lib";
  8. import { IconButton } from "./button";
  9. import { SubmitKey, useChatStore, Theme, ALL_MODELS } from "../store";
  10. import { Avatar } from "./home";
  11. import Locale, { changeLang, getLang } from "../locales";
  12. import { checkUpstreamLatestCommitId, getCurrentCommitId } from "../utils";
  13. import Link from "next/link";
  14. import { UPDATE_URL } from "../constant";
  15. function SettingItem(props: {
  16. title: string;
  17. subTitle?: string;
  18. children: JSX.Element;
  19. }) {
  20. return (
  21. <ListItem>
  22. <div className={styles["settings-title"]}>
  23. <div>{props.title}</div>
  24. {props.subTitle && (
  25. <div className={styles["settings-sub-title"]}>{props.subTitle}</div>
  26. )}
  27. </div>
  28. <div>{props.children}</div>
  29. </ListItem>
  30. );
  31. }
  32. export function Settings(props: { closeSettings: () => void }) {
  33. const [showEmojiPicker, setShowEmojiPicker] = useState(false);
  34. const [config, updateConfig, resetConfig, clearAllData] = useChatStore(
  35. (state) => [
  36. state.config,
  37. state.updateConfig,
  38. state.resetConfig,
  39. state.clearAllData,
  40. ]
  41. );
  42. const currentId = getCurrentCommitId();
  43. const [checkingUpdate, setCheckingUpdate] = useState(false);
  44. const [remoteId, setRemoteId] = useState<string>();
  45. const hasNewVersion = currentId !== remoteId;
  46. function checkUpdate(force = false) {
  47. setCheckingUpdate(true);
  48. checkUpstreamLatestCommitId(force).then((id) => {
  49. setRemoteId(id);
  50. setCheckingUpdate(false);
  51. });
  52. }
  53. useEffect(() => {
  54. checkUpdate();
  55. }, []);
  56. return (
  57. <>
  58. <div className={styles["window-header"]}>
  59. <div className={styles["window-header-title"]}>
  60. <div className={styles["window-header-main-title"]}>
  61. {Locale.Settings.Title}
  62. </div>
  63. <div className={styles["window-header-sub-title"]}>
  64. {Locale.Settings.SubTitle}
  65. </div>
  66. </div>
  67. <div className={styles["window-actions"]}>
  68. <div className={styles["window-action-button"]}>
  69. <IconButton
  70. icon={<ClearIcon />}
  71. onClick={clearAllData}
  72. bordered
  73. title={Locale.Settings.Actions.ClearAll}
  74. />
  75. </div>
  76. <div className={styles["window-action-button"]}>
  77. <IconButton
  78. icon={<ResetIcon />}
  79. onClick={resetConfig}
  80. bordered
  81. title={Locale.Settings.Actions.ResetAll}
  82. />
  83. </div>
  84. <div className={styles["window-action-button"]}>
  85. <IconButton
  86. icon={<CloseIcon />}
  87. onClick={props.closeSettings}
  88. bordered
  89. title={Locale.Settings.Actions.Close}
  90. />
  91. </div>
  92. </div>
  93. </div>
  94. <div className={styles["settings"]}>
  95. <List>
  96. <SettingItem title={Locale.Settings.Avatar}>
  97. <Popover
  98. onClose={() => setShowEmojiPicker(false)}
  99. content={
  100. <EmojiPicker
  101. lazyLoadEmojis
  102. theme={EmojiTheme.AUTO}
  103. onEmojiClick={(e) => {
  104. updateConfig((config) => (config.avatar = e.unified));
  105. setShowEmojiPicker(false);
  106. }}
  107. />
  108. }
  109. open={showEmojiPicker}
  110. >
  111. <div
  112. className={styles.avatar}
  113. onClick={() => setShowEmojiPicker(true)}
  114. >
  115. <Avatar role="user" />
  116. </div>
  117. </Popover>
  118. </SettingItem>
  119. <SettingItem
  120. title={Locale.Settings.Update.Version(currentId)}
  121. subTitle={
  122. checkingUpdate
  123. ? Locale.Settings.Update.IsChecking
  124. : hasNewVersion
  125. ? Locale.Settings.Update.FoundUpdate(remoteId ?? "ERROR")
  126. : Locale.Settings.Update.IsLatest
  127. }
  128. >
  129. {checkingUpdate ? (
  130. <div />
  131. ) : hasNewVersion ? (
  132. <Link href={UPDATE_URL} target="_blank" className="link">
  133. {Locale.Settings.Update.GoToUpdate}
  134. </Link>
  135. ) : (
  136. <IconButton
  137. icon={<ResetIcon></ResetIcon>}
  138. text={Locale.Settings.Update.CheckUpdate}
  139. onClick={() => checkUpdate(true)}
  140. />
  141. )}
  142. </SettingItem>
  143. <SettingItem title={Locale.Settings.SendKey}>
  144. <select
  145. value={config.submitKey}
  146. onChange={(e) => {
  147. updateConfig(
  148. (config) =>
  149. (config.submitKey = e.target.value as any as SubmitKey)
  150. );
  151. }}
  152. >
  153. {Object.values(SubmitKey).map((v) => (
  154. <option value={v} key={v}>
  155. {v}
  156. </option>
  157. ))}
  158. </select>
  159. </SettingItem>
  160. <ListItem>
  161. <div className={styles["settings-title"]}>
  162. {Locale.Settings.Theme}
  163. </div>
  164. <select
  165. value={config.theme}
  166. onChange={(e) => {
  167. updateConfig(
  168. (config) => (config.theme = e.target.value as any as Theme)
  169. );
  170. }}
  171. >
  172. {Object.values(Theme).map((v) => (
  173. <option value={v} key={v}>
  174. {v}
  175. </option>
  176. ))}
  177. </select>
  178. </ListItem>
  179. <SettingItem title={Locale.Settings.Lang.Name}>
  180. <div className="">
  181. <select
  182. value={getLang()}
  183. onChange={(e) => {
  184. changeLang(e.target.value as any);
  185. }}
  186. >
  187. <option value="en" key="en">
  188. {Locale.Settings.Lang.Options.en}
  189. </option>
  190. <option value="cn" key="cn">
  191. {Locale.Settings.Lang.Options.cn}
  192. </option>
  193. </select>
  194. </div>
  195. </SettingItem>
  196. <div className="no-mobile">
  197. <SettingItem title={Locale.Settings.TightBorder}>
  198. <input
  199. type="checkbox"
  200. checked={config.tightBorder}
  201. onChange={(e) =>
  202. updateConfig(
  203. (config) => (config.tightBorder = e.currentTarget.checked)
  204. )
  205. }
  206. ></input>
  207. </SettingItem>
  208. </div>
  209. </List>
  210. <List>
  211. <SettingItem
  212. title={Locale.Settings.HistoryCount.Title}
  213. subTitle={Locale.Settings.HistoryCount.SubTitle}
  214. >
  215. <input
  216. type="range"
  217. title={config.historyMessageCount.toString()}
  218. value={config.historyMessageCount}
  219. min="2"
  220. max="25"
  221. step="2"
  222. onChange={(e) =>
  223. updateConfig(
  224. (config) =>
  225. (config.historyMessageCount = e.target.valueAsNumber)
  226. )
  227. }
  228. ></input>
  229. </SettingItem>
  230. <SettingItem
  231. title={Locale.Settings.CompressThreshold.Title}
  232. subTitle={Locale.Settings.CompressThreshold.SubTitle}
  233. >
  234. <input
  235. type="number"
  236. min={500}
  237. max={4000}
  238. value={config.compressMessageLengthThreshold}
  239. onChange={(e) =>
  240. updateConfig(
  241. (config) =>
  242. (config.compressMessageLengthThreshold =
  243. e.currentTarget.valueAsNumber)
  244. )
  245. }
  246. ></input>
  247. </SettingItem>
  248. </List>
  249. <List>
  250. <SettingItem title={Locale.Settings.Model}>
  251. <select
  252. value={config.modelConfig.model}
  253. onChange={(e) => {
  254. updateConfig(
  255. (config) => (config.modelConfig.model = e.currentTarget.value)
  256. );
  257. }}
  258. >
  259. {ALL_MODELS.map((v) => (
  260. <option value={v.name} key={v.name} disabled={!v.available}>
  261. {v.name}
  262. </option>
  263. ))}
  264. </select>
  265. </SettingItem>
  266. <SettingItem
  267. title={Locale.Settings.Temperature.Title}
  268. subTitle={Locale.Settings.Temperature.SubTitle}
  269. >
  270. <input
  271. type="range"
  272. value={config.modelConfig.temperature.toFixed(1)}
  273. min="0"
  274. max="1"
  275. step="0.1"
  276. onChange={(e) => {
  277. updateConfig(
  278. (config) =>
  279. (config.modelConfig.temperature =
  280. e.currentTarget.valueAsNumber)
  281. );
  282. }}
  283. ></input>
  284. </SettingItem>
  285. <SettingItem
  286. title={Locale.Settings.MaxTokens.Title}
  287. subTitle={Locale.Settings.MaxTokens.SubTitle}
  288. >
  289. <input
  290. type="number"
  291. min={100}
  292. max={4000}
  293. value={config.modelConfig.max_tokens}
  294. onChange={(e) =>
  295. updateConfig(
  296. (config) =>
  297. (config.modelConfig.max_tokens =
  298. e.currentTarget.valueAsNumber)
  299. )
  300. }
  301. ></input>
  302. </SettingItem>
  303. <SettingItem
  304. title={Locale.Settings.PresencePenlty.Title}
  305. subTitle={Locale.Settings.PresencePenlty.SubTitle}
  306. >
  307. <input
  308. type="range"
  309. value={config.modelConfig.presence_penalty.toFixed(1)}
  310. min="-2"
  311. max="2"
  312. step="0.5"
  313. onChange={(e) => {
  314. updateConfig(
  315. (config) =>
  316. (config.modelConfig.presence_penalty =
  317. e.currentTarget.valueAsNumber)
  318. );
  319. }}
  320. ></input>
  321. </SettingItem>
  322. </List>
  323. </div>
  324. </>
  325. );
  326. }