Skip to content

Commit 289aeec

Browse files
lloydzhoulloydzhou
authored
Merge pull request #5786 from ConnectAI-E/feature/realtime-chat
Feature/realtime chat
2 parents f8f6954 + 7d71da9 commit 289aeec

24 files changed

+1921
-618
lines changed

‎README.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -96,10 +96,11 @@ For enterprise inquiries, please contact: **[email protected]**
9696
- [x] Artifacts: Easily preview, copy and share generated content/webpages through a separate window [#5092](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/pull/5092)
9797
- [x] Plugins: support network search, calculator, any other apis etc. [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165) [#5353](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5353)
9898
- [x] network search, calculator, any other apis etc. [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165) [#5353](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5353)
99+
- [x] Supports Realtime Chat [#5672](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5672)
99100
- [ ] local knowledge base
100101

101102
## What's New
102-
103+
- 🚀 v2.15.8 Now supports Realtime Chat [#5672](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5672)
103104
- 🚀 v2.15.4 The Application supports using Tauri fetch LLM API, MORE SECURITY! [#5379](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5379)
104105
- 🚀 v2.15.0 Now supports Plugins! Read this: [NextChat-Awesome-Plugins](https://github.com/ChatGPTNextWeb/NextChat-Awesome-Plugins)
105106
- 🚀 v2.14.0 Now supports Artifacts & SD
@@ -134,10 +135,11 @@ For enterprise inquiries, please contact: **[email protected]**
134135
- [x] Artifacts: 通过独立窗口，轻松预览、复制和分享生成的内容/可交互网页 [#5092](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/pull/5092)
135136
- [x] 插件机制，支持`联网搜索`、`计算器`、调用其他平台 api [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165) [#5353](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5353)
136137
- [x] 支持联网搜索、计算器、调用其他平台 api [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165) [#5353](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5353)
138+
- [x] 支持 Realtime Chat [#5672](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5672)
137139
- [ ] 本地知识库
138140

139141
## 最新动态
140-
142+
- 🚀 v2.15.8 现在支持Realtime Chat [#5672](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5672)
141143
- 🚀 v2.15.4 客户端支持Tauri本地直接调用大模型API，更安全！[#5379](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5379)
142144
- 🚀 v2.15.0 现在支持插件功能了！了解更多：[NextChat-Awesome-Plugins](https://github.com/ChatGPTNextWeb/NextChat-Awesome-Plugins)
143145
- 🚀 v2.14.0 现在支持 Artifacts & SD 了。

‎app/components/chat.module.scss

+76-19
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,14 @@
4545
.chat-input-actions {
4646
display: flex;
4747
flex-wrap: wrap;
48+
justify-content: space-between;
49+
gap: 5px;
50+
51+
&-end {
52+
display: flex;
53+
margin-left: auto;
54+
gap: 5px;
55+
}
4856

4957
.chat-input-action {
5058
display: inline-flex;
@@ -62,10 +70,6 @@
6270
width: var(--icon-width);
6371
overflow: hidden;
6472

65-
&:not(:last-child) {
66-
margin-right: 5px;
67-
}
68-
6973
.text {
7074
white-space: nowrap;
7175
padding-left: 5px;
@@ -231,10 +235,12 @@
231235

232236
animation: slide-in ease 0.3s;
233237

234-
$linear: linear-gradient(to right,
235-
rgba(0, 0, 0, 0),
236-
rgba(0, 0, 0, 1),
237-
rgba(0, 0, 0, 0));
238+
$linear: linear-gradient(
239+
to right,
240+
rgba(0, 0, 0, 0),
241+
rgba(0, 0, 0, 1),
242+
rgba(0, 0, 0, 0)
243+
);
238244
mask-image: $linear;
239245

240246
@mixin show {
@@ -373,7 +379,7 @@
373379
}
374380
}
375381

376-
.chat-message-user>.chat-message-container {
382+
.chat-message-user > .chat-message-container {
377383
align-items: flex-end;
378384
}
379385

@@ -443,6 +449,25 @@
443449
transition: all ease 0.3s;
444450
}
445451

452+
.chat-message-audio {
453+
display: flex;
454+
align-items: center;
455+
justify-content: space-between;
456+
border-radius: 10px;
457+
background-color: rgba(0, 0, 0, 0.05);
458+
border: var(--border-in-light);
459+
position: relative;
460+
transition: all ease 0.3s;
461+
margin-top: 10px;
462+
font-size: 14px;
463+
user-select: text;
464+
word-break: break-word;
465+
box-sizing: border-box;
466+
audio {
467+
height: 30px; /* 调整高度 */
468+
}
469+
}
470+
446471
.chat-message-item-image {
447472
width: 100%;
448473
margin-top: 10px;
@@ -471,23 +496,27 @@
471496
border: rgba($color: #888, $alpha: 0.2) 1px solid;
472497
}
473498

474-
475499
@media only screen and (max-width: 600px) {
476-
$calc-image-width: calc(100vw/3*2/var(--image-count));
500+
$calc-image-width: calc(100vw / 3 * 2 / var(--image-count));
477501

478502
.chat-message-item-image-multi {
479503
width: $calc-image-width;
480504
height: $calc-image-width;
481505
}
482-
506+
483507
.chat-message-item-image {
484-
max-width: calc(100vw/3*2);
508+
max-width: calc(100vw / 3 * 2);
485509
}
486510
}
487511

488512
@media screen and (min-width: 600px) {
489-
$max-image-width: calc(calc(1200px - var(--sidebar-width))/3*2/var(--image-count));
490-
$image-width: calc(calc(var(--window-width) - var(--sidebar-width))/3*2/var(--image-count));
513+
$max-image-width: calc(
514+
calc(1200px - var(--sidebar-width)) / 3 * 2 / var(--image-count)
515+
);
516+
$image-width: calc(
517+
calc(var(--window-width) - var(--sidebar-width)) / 3 * 2 /
518+
var(--image-count)
519+
);
491520

492521
.chat-message-item-image-multi {
493522
width: $image-width;
@@ -497,7 +526,7 @@
497526
}
498527

499528
.chat-message-item-image {
500-
max-width: calc(calc(1200px - var(--sidebar-width))/3*2);
529+
max-width: calc(calc(1200px - var(--sidebar-width)) / 3 * 2);
501530
}
502531
}
503532

@@ -515,7 +544,7 @@
515544
z-index: 1;
516545
}
517546

518-
.chat-message-user>.chat-message-container>.chat-message-item {
547+
.chat-message-user > .chat-message-container > .chat-message-item {
519548
background-color: var(--second);
520549

521550
&:hover {
@@ -626,7 +655,8 @@
626655
min-height: 68px;
627656
}
628657

629-
.chat-input:focus {}
658+
.chat-input:focus {
659+
}
630660

631661
.chat-input-send {
632662
background-color: var(--primary);
@@ -693,4 +723,31 @@
693723
.shortcut-key span {
694724
font-size: 12px;
695725
color: var(--black);
696-
}
726+
}
727+
728+
.chat-main {
729+
display: flex;
730+
height: 100%;
731+
width: 100%;
732+
position: relative;
733+
overflow: hidden;
734+
.chat-body-container {
735+
height: 100%;
736+
display: flex;
737+
flex-direction: column;
738+
flex: 1;
739+
width: 100%;
740+
}
741+
.chat-side-panel {
742+
position: absolute;
743+
inset: 0;
744+
background: var(--white);
745+
overflow: hidden;
746+
z-index: 10;
747+
transform: translateX(100%);
748+
transition: all ease 0.3s;
749+
&-show {
750+
transform: translateX(0);
751+
}
752+
}
753+
}

0 commit comments

Comments
 (0)