fix: minor ui (#5247)
This commit is contained in:
Faisal Amir
GitHub
parent
e33a37776f
commit
3accef8c92
@ -258,7 +258,7 @@ const DropdownModelProvider = ({
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={onOpenChange}>
|
||||
<div className="bg-main-view-fg/5 hover:bg-main-view-fg/8 px-2 py-1 flex items-center gap-1.5 rounded-sm max-h-[32px]">
|
||||
<div className="bg-main-view-fg/5 hover:bg-main-view-fg/8 px-2 py-1 flex items-center gap-1.5 rounded-sm max-h-[32px] ">
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
title={displayModel}
|
||||
@ -280,12 +280,19 @@ const DropdownModelProvider = ({
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
{currentModel?.settings && provider && (
|
||||
<ModelSetting model={currentModel as Model} provider={provider} />
|
||||
<ModelSetting
|
||||
model={currentModel as Model}
|
||||
provider={provider}
|
||||
smallIcon
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PopoverContent
|
||||
className={cn('w-60 p-0', searchValue.length === 0 && 'h-[320px]')}
|
||||
className={cn(
|
||||
'w-60 p-0 backdrop-blur-2xl',
|
||||
searchValue.length === 0 && 'h-[320px]'
|
||||
)}
|
||||
align="start"
|
||||
sideOffset={10}
|
||||
alignOffset={-8}
|
||||
@ -294,7 +301,7 @@ const DropdownModelProvider = ({
|
||||
>
|
||||
<div className="flex flex-col w-full h-full">
|
||||
{/* Search input */}
|
||||
<div className="relative px-2 py-1.5 border-b border-main-view-fg/10">
|
||||
<div className="relative px-2 py-1.5 border-b border-main-view-fg/10 backdrop-blur-4xl">
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
value={searchValue}
|
||||
@ -331,7 +338,7 @@ const DropdownModelProvider = ({
|
||||
return (
|
||||
<div
|
||||
key={providerKey}
|
||||
className="bg-main-view-fg/4 first:mt-0 rounded-sm my-1.5 mx-1.5 first:mb-0"
|
||||
className="bg-main-view-fg/4 backdrop-blur-2xl first:mt-0 rounded-sm my-1.5 mx-1.5 first:mb-0"
|
||||
>
|
||||
{/* Provider header */}
|
||||
<div className="flex items-center justify-between px-2 py-1">
|
||||
@ -342,7 +349,7 @@ const DropdownModelProvider = ({
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="size-6 cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out"
|
||||
className="size-6 cursor-pointer flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
navigate({
|
||||
@ -377,7 +384,7 @@ const DropdownModelProvider = ({
|
||||
key={searchableModel.value}
|
||||
onClick={() => handleSelect(searchableModel)}
|
||||
className={cn(
|
||||
'mx-1 mb-1 px-2 py-1.5 rounded cursor-pointer flex items-center gap-2 transition-all duration-200',
|
||||
'mx-1 mb-1 px-2 py-1.5 rounded-sm cursor-pointer flex items-center gap-2 transition-all duration-200',
|
||||
'hover:bg-main-view-fg/10',
|
||||
isSelected && 'bg-main-view-fg/15'
|
||||
)}
|
||||
|
||||
@ -99,8 +99,12 @@ export default function DropdownToolsAvailable({
|
||||
<DropdownMenu onOpenChange={setIsOpen}>
|
||||
<DropdownMenuTrigger asChild>{renderTrigger()}</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent side="top" align="start" className="max-w-64">
|
||||
<DropdownMenuLabel className="flex items-center gap-2 sticky -top-1 z-10 bg-main-view px-4 pl-2 py-2">
|
||||
<DropdownMenuContent
|
||||
side="top"
|
||||
align="start"
|
||||
className="max-w-64 backdrop-blur-xl bg-main-view"
|
||||
>
|
||||
<DropdownMenuLabel className="flex items-center gap-2 sticky -top-1 z-10 px-4 pl-2 py-2 ">
|
||||
Available Tools
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
@ -110,7 +114,7 @@ export default function DropdownToolsAvailable({
|
||||
return (
|
||||
<div
|
||||
key={tool.name}
|
||||
className="py-2 hover:bg-main-view-fg/5 rounded-sm px-2 mx-auto w-full"
|
||||
className="py-2 hover:bg-main-view-fg/5 hover:backdrop-blur-2xl rounded-sm px-2 mx-auto w-full"
|
||||
>
|
||||
<div className="flex items-start justify-center gap-3">
|
||||
<div className="flex items-start justify-between gap-4 w-full">
|
||||
|
||||
@ -117,7 +117,7 @@ const LeftPanel = () => {
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('common.search')}
|
||||
className="w-full pl-7 pr-8 py-1 bg-left-panel-fg/10 rounded text-left-panel-fg focus:outline-none focus:ring-1 focus:ring-left-panel-fg/10"
|
||||
className="w-full pl-7 pr-8 py-1 bg-left-panel-fg/10 rounded-sm text-left-panel-fg focus:outline-none focus:ring-1 focus:ring-left-panel-fg/10"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
@ -141,7 +141,7 @@ const LeftPanel = () => {
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('common.search')}
|
||||
className="w-full pl-7 pr-8 py-1 bg-left-panel-fg/10 rounded text-left-panel-fg focus:outline-none focus:ring-1 focus:ring-left-panel-fg/10"
|
||||
className="w-full pl-7 pr-8 py-1 bg-left-panel-fg/10 rounded-sm text-left-panel-fg focus:outline-none focus:ring-1 focus:ring-left-panel-fg/10"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
@ -13,13 +13,19 @@ import { DynamicControllerSetting } from '@/containers/dynamicControllerSetting'
|
||||
import { useModelProvider } from '@/hooks/useModelProvider'
|
||||
import { updateModel, stopModel } from '@/services/models'
|
||||
import { ModelSettingParams } from '@janhq/core'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
type ModelSettingProps = {
|
||||
provider: ProviderObject
|
||||
model: Model
|
||||
smallIcon?: boolean
|
||||
}
|
||||
|
||||
export function ModelSetting({ model, provider }: ModelSettingProps) {
|
||||
export function ModelSetting({
|
||||
model,
|
||||
provider,
|
||||
smallIcon,
|
||||
}: ModelSettingProps) {
|
||||
const { updateProvider } = useModelProvider()
|
||||
|
||||
// Create a debounced version of stopModel that waits 500ms after the last call
|
||||
@ -87,7 +93,12 @@ export function ModelSetting({ model, provider }: ModelSettingProps) {
|
||||
return (
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<div className="size-6 cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out">
|
||||
<div
|
||||
className={cn(
|
||||
'size-6 cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out',
|
||||
smallIcon && 'size-5'
|
||||
)}
|
||||
>
|
||||
<IconSettings size={18} className="text-main-view-fg/50" />
|
||||
</div>
|
||||
</SheetTrigger>
|
||||
|
||||
@ -106,7 +106,7 @@ const ProvidersMenu = ({
|
||||
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<div className="bg-main-view flex cursor-pointer px-4 my-1.5 items-center gap-1.5 text-main-view-fg/80">
|
||||
<div className="flex cursor-pointer px-4 my-1.5 items-center gap-1.5 text-main-view-fg/80">
|
||||
<IconCirclePlus size={18} />
|
||||
<span>Add Provider</span>
|
||||
</div>
|
||||
|
||||
@ -17,6 +17,7 @@ import { fetchMessages } from '@/services/messages'
|
||||
import { useAppState } from '@/hooks/useAppState'
|
||||
import DropdownAssistant from '@/containers/DropdownAssistant'
|
||||
import { useAssistant } from '@/hooks/useAssistant'
|
||||
import { useAppearance } from '@/hooks/useAppearance'
|
||||
|
||||
// as route.threadsDetail
|
||||
export const Route = createFileRoute('/threads/$threadId')({
|
||||
@ -33,6 +34,7 @@ function ThreadDetail() {
|
||||
const { setCurrentAssistant, assistants } = useAssistant()
|
||||
const { setMessages } = useMessages()
|
||||
const { streamingContent } = useAppState()
|
||||
const { appMainViewBgColor } = useAppearance()
|
||||
|
||||
const { messages } = useMessages(
|
||||
useShallow((state) => ({
|
||||
@ -241,7 +243,10 @@ function ThreadDetail() {
|
||||
<div className="w-4/6 mx-auto pt-2 pb-3 shrink-0 relative">
|
||||
<div
|
||||
className={cn(
|
||||
'from-main-view/20 bg-gradient-to-b to-main-view absolute z-0 -top-6 h-8 py-1 flex w-full justify-center backdrop-blur pointer-events-none opacity-0 visibility-hidden',
|
||||
'absolute z-0 -top-6 h-8 py-1 flex w-full justify-center pointer-events-none opacity-0 visibility-hidden',
|
||||
appMainViewBgColor.a === 1
|
||||
? 'from-main-view/20 bg-gradient-to-b to-main-view backdrop-blur'
|
||||
: 'bg-transparent',
|
||||
!isAtBottom && hasScrollbar && 'visibility-visible opacity-100'
|
||||
)}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user