fix: use correct default checked and remove image margin (#52)

GPTGenius · May 16, 2023 · 42b113e · 42b113e
1 parent 06804e9
commit 42b113e
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -72,7 +72,7 @@ There are three ways to set your OpenAI API Key:
 
 > Attention: For Vercel, all environment variables need to be redeployed to take effect.
 
-## 3. Set Midjourney (optional)
+### 3. Set Midjourney (optional)
 If you want to use the AI drawing feature of `Midjourney`, you can configure the relevant `Discord` settings , including the following fields:
 - `DISCORD_SERVER_ID`
 - `DISCORD_CHANNEL_ID`

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -127,7 +127,7 @@
 | 图片生成对话模型    | DALL-E        | 支持的模型：**DALL-E** / **Midjourney** / **Replicate**                                                    |
 | 生成图片数          | 1             | 图像生成对话时，单次对话生成的图片数                                                                         |
 | 生成图片尺寸        | 256x256       | 图像生成对话时，单个图片的尺寸大小                                                                           |
-| Discord Server Id  | -              | 页面里填写后不会试用环境变量中配置的值                                                                      |
+| Discord Server Id  | -              | 页面里填写后不会使用环境变量中配置的值                                                                      |
 | Discord Channel Id | -              | 同上                                                                                                     |
 | Discord Token      | -              | 同上                                                                                                     |  
 

diff --git a/src/components/MessageBox/index.tsx b/src/components/MessageBox/index.tsx
@@ -8,10 +8,11 @@ import SystemAvatar from '@components/Avatar/system';
 import useCopyCode from '@hooks/useCopyCode';
 import './index.css';
 
-const MessageItem: FC<{ message: Message; index?: number }> = ({
-  message,
-  index,
-}) => {
+const MessageItem: FC<{
+  message: Message;
+  mode?: ConversationMode;
+  index?: number;
+}> = ({ message, mode, index }) => {
   const { i18n } = useContext(GlobalContext);
   const isExpired = message.expiredAt && message.expiredAt <= Date.now();
   const createdAt = getRelativeTime(message.createdAt, true);
@@ -32,6 +33,8 @@ const MessageItem: FC<{ message: Message; index?: number }> = ({
         }}
         className={`prose message-box shadow-sm p-4 ${
           message.role === 'user' ? 'bg-gradient text-white' : 'bg-[#ebeced]'
+        } ${
+          mode === 'image' ? 'img-no-margin' : ''
         } break-words overflow-hidden rounded-[16px]`}
       />
       {createdAt ? (
@@ -97,7 +100,7 @@ const MessageBox: FC<{
         />
       ) : null}
       {messages.map((message, index) => (
-        <MessageItem key={index} index={index} message={message} />
+        <MessageItem key={index} index={index} mode={mode} message={message} />
       ))}
       {streamMessage ? (
         <MessageItem message={{ role: 'assistant', content: streamMessage }} />

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -84,6 +84,10 @@ const { title } = Astro.props;
   .prose pre:hover .copy-code {
     display: block;
   }
+  /* image without margin */
+  .prose.img-no-margin img {
+    margin: 0;
+  }
   /* mathjax */
   mjx-container {
     overflow-y: hidden;

diff --git a/src/modules/Content/index.tsx b/src/modules/Content/index.tsx
@@ -60,6 +60,7 @@ const Content: FC<ContentProps> = ({ setActiveSetting }) => {
       ...msg,
       [currentId]: {
         ...conversations[currentId],
+        updatedAt: msgs.slice(-1)?.[0]?.createdAt,
         messages: msgs,
         // If no title, set the first content
         title: conversations[currentId].title || msgs[0].content,

diff --git a/src/modules/Main.tsx b/src/modules/Main.tsx
@@ -37,17 +37,16 @@ const Main: FC<{ lang: Lang; inVercel: boolean }> = ({ lang, inVercel }) => {
   // media query
   const [isMobile, setIsMobile] = useState(isMatchMobile());
 
-  const list = Object.values(conversations)
-    .reverse()
-    .map((conversation) => ({
-      key: conversation.id,
-      mode: conversation.mode,
-      title: conversation.title,
-      message: conversation.messages.slice(-1)?.[0]?.content ?? '',
-      time:
-        conversation.messages.slice(-1)?.[0]?.createdAt ??
-        conversation.createdAt,
-    }));
+  const list = Object.values(conversations).map((conversation) => ({
+    key: conversation.id,
+    mode: conversation.mode,
+    title: conversation.title,
+    message: conversation.messages.slice(-1)?.[0]?.content ?? '',
+    time:
+      conversation.messages.slice(-1)?.[0]?.createdAt ??
+      conversation.updatedAt ??
+      conversation.createdAt,
+  }));
 
   // debounce resize
   const handleDebounceResize = debounce(() => {
@@ -62,7 +61,8 @@ const Main: FC<{ lang: Lang; inVercel: boolean }> = ({ lang, inVercel }) => {
     try {
       const localConversation = localStorage.getItem(localConversationKey);
       if (localConversation) {
-        const conversation = JSON.parse(localConversation);
+        const conversation: Record<string, Conversation> =
+          JSON.parse(localConversation);
         // historical localstorage
         if (Array.isArray(conversation) && conversation.length > 0) {
           setConversations({
@@ -75,9 +75,18 @@ const Main: FC<{ lang: Lang; inVercel: boolean }> = ({ lang, inVercel }) => {
           });
         } else {
           setConversations(conversation);
-          setCurrentId(
-            Object.keys(conversation)?.reverse()?.[0] ?? defaultConversation.id
-          );
+          if (isMobile) {
+            setCurrentId('');
+          } else {
+            setCurrentId(
+              Object.keys(conversation)?.sort((a, b) =>
+                (conversation?.[b]?.updatedAt ?? conversation?.[b]?.createdAt) >
+                (conversation?.[a]?.updatedAt ?? conversation?.[a]?.createdAt)
+                  ? 1
+                  : -1
+              )?.[0] ?? defaultConversation.id
+            );
+          }
         }
       }
     } catch (e) {