🐛 fix: improve topic item interaction and editing behavior (#10409)

♻️ refactor: improve topic item interaction and editing behavior

Author: sxjeru

src/app/[variants]/(main)/chat/components/topic/features/Topic/TopicListContent/TopicItem/TopicContent.tsx

@@ -97,15 +97,15 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
       },
       ...(isDesktop
         ? [
-          {
-            icon: <Icon icon={ExternalLink} />,
-            key: 'openInNewWindow',
-            label: t('actions.openInNewWindow'),
-            onClick: () => {
-              openTopicInNewWindow(activeId, id);
+            {
+              icon: <Icon icon={ExternalLink} />,
+              key: 'openInNewWindow',
+              label: t('actions.openInNewWindow'),
+              onClick: () => {
+                openTopicInNewWindow(activeId, id);
+              },
             },
-          },
-        ]
+          ]
         : []),
       {
         type: 'divider',
@@ -210,6 +210,13 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
       ) : (
         <EditableText
           editing={editing}
+          onBlur={(e) => {
+            const v = (e.target as HTMLInputElement).value;
+            if (title !== v) {
+              updateTopicTitle(id, v);
+            }
+            toggleEditing(false);
+          }}
           onChangeEnd={(v) => {
             if (title !== v) {
               updateTopicTitle(id, v);

src/app/[variants]/(main)/chat/components/topic/features/Topic/TopicListContent/TopicItem/index.tsx

@@ -3,7 +3,6 @@ import { createStyles } from 'antd-style';
 import qs from 'query-string';
 import { Suspense, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { Link } from 'react-router-dom';
 
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
@@ -54,47 +53,45 @@ export interface ConfigCellProps {
 const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav, threadId }) => {
   const { styles, cx } = useStyles();
   const toggleConfig = useGlobalStore((s) => s.toggleMobileTopic);
-  const [toggleTopic] = useChatStore((s) => [s.switchTopic]);
+  const [toggleTopic, editing] = useChatStore((s) => [s.switchTopic, s.topicRenamingId === id]);
   const activeId = useSessionStore((s) => s.activeId);
   const [isHover, setHovering] = useState(false);
 
-  const topicUrl = qs.stringifyUrl({
-    query: id ? { session: activeId, topic: id } : { session: activeId },
-    url: '/chat',
-  });
-
   return (
     <Flexbox style={{ position: 'relative' }}>
-      <Link
+      <Flexbox
+        align={'center'}
+        className={cx(styles.container, 'topic-item', active && !threadId && styles.active)}
+        distribution={'space-between'}
+        horizontal
         onClick={(e) => {
-          if (e.button === 0 && (e.metaKey || e.ctrlKey)) {
+          // 重命名时不切换话题
+          if (editing) return;
+          // Ctrl/Cmd+点击在新窗口打开
+          if (e.button === 0 && (e.metaKey || e.ctrlKey) && id) {
+            const topicUrl = qs.stringifyUrl({
+              query: { session: activeId, topic: id },
+              url: '/chat',
+            });
+            window.open(topicUrl, '_blank');
             return;
           }
-          e.preventDefault();
           toggleTopic(id);
           toggleConfig(false);
         }}
-        to={topicUrl}
+        onMouseEnter={() => {
+          setHovering(true);
+        }}
+        onMouseLeave={() => {
+          setHovering(false);
+        }}
       >
-        <Flexbox
-          align={'center'}
-          className={cx(styles.container, 'topic-item', active && !threadId && styles.active)}
-          distribution={'space-between'}
-          horizontal
-          onMouseEnter={() => {
-            setHovering(true);
-          }}
-          onMouseLeave={() => {
-            setHovering(false);
-          }}
-        >
-          {!id ? (
-            <DefaultContent />
-          ) : (
-            <TopicContent fav={fav} id={id} showMore={isHover} title={title} />
-          )}
-        </Flexbox>
-      </Link>
+        {!id ? (
+          <DefaultContent />
+        ) : (
+          <TopicContent fav={fav} id={id} showMore={isHover} title={title} />
+        )}
+      </Flexbox>
       {active && (
         <Suspense
           fallback={

src/layout/GlobalProvider/StoreInitialization.tsx

@@ -9,14 +9,14 @@ import { createStoreUpdater } from 'zustand-utils';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { useAiInfraStore } from '@/store/aiInfra';
+import { useElectronStore } from '@/store/electron';
+import { electronSyncSelectors } from '@/store/electron/selectors';
 import { useGlobalStore } from '@/store/global';
 import { useServerConfigStore } from '@/store/serverConfig';
 import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 import { useUrlHydrationStore } from '@/store/urlHydration';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
-import { electronSyncSelectors } from '@/store/electron/selectors';
-import { useElectronStore } from '@/store/electron';
 
 const StoreInitialization = memo(() => {
   // prefetch error ns to avoid don't show error content correctly
@@ -68,7 +68,7 @@ const StoreInitialization = memo(() => {
   const isSyncActive = useElectronStore((s) => electronSyncSelectors.isSyncActive(s));
 
   // init user provider key vaults
-  useInitAiProviderKeyVaults(isLoginOnInit,isSyncActive);
+  useInitAiProviderKeyVaults(isLoginOnInit, isSyncActive);
 
   // init user state
   useInitUserState(isLoginOnInit, serverConfig, {

src/store/aiInfra/slices/aiProvider/action.ts

@@ -77,10 +77,10 @@ export const normalizeImageModel = async (
   const fallbackParametersPromise = model.parameters
     ? Promise.resolve<ModelParamsSchema | undefined>(model.parameters)
     : getModelPropertyWithFallback<ModelParamsSchema | undefined>(
-      model.id,
-      'parameters',
-      model.providerId,
-    );
+        model.id,
+        'parameters',
+        model.providerId,
+      );
 
   const modelWithPricing = model as AIImageModelCard;
   const fallbackPricingPromise = modelWithPricing.pricing