diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx
index f79e8490..a9a1071d 100644
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -152,71 +152,64 @@ export function MessageExporter() {
         index={currentStepIndex}
         onStepChange={setCurrentStepIndex}
       />
-
-      <div className={styles["message-exporter-body"]}>
-        {currentStep.value === "select" && (
-          <>
-            <List>
-              <ListItem
-                title={Locale.Export.Format.Title}
-                subTitle={Locale.Export.Format.SubTitle}
-              >
-                <Select
-                  value={exportConfig.format}
-                  onChange={(e) =>
-                    updateExportConfig(
-                      (config) =>
-                        (config.format = e.currentTarget.value as ExportFormat),
-                    )
-                  }
-                >
-                  {formats.map((f) => (
-                    <option key={f} value={f}>
-                      {f}
-                    </option>
-                  ))}
-                </Select>
-              </ListItem>
-              <ListItem
-                title={Locale.Export.IncludeContext.Title}
-                subTitle={Locale.Export.IncludeContext.SubTitle}
-              >
-                <input
-                  type="checkbox"
-                  checked={exportConfig.includeContext}
-                  onChange={(e) => {
-                    updateExportConfig(
-                      (config) =>
-                        (config.includeContext = e.currentTarget.checked),
-                    );
-                  }}
-                ></input>
-              </ListItem>
-            </List>
-            <MessageSelector
-              selection={selection}
-              updateSelection={updateSelection}
-              defaultSelectAll
-            />
-          </>
-        )}
-
-        {currentStep.value === "preview" && (
-          <>
-            {exportConfig.format === "text" ? (
-              <MarkdownPreviewer
-                messages={selectedMessages}
-                topic={session.topic}
-              />
-            ) : (
-              <ImagePreviewer
-                messages={selectedMessages}
-                topic={session.topic}
-              />
-            )}
-          </>
-        )}
+      <div
+        className={styles["message-exporter-body"]}
+        style={currentStep.value !== "select" ? { display: "none" } : {}}
+      >
+        <List>
+          <ListItem
+            title={Locale.Export.Format.Title}
+            subTitle={Locale.Export.Format.SubTitle}
+          >
+            <Select
+              value={exportConfig.format}
+              onChange={(e) =>
+                updateExportConfig(
+                  (config) =>
+                    (config.format = e.currentTarget.value as ExportFormat),
+                )
+              }
+            >
+              {formats.map((f) => (
+                <option key={f} value={f}>
+                  {f}
+                </option>
+              ))}
+            </Select>
+          </ListItem>
+          <ListItem
+            title={Locale.Export.IncludeContext.Title}
+            subTitle={Locale.Export.IncludeContext.SubTitle}
+          >
+            <input
+              type="checkbox"
+              checked={exportConfig.includeContext}
+              onChange={(e) => {
+                updateExportConfig(
+                  (config) => (config.includeContext = e.currentTarget.checked),
+                );
+              }}
+            ></input>
+          </ListItem>
+        </List>
+        <MessageSelector
+          selection={selection}
+          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} />
+          )}
+        </div>
+      )}
     </>
   );
 }
diff --git a/app/components/message-selector.tsx b/app/components/message-selector.tsx
index 3068e544..837591ac 100644
--- a/app/components/message-selector.tsx
+++ b/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