fix: update WindowService transparency and improve Inputbar resizing … (#7362)

src/main/services/WindowService.ts

@@ -56,7 +56,7 @@ export class WindowService {
       minHeight: 600,
       show: false,
       autoHideMenuBar: true,
-      transparent: isMac,
+      transparent: false,
       vibrancy: 'sidebar',
       visualEffectState: 'active',
       titleBarStyle: 'hidden',

src/renderer/src/assets/styles/ant.scss

@@ -197,11 +197,26 @@
   }
 }
 
-.ant-dropdown-menu .ant-dropdown-menu-sub {
+.ant-dropdown {
-  max-height: 350px;
+  .ant-dropdown-menu {
-  width: max-content;
+    max-height: 50vh;
-  overflow-y: auto;
+    overflow-y: auto;
-  overflow-x: hidden;
+    border: 0.5px solid var(--color-border);
+    .ant-dropdown-menu-sub {
+      max-height: 50vh;
+      width: max-content;
+      overflow-y: auto;
+      overflow-x: hidden;
+      border: 0.5px solid var(--color-border);
+    }
+  }
+  .ant-dropdown-arrow + .ant-dropdown-menu {
+    border: none;
+  }
+}
+
+.ant-select-dropdown {
+  border: 0.5px solid var(--color-border);
 }
 
 .ant-collapse {

src/renderer/src/pages/home/Inputbar/Inputbar.tsx

@@ -15,7 +15,7 @@ import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useKnowledgeBases } from '@renderer/hooks/useKnowledge'
 import { useMessageOperations, useTopicLoading } from '@renderer/hooks/useMessageOperations'
 import { modelGenerating, useRuntime } from '@renderer/hooks/useRuntime'
-import { useMessageStyle, useSettings } from '@renderer/hooks/useSettings'
+import { useSettings } from '@renderer/hooks/useSettings'
 import { useShortcut, useShortcutDisplay } from '@renderer/hooks/useShortcuts'
 import { useSidebarIconShow } from '@renderer/hooks/useSidebarIcon'
 import { getDefaultTopic } from '@renderer/services/AssistantService'
@@ -87,7 +87,6 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
   const { t } = useTranslation()
   const containerRef = useRef(null)
   const { searching } = useRuntime()
-  const { isBubbleStyle } = useMessageStyle()
   const { pauseMessages } = useMessageOperations(topic)
   const loading = useTopicLoading(topic)
   const dispatch = useAppDispatch()
@@ -673,8 +672,6 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
     setSelectedKnowledgeBases(showKnowledgeIcon ? (assistant.knowledge_bases ?? []) : [])
   }, [assistant.id, assistant.knowledge_bases, showKnowledgeIcon])
 
-  const textareaRows = window.innerHeight >= 1000 || isBubbleStyle ? 2 : 1
-
   const handleKnowledgeBaseSelect = (bases?: KnowledgeBase[]) => {
     updateAssistant({ ...assistant, knowledge_bases: bases })
     setSelectedKnowledgeBases(bases ?? [])
@@ -786,7 +783,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
             contextMenu="true"
             variant="borderless"
             spellCheck={false}
-            rows={textareaRows}
+            rows={2}
             ref={textareaRef}
             style={{
               fontSize,
@@ -933,7 +930,7 @@ const Textarea = styled(TextArea)`
   overflow: auto;
   width: 100%;
   box-sizing: border-box;
-  transition: height 0.2s ease;
+  transition: none !important;
   &.ant-input {
     line-height: 1.4;
   }

src/renderer/src/pages/home/Tabs/index.tsx

@@ -157,7 +157,7 @@ const Container = styled.div`
   flex-direction: column;
   max-width: var(--assistants-width);
   min-width: var(--assistants-width);
-  background-color: transparent;
+  background-color: var(--color-background);
   overflow: hidden;
   .collapsed {
     width: 0;

src/renderer/src/pages/home/components/SelectModelButton.tsx

@@ -6,6 +6,7 @@ import { useAssistant } from '@renderer/hooks/useAssistant'
 import { getProviderName } from '@renderer/services/ProviderService'
 import { Assistant } from '@renderer/types'
 import { Button } from 'antd'
+import { ChevronsUpDown } from 'lucide-react'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -45,9 +46,10 @@ const SelectModelButton: FC<Props> = ({ assistant }) => {
       <ButtonContent>
         <ModelAvatar model={model} size={20} />
         <ModelName>
-          {model ? model.name : t('button.select_model')} {providerName ? '| ' + providerName : ''}
+          {model ? model.name : t('button.select_model')} {providerName ? ' | ' + providerName : ''}
         </ModelName>
       </ButtonContent>
+      <ChevronsUpDown size={14} color="var(--color-icon)" />
     </DropdownButton>
   )
 }
@@ -55,21 +57,23 @@ const SelectModelButton: FC<Props> = ({ assistant }) => {
 const DropdownButton = styled(Button)`
   font-size: 11px;
   border-radius: 15px;
-  padding: 12px 8px 12px 3px;
+  padding: 13px 5px;
   -webkit-app-region: none;
   box-shadow: none;
   background-color: transparent;
   border: 1px solid transparent;
+  margin-top: 1px;
 `
 
 const ButtonContent = styled.div`
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 6px;
 `
 
 const ModelName = styled.span`
   font-weight: 500;
+  margin-right: -2px;
 `
 
 export default SelectModelButton