feat: enhance ContentSearch and MessageTools components

- Added placeholder and adjusted styles for the Input in ContentSearch. - Updated SearchBarContainer to use fixed positioning and improved padding. - Refactored MessageTools to render raw content correctly and added a new MarkdownContainer for better styling. - Minor adjustments to other components for improved layout and user experience.
2025-12-31 16:49:07 +08:00 · 2025-05-20 13:52:10 +08:00 · 2025-05-20 13:52:10 +08:00 · c1a81b88b0
commit c1a81b88b0
parent 9d64690c42
13 changed files with 72 additions and 35 deletions
--- a/src/renderer/src/assets/images/providers/qwenlm.png
+++ b/src/renderer/src/assets/images/providers/qwenlm.png
--- a/src/renderer/src/components/ContentSearch.tsx
+++ b/src/renderer/src/components/ContentSearch.tsx
@ -558,7 +558,13 @@ export const ContentSearch = React.forwardRef<ContentSearchRef, Props>(
        <NarrowLayout style={{ width: '100%' }}>
          <SearchBarContainer>
            <InputWrapper>
-              <Input ref={searchInputRef} onInput={userInputHandler} onKeyDown={keyDownHandler} />
+              <Input
+                ref={searchInputRef}
+                onInput={userInputHandler}
+                onKeyDown={keyDownHandler}
+                placeholder={t('chat.assistant.search.placeholder')}
+                style={{ lineHeight: '20px' }}
+              />
              <ToolBar>
                <Tooltip title={t('button.includes_user_questions')} mouseEnterDelay={0.8} placement="bottom">
                  <ToolbarButton type="text" onClick={userOutlinedButtonOnClick}>
@ -627,14 +633,16 @@ const SearchBarContainer = styled.div`
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: all 0.2s ease;
-  position: relative;
-  margin: 5px 20px;
-  margin-bottom: 0;
-  padding: 6px 15px 8px;
+  position: fixed;
+  top: 15px;
+  left: 20px;
+  right: 20px;
+  margin-bottom: 5px;
+  padding: 5px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
-  background-color: var(--color-background-opacity);
+  background-color: var(--color-background);
  flex: 1 1 auto; /* Take up input's previous space */
 `

--- a/src/renderer/src/components/ContextMenu/index.tsx
+++ b/src/renderer/src/components/ContextMenu/index.tsx
@ -73,7 +73,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ children, onContextMenu }) =>
  ]

  return (
-    <div onContextMenu={handleContextMenu} style={{ width: '100%' }}>
+    <div onContextMenu={handleContextMenu}>
      {contextMenuPosition && (
        <Dropdown
          overlayStyle={{ position: 'fixed', left: contextMenuPosition.x, top: contextMenuPosition.y, zIndex: 1000 }}
--- a/src/renderer/src/components/CustomCollapse.tsx
+++ b/src/renderer/src/components/CustomCollapse.tsx
@ -31,7 +31,8 @@ const CustomCollapse: FC<CustomCollapseProps> = ({
  const defaultCollapseStyle = {
    width: '100%',
    background: 'transparent',
-    border: '0.5px solid var(--color-border)'
+    border: '0.5px solid var(--color-border)',
+    overflow: 'hidden'
  }

  const defaultCollapseItemStyles = {
--- a/src/renderer/src/components/MinApp/WebviewContainer.tsx
+++ b/src/renderer/src/components/MinApp/WebviewContainer.tsx
@ -67,6 +67,7 @@ const WebviewContainer = memo(
        style={WebviewStyle}
        allowpopups={'true' as any}
        partition="persist:webview"
+        useragent="Chrome"
      />
    )
  }
--- a/src/renderer/src/pages/home/Messages/MessageHeader.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageHeader.tsx
@ -69,8 +69,14 @@ const MessageHeader: FC<Props> = memo(({ assistant, model, message }) => {
      }
    : undefined

+  const containerStyle = isBubbleStyle
+    ? {
+        justifyContent: isAssistantMessage ? 'flex-start' : 'flex-end'
+      }
+    : undefined
+
  return (
-    <Container className="message-header">
+    <Container className="message-header" style={containerStyle}>
      <AvatarWrapper style={avatarStyle}>
        {isAssistantMessage ? (
          <Avatar
--- a/src/renderer/src/pages/home/Messages/MessageTools.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageTools.tsx
@ -192,17 +192,17 @@ const MessageTools: FC<Props> = ({ blocks }) => {
                {
                  key: 'preview',
                  label: t('message.tools.preview'),
-                  children: renderPreview(expandedResponse.content)
-                },
-                {
-                  key: 'raw',
-                  label: t('message.tools.raw'),
                  children: (
                    <CollapsedContent
                      isExpanded={true}
                      resultString={resultString}
                    />
                  )
+                },
+                {
+                  key: 'raw',
+                  label: t('message.tools.raw'),
+                  children: renderPreview(expandedResponse.content)
                }
              ]}
            />
@ -223,7 +223,7 @@ const CollapsedContent: FC<{ isExpanded: boolean; resultString: string }> = ({ i
    return null
  }

-  return <div className="markdown" dangerouslySetInnerHTML={{ __html: styledResult }} />
+  return <MarkdownContainer className="markdown" dangerouslySetInnerHTML={{ __html: styledResult }} />
 }

 const CollapseContainer = styled(Collapse)`
@ -246,6 +246,12 @@ const CollapseContainer = styled(Collapse)`
  }
 `

+const MarkdownContainer = styled.div`
+  & pre span {
+    white-space: pre-wrap;
+  }
+`
+
 const MessageTitleLabel = styled.div`
  display: flex;
  flex-direction: row;
--- a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
@ -206,9 +206,14 @@ const SettingsTab: FC<Props> = (props) => {
        title={t('assistants.settings.title')}
        defaultExpanded={true}
        extra={
-          <HStack alignItems="center">
+          <HStack alignItems="center" gap={2}>
            <Tooltip title={t('chat.settings.reset')}>
-              <RotateCcw size={20} onClick={onReset} style={{ cursor: 'pointer', padding: '0 3px' }} />
+              <Button
+                type="text"
+                size="small"
+                onClick={onReset}
+                icon={<RotateCcw size={20} style={{ cursor: 'pointer', padding: '0 3px', opacity: 0.8 }} />}
+              />
            </Tooltip>
            <Button
              type="text"
@ -226,7 +231,7 @@ const SettingsTab: FC<Props> = (props) => {
            </Tooltip>
          </Row>
          <Row align="middle" gutter={10}>
-            <div style={{ width: '100%' }}>
+            <Col span={23}>
              <Slider
                min={0}
                max={2}
@ -235,7 +240,7 @@ const SettingsTab: FC<Props> = (props) => {
                value={typeof temperature === 'number' ? temperature : 0}
                step={0.1}
              />
-            </div>
+            </Col>
          </Row>
          <Row align="middle">
            <Label>{t('chat.settings.context_count')}</Label>
@ -244,7 +249,7 @@ const SettingsTab: FC<Props> = (props) => {
            </Tooltip>
          </Row>
          <Row align="middle" gutter={10}>
-            <div style={{ width: '100%' }}>
+            <Col span={23}>
              <Slider
                min={0}
                max={maxContextCount}
@ -253,7 +258,7 @@ const SettingsTab: FC<Props> = (props) => {
                value={typeof contextCount === 'number' ? contextCount : 0}
                step={1}
              />
-            </div>
+            </Col>
          </Row>
          <SettingDivider />
          <SettingRow>
--- a/src/renderer/src/pages/settings/MCPSettings/AddMcpServerModal.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/AddMcpServerModal.tsx
@ -167,6 +167,8 @@ const AddMcpServerModal: FC<AddMcpServerModalProps> = ({ visible, onClose, onSuc
      onCancel={onClose}
      confirmLoading={loading}
      destroyOnClose
+      centered
+      transitionName="animation-move-down"
      width={600}>
      <Form form={form} layout="vertical" name="add_mcp_server_form">
        <Form.Item
--- a/src/renderer/src/providers/AiProvider/OpenAIProvider.ts
+++ b/src/renderer/src/providers/AiProvider/OpenAIProvider.ts
@ -1231,7 +1231,8 @@ export default class OpenAIProvider extends BaseOpenAIProvider {
    try {
      const data = await this.sdk.embeddings.create({
        model: model.id,
-        input: model?.provider === 'baidu-cloud' ? ['hi'] : 'hi'
+        input: model?.provider === 'baidu-cloud' ? ['hi'] : 'hi',
+        encoding_format: 'float'
      })
      return data.data[0].embedding.length
    } catch (e) {
--- a/src/renderer/src/store/index.ts
+++ b/src/renderer/src/store/index.ts
@ -46,7 +46,7 @@ const persistedReducer = persistReducer(
  {
    key: 'cherry-studio',
    storage,
-    version: 103,
+    version: 104,
    blacklist: ['runtime', 'messages', 'messageBlocks'],
    migrate
  },
--- a/src/renderer/src/store/llm.ts
+++ b/src/renderer/src/store/llm.ts
@ -46,16 +46,6 @@ export const INITIAL_PROVIDERS: Provider[] = [
    isSystem: true,
    enabled: false
  },
-  {
-    id: 'burncloud',
-    name: 'BurnCloud',
-    type: 'openai',
-    apiKey: '',
-    apiHost: 'https://ai.burncloud.com',
-    models: SYSTEM_MODELS.burncloud,
-    isSystem: true,
-    enabled: false
-  },
  {
    id: 'ocoolai',
    name: 'ocoolAI',
@ -136,6 +126,16 @@ export const INITIAL_PROVIDERS: Provider[] = [
    isSystem: true,
    enabled: false
  },
+  {
+    id: 'burncloud',
+    name: 'BurnCloud',
+    type: 'openai',
+    apiKey: '',
+    apiHost: 'https://ai.burncloud.com',
+    models: SYSTEM_MODELS.burncloud,
+    isSystem: true,
+    enabled: false
+  },
  {
    id: 'o3',
    name: 'O3',
--- a/src/renderer/src/store/migrate.ts
+++ b/src/renderer/src/store/migrate.ts
@ -839,7 +839,6 @@ const migrateConfig = {
  },
  '66': (state: RootState) => {
    try {
-      addProvider(state, 'burncloud')
      addProvider(state, 'gitee-ai')
      addProvider(state, 'ppio')
      addMiniApp(state, 'aistudio')
@ -1026,7 +1025,6 @@ const migrateConfig = {
  },
  '78': (state: RootState) => {
    try {
-      state.llm.providers = moveProvider(state.llm.providers, 'burncloud', 9)
      state.llm.providers = moveProvider(state.llm.providers, 'ppio', 9)
      state.llm.providers = moveProvider(state.llm.providers, 'infini', 10)
      removeMiniAppIconsFromState(state)
@ -1414,6 +1412,15 @@ const migrateConfig = {
    } catch (error) {
      return state
    }
+  },
+  '104': (state: RootState) => {
+    try {
+      addProvider(state, 'burncloud')
+      state.llm.providers = moveProvider(state.llm.providers, 'burncloud', 10)
+      return state
+    } catch (error) {
+      return state
+    }
  }
 }