Merge pull request #1728 from yanCode/fix/steps

fix:  bug #1727

app/components/exporter.tsx

@@ -152,10 +152,10 @@ export function MessageExporter() {
         index={currentStepIndex}
         onStepChange={setCurrentStepIndex}
       />
-
-      <div className={styles["message-exporter-body"]}>
-        {currentStep.value === "select" && (
-          <>
+      <div
+        className={styles["message-exporter-body"]}
+        style={currentStep.value !== "select" ? { display: "none" } : {}}
+      >
         <List>
           <ListItem
             title={Locale.Export.Format.Title}
@@ -186,8 +186,7 @@ export function MessageExporter() {
               checked={exportConfig.includeContext}
               onChange={(e) => {
                 updateExportConfig(
-                      (config) =>
-                        (config.includeContext = e.currentTarget.checked),
+                  (config) => (config.includeContext = e.currentTarget.checked),
                 );
               }}
             ></input>
@@ -198,25 +197,19 @@ export function MessageExporter() {
           updateSelection={updateSelection}
           defaultSelectAll
         />
-          </>
-        )}
-
+      </div>
       {currentStep.value === "preview" && (
-          <>
+        <div className={styles["message-exporter-body"]}>
           {exportConfig.format === "text" ? (
             <MarkdownPreviewer
               messages={selectedMessages}
               topic={session.topic}
             />
           ) : (
-              <ImagePreviewer
-                messages={selectedMessages}
-                topic={session.topic}
-              />
-            )}
-          </>
+            <ImagePreviewer messages={selectedMessages} topic={session.topic} />
           )}
         </div>
+      )}
     </>
   );
 }

app/components/message-selector.tsx

@@ -75,7 +75,7 @@ export function MessageSelector(props: {
   const isValid = (m: ChatMessage) => m.content && !m.isError && !m.streaming;
   const messages = session.messages.filter(
     (m, i) =>
-      m.id && // messsage must has id
+      m.id && // message must have id
       isValid(m) &&
       (i >= session.messages.length - 1 || isValid(session.messages[i + 1])),
   );
@@ -88,13 +88,13 @@ export function MessageSelector(props: {
     return searchInput.length === 0 || searchIds.has(id);
   };
   const doSearch = (text: string) => {
-    const searchResuts = new Set<number>();
+    const searchResults = new Set<number>();
     if (text.length > 0) {
       messages.forEach((m) =>
-        m.content.includes(text) ? searchResuts.add(m.id!) : null,
+        m.content.includes(text) ? searchResults.add(m.id!) : null,
       );
     }
-    setSearchIds(searchResuts);
+    setSearchIds(searchResults);
   };
 
   // for range selection