@@ -61,7 +59,7 @@ export default function Chat({ className }: ChatProps) {
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 248b2dbb..830f0911 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -126,7 +126,7 @@ export function mockUser(cookies: Partial<{ [key: string]: string }>) {
'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
'User-Agent': ua!,
'x-ms-useragent': 'azsdk-js-api-client-factory/1.0.0-beta.1 core-rest-pipeline/1.10.3 OS/Win32',
- cookie: `_U=${_U}` || '',
+ cookie: `_U=${_U}`,
}
}
From f7c65990691ca3c040d807f4a4af627e0803b4a9 Mon Sep 17 00:00:00 2001
From: weaigc <879821485@qq.com>
Date: Fri, 25 Aug 2023 18:26:20 +0800
Subject: [PATCH 05/12] =?UTF-8?q?fix:=20=E6=BB=9A=E5=8A=A8=E4=B8=8D?=
=?UTF-8?q?=E8=83=BD=E5=88=B0=E5=BA=95=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/chat-suggestions.tsx | 11 ++++++++---
src/lib/hooks/chat-history.ts | 5 ++++-
src/pages/api/proxy.ts | 2 +-
src/state/index.ts | 6 ++++--
4 files changed, 17 insertions(+), 7 deletions(-)
diff --git a/src/components/chat-suggestions.tsx b/src/components/chat-suggestions.tsx
index ef8f0bf3..ec08a951 100644
--- a/src/components/chat-suggestions.tsx
+++ b/src/components/chat-suggestions.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useMemo } from 'react'
import { atom, useAtom } from 'jotai'
import HelpIcon from '@/assets/images/help.svg'
import DismissFillIcon from '@/assets/images/dismiss-fill.svg'
@@ -22,9 +22,14 @@ export function ChatSuggestions({ setInput, suggestions = [] }: ChatSuggestionsP
}
})
- useEffect(() => {
+ useMemo(() => {
setSuggestions(suggestions)
- window.scrollBy(0, 800)
+ }, [suggestions, setSuggestions])
+
+ useEffect(() => {
+ setTimeout(() => {
+ window.scrollBy(0, 800)
+ }, 200)
}, [])
return currentSuggestions?.length ? (
diff --git a/src/lib/hooks/chat-history.ts b/src/lib/hooks/chat-history.ts
index 5e0fd9f3..2350282d 100644
--- a/src/lib/hooks/chat-history.ts
+++ b/src/lib/hooks/chat-history.ts
@@ -89,10 +89,13 @@ export function useChatHistory() {
uri.searchParams.append('source', 'cib')
const data = await fetchProxy({
url: uri.toString(),
+ headers: {
+ 'Content-Type': 'application/json',
+ },
method: 'GET',
})
console.log('data', data)
- updateStorage(data)
+ updateStorage({ clientId: chatHistory?.clientId || '', conversationId, history: [{ id: '0', text: 'hello', author: 'user' }] })
}, [chatHistory])
const refreshChats = useCallback(async () => {
diff --git a/src/pages/api/proxy.ts b/src/pages/api/proxy.ts
index da18d1d3..66820432 100644
--- a/src/pages/api/proxy.ts
+++ b/src/pages/api/proxy.ts
@@ -21,7 +21,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
})
const text = await response.text()
res.writeHead(200, {
- 'Content-Type': 'application/text',
+ 'Content-Type': 'application/text; charset=UTF-8',
'x-url': response.url,
'x-status': response.status,
})
diff --git a/src/state/index.ts b/src/state/index.ts
index fad4c949..c7499d87 100644
--- a/src/state/index.ts
+++ b/src/state/index.ts
@@ -1,7 +1,7 @@
import { BingWebBot } from '@/lib/bots/bing'
import { BingConversationStyle, ChatMessageModel, BotId } from '@/lib/bots/bing/types'
import { nanoid } from '@/lib/utils'
-import { atom } from 'jotai'
+import { atom, useAtom } from 'jotai'
import { atomWithImmer } from 'jotai-immer'
import { atomWithStorage, createJSONStorage } from 'jotai/utils'
import { atomFamily } from 'jotai/utils'
@@ -38,10 +38,12 @@ const createBotInstance = () => {
export const chatHistoryAtom = atomWithStorage<{
clientId: string;
+ conversationId: string;
history?: ChatMessageModel[],
}>('chatHistory', {
clientId: '',
- history: [],
+ conversationId: '',
+ history: initialMessages,
}, createJSONStorage(storage))
export const chatFamily = atomFamily(
From 6188eb05bf171a1306def34a1da39627c4459bd7 Mon Sep 17 00:00:00 2001
From: weaigc <879821485@qq.com>
Date: Sat, 26 Aug 2023 00:26:10 +0800
Subject: [PATCH 06/12] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=8E=86?=
=?UTF-8?q?=E5=8F=B2=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/dark.scss | 4 --
src/app/globals.scss | 102 +++++++++++++++++++++-----------
src/app/layout.tsx | 2 +-
src/components/chat-history.tsx | 64 +++++++++++---------
src/components/chat.tsx | 60 +++++++++++--------
src/lib/bots/bing/index.ts | 13 ++--
src/lib/bots/bing/types.ts | 11 ++--
src/lib/bots/bing/utils.ts | 2 +-
src/lib/hooks/chat-history.ts | 83 +++++++++++++++++++++++---
src/lib/hooks/use-bing.ts | 31 ++++++++--
src/lib/utils.ts | 2 +-
src/state/index.ts | 16 +++--
12 files changed, 261 insertions(+), 129 deletions(-)
diff --git a/src/app/dark.scss b/src/app/dark.scss
index 64ab38c5..b9cdf193 100644
--- a/src/app/dark.scss
+++ b/src/app/dark.scss
@@ -1,8 +1,4 @@
@media (prefers-color-scheme: dark) {
-
-
-
-
:root {
--cib-color-foreground-accent-primary: #D7A7BB;
--cib-color-foreground-accent-secondary: #D7A7BB;
diff --git a/src/app/globals.scss b/src/app/globals.scss
index 54c95eae..f18b2be5 100644
--- a/src/app/globals.scss
+++ b/src/app/globals.scss
@@ -355,33 +355,54 @@ body {
@import "./dark.scss";
-main {
- margin: 0 auto;
- position: relative;
- width: calc(100% - var(--side-panel-width));
-}
:root {
- --side-panel-width: 280px;
+ --side-panel-width: 0px;
+ --global-padding-width: 16px;
}
-@media (max-width: 767px) {
- :root {
- --side-panel-width: 16px;
+.side-panel-expanded {
+ --side-panel-width: 330px;
+
+ @media (max-width: 1120px) {
+ --side-panel-width: 280px;
+ }
+
+ @media (max-width: 767px) {
+ --side-panel-width: 0px;
}
}
+.main-root {
+ margin: 0 auto;
+ position: relative;
+}
+
+.main-root,
+.action-root {
+ transition: margin-left .5s ease-in;
+ width: calc(100% - var(--side-panel-width) - var(--global-padding-width));
+ margin-left: calc(0% - var(--side-panel-width));
+}
+
.scroll-button {
- bottom: 8rem;
+ bottom: 5rem;
+ z-index: 100;
+
+ @media (max-width: 767px) {
+ bottom: 8rem;
+ }
}
.header-title {
color: var(--cib-color-stroke-accent-primary);
font-size: 22px;
}
+
.chat-container,
.suggestion-items {
max-width: 1120px;
+ max-width: min(1120px, calc(100% - 2 * var(--side-panel-width) - 2 * var(--global-padding-width)));
margin: 0 auto;
}
@@ -577,6 +598,7 @@ main {
a {
color: var(--cib-color-foreground-system-link-primary);
}
+
opacity: 0;
animation-name: message-enter;
animation-fill-mode: both;
@@ -611,9 +633,11 @@ main {
box-shadow: var(--cib-shadow-elevation-4);
outline: transparent solid 1px;
visibility: hidden;
+
&-container {
pointer-events: auto;
}
+
button {
position: relative;
outline: none;
@@ -636,6 +660,7 @@ main {
line-height: var(--cib-type-body1-line-height);
font-weight: var(--cib-type-body1-font-weight);
font-variation-settings: var(--cib-type-body1-font-variation-settings);
+
&::before {
content: "";
position: absolute;
@@ -742,10 +767,12 @@ main {
animation-duration: 333ms;
animation-delay: 335.4785387307255ms;
}
+
.meta-text {
p {
padding-bottom: 0;
}
+
code {
user-select: text;
word-break: break-word;
@@ -760,6 +787,7 @@ main {
opacity: 0;
transform: scale(0.9);
}
+
100% {
opacity: 1;
transform: scale(1);
@@ -1043,7 +1071,6 @@ button {
display: flex;
align-items: flex-start;
gap: 12px;
- width: calc(100% - var(--side-panel-width));
height: auto;
max-width: 1120px;
min-height: 90px;
@@ -1644,6 +1671,12 @@ button {
}
.chat-history {
+ max-width: var(--side-panel-width);
+ animation-name: message-enter;
+ animation-fill-mode: both;
+ animation-duration: 633ms;
+ animation-delay: 100ms;
+
&-header {
position: relative;
@@ -1686,25 +1719,29 @@ button {
overflow-y: auto;
max-height: calc(100vh - 250px);
box-sizing: border-box;
+
&::-webkit-scrollbar {
width: 10px;
height: 10px;
display: none;
}
+
&::-webkit-scrollbar-button:start:decrement,
- &::-webkit-scrollbar-button:end:increment {
- height: 30px;
- background-color: transparent;
+ &::-webkit-scrollbar-button:end:increment {
+ height: 30px;
+ background-color: transparent;
}
- &::-webkit-scrollbar-track-piece {
- background-color: #3b3b3b;
- -webkit-border-radius: 16px;
+
+ &::-webkit-scrollbar-track-piece {
+ background-color: #3b3b3b;
+ -webkit-border-radius: 16px;
}
+
&::-webkit-scrollbar-thumb:vertical {
- height: 50px;
- background-color: #666;
- border: 1px solid #eee;
- -webkit-border-radius: 6px;
+ height: 50px;
+ background-color: #666;
+ border: 1px solid #eee;
+ -webkit-border-radius: 6px;
}
}
@@ -1712,7 +1749,7 @@ button {
display: flex;
justify-content: space-between;
flex-direction: row;
- inline-size: 100%;
+ width: 100%;
align-items: center;
position: relative;
border-radius: var(--cib-comp-thread-host-border-radius);
@@ -1723,7 +1760,8 @@ button {
flex-direction: column;
gap: 5px;
- &:hover,&.active {
+ &:hover,
+ &.active {
background: var(--cib-color-background-surface-card-primary);
box-shadow: var(--cib-shadow-elevation-1);
@@ -1742,17 +1780,12 @@ button {
.time {
display: none;
}
+
.controls {
display: flex;
}
}
-
-
- &>* {
- width: 100%;
- }
-
&::nth-child(n+1)::before {
position: absolute;
content: "";
@@ -1782,11 +1815,6 @@ button {
margin: 0px;
padding: 0px;
}
-
- &>* {
- flex-grow: 0;
- flex-shrink: 0;
- }
}
.controls {
@@ -1795,6 +1823,7 @@ button {
}
.description {
+ overflow: hidden;
-webkit-mask-image: linear-gradient(to right, var(--cib-color-background-surface-app-primary) 90%, transparent);
}
@@ -1824,8 +1853,9 @@ button {
outline: none;
border: 1px solid var(--cib-color-stroke-accent-primary);
pointer-events: auto;
- width: 226px;
- padding-block: calc( ( 20px - var(--cib-type-body1-line-height) - 2px ) / 2 );
+ width: 100%;
+ padding-block: calc((20px - var(--cib-type-body1-line-height) - 2px) / 2);
+ font-size: var(--cib-type-body1-font-size);
}
.time {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1e08c2b0..2f9e640d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -35,7 +35,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
- {children}
+ {children}
diff --git a/src/components/chat-history.tsx b/src/components/chat-history.tsx
index ddb57e27..34dad7d4 100644
--- a/src/components/chat-history.tsx
+++ b/src/components/chat-history.tsx
@@ -1,17 +1,17 @@
import { useCallback, useEffect, useState } from 'react'
import { useChatHistory, ChatConversation } from '@/lib/hooks/chat-history'
-import { IconEdit, IconTrash, IconMore, IconDownload, IconCheck, IconClose } from './ui/icons'
+import { IconEdit, IconTrash, IconDownload, IconCheck, IconClose } from './ui/icons'
import { cn, formatDate } from '@/lib/utils'
-import { BingReturnType } from '@/lib/hooks/use-bing'
interface ConversationTheadProps {
conversation: ChatConversation
onRename: (conversation: ChatConversation, chatName: string) => void
onDelete: (conversation: ChatConversation) => void
onUpdate: (conversation: ChatConversation) => void
+ onDownload: (conversation: ChatConversation) => void
}
-export function ConversationThead({ conversation, onRename, onDelete, onUpdate }: ConversationTheadProps) {
+export function ConversationThead({ conversation, onRename, onDelete, onUpdate, onDownload }: ConversationTheadProps) {
const [isEdit, setEdit] = useState(false)
const [name, setName] = useState(conversation.chatName)
const handleSave = useCallback(() => {
@@ -25,15 +25,19 @@ export function ConversationThead({ conversation, onRename, onDelete, onUpdate }
const handleDelete = useCallback(() => {
onDelete(conversation)
}, [conversation])
+ const handleDownload = useCallback(() => {
+ onDownload(conversation)
+ }, [conversation])
useEffect(() => {
setName(conversation.chatName)
}, [conversation])
+
return (
-
onUpdate(conversation)}>
-
+
+
{!isEdit ? (
-
{name}
+ onUpdate(conversation)}>{name}
) : ( setName(event.target.value)} />)}
{!isEdit && (
{formatDate(conversation.updateTimeUtc)}
)}
@@ -47,7 +51,7 @@ export function ConversationThead({ conversation, onRename, onDelete, onUpdate }
-