Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: minor ui (#5247)

Browse Source
This commit is contained in:
Faisal Amir 2025-06-12 09:04:47 +07:00 committed by GitHub
parent e33a37776f
commit 3accef8c92
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 43 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web-app/src/containers/DropdownModelProvider.tsx
View File

@ -258,7 +258,7 @@ const DropdownModelProvider = ({
return ( return (
<Popover open={open} onOpenChange={onOpenChange}> <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> <PopoverTrigger asChild>
<button <button
title={displayModel} title={displayModel}
@ -280,12 +280,19 @@ const DropdownModelProvider = ({
</button> </button>
</PopoverTrigger> </PopoverTrigger>
{currentModel?.settings && provider && ( {currentModel?.settings && provider && (
<ModelSetting model={currentModel as Model} provider={provider} /> <ModelSetting
model={currentModel as Model}
provider={provider}
smallIcon
/>
)} )}
</div> </div>
<PopoverContent <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" align="start"
sideOffset={10} sideOffset={10}
alignOffset={-8} alignOffset={-8}
@ -294,7 +301,7 @@ const DropdownModelProvider = ({
> >
<div className="flex flex-col w-full h-full"> <div className="flex flex-col w-full h-full">
{/* Search input */} {/* 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 <input
ref={searchInputRef} ref={searchInputRef}
value={searchValue} value={searchValue}
@ -331,7 +338,7 @@ const DropdownModelProvider = ({
return ( return (
<div <div
key={providerKey} 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 */} {/* Provider header */}
<div className="flex items-center justify-between px-2 py-1"> <div className="flex items-center justify-between px-2 py-1">
@ -342,7 +349,7 @@ const DropdownModelProvider = ({
</span> </span>
</div> </div>
<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) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
navigate({ navigate({
@ -377,7 +384,7 @@ const DropdownModelProvider = ({
key={searchableModel.value} key={searchableModel.value}
onClick={() => handleSelect(searchableModel)} onClick={() => handleSelect(searchableModel)}
className={cn( 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', 'hover:bg-main-view-fg/10',
isSelected && 'bg-main-view-fg/15' isSelected && 'bg-main-view-fg/15'
)} )}

10
web-app/src/containers/DropdownToolsAvailable.tsx
View File

@ -99,8 +99,12 @@ export default function DropdownToolsAvailable({
<DropdownMenu onOpenChange={setIsOpen}> <DropdownMenu onOpenChange={setIsOpen}>
<DropdownMenuTrigger asChild>{renderTrigger()}</DropdownMenuTrigger> <DropdownMenuTrigger asChild>{renderTrigger()}</DropdownMenuTrigger>
<DropdownMenuContent side="top" align="start" className="max-w-64"> <DropdownMenuContent
<DropdownMenuLabel className="flex items-center gap-2 sticky -top-1 z-10 bg-main-view px-4 pl-2 py-2"> 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 Available Tools
</DropdownMenuLabel> </DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
@ -110,7 +114,7 @@ export default function DropdownToolsAvailable({
return ( return (
<div <div
key={tool.name} 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-center gap-3">
<div className="flex items-start justify-between gap-4 w-full"> <div className="flex items-start justify-between gap-4 w-full">

4
web-app/src/containers/LeftPanel.tsx
View File

@ -117,7 +117,7 @@ const LeftPanel = () => {
<input <input
type="text" type="text"
placeholder={t('common.search')} 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} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
/> />
@ -141,7 +141,7 @@ const LeftPanel = () => {
<input <input
type="text" type="text"
placeholder={t('common.search')} 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} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
/> />

15
web-app/src/containers/ModelSetting.tsx
View File

@ -13,13 +13,19 @@ import { DynamicControllerSetting } from '@/containers/dynamicControllerSetting'
import { useModelProvider } from '@/hooks/useModelProvider' import { useModelProvider } from '@/hooks/useModelProvider'
import { updateModel, stopModel } from '@/services/models' import { updateModel, stopModel } from '@/services/models'
import { ModelSettingParams } from '@janhq/core' import { ModelSettingParams } from '@janhq/core'
import { cn } from '@/lib/utils'
type ModelSettingProps = { type ModelSettingProps = {
provider: ProviderObject provider: ProviderObject
model: Model model: Model
smallIcon?: boolean
} }
export function ModelSetting({ model, provider }: ModelSettingProps) { export function ModelSetting({
model,
provider,
smallIcon,
}: ModelSettingProps) {
const { updateProvider } = useModelProvider() const { updateProvider } = useModelProvider()
// Create a debounced version of stopModel that waits 500ms after the last call // Create a debounced version of stopModel that waits 500ms after the last call
@ -87,7 +93,12 @@ export function ModelSetting({ model, provider }: ModelSettingProps) {
return ( return (
<Sheet> <Sheet>
<SheetTrigger asChild> <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" /> <IconSettings size={18} className="text-main-view-fg/50" />
</div> </div>
</SheetTrigger> </SheetTrigger>

2
web-app/src/containers/ProvidersMenu.tsx
View File

@ -106,7 +106,7 @@ const ProvidersMenu = ({
<Dialog> <Dialog>
<DialogTrigger asChild> <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} /> <IconCirclePlus size={18} />
<span>Add Provider</span> <span>Add Provider</span>
</div> </div>

7
web-app/src/routes/threads/$threadId.tsx
View File

@ -17,6 +17,7 @@ import { fetchMessages } from '@/services/messages'
import { useAppState } from '@/hooks/useAppState' import { useAppState } from '@/hooks/useAppState'
import DropdownAssistant from '@/containers/DropdownAssistant' import DropdownAssistant from '@/containers/DropdownAssistant'
import { useAssistant } from '@/hooks/useAssistant' import { useAssistant } from '@/hooks/useAssistant'
import { useAppearance } from '@/hooks/useAppearance'
// as route.threadsDetail // as route.threadsDetail
export const Route = createFileRoute('/threads/$threadId')({ export const Route = createFileRoute('/threads/$threadId')({
@ -33,6 +34,7 @@ function ThreadDetail() {
const { setCurrentAssistant, assistants } = useAssistant() const { setCurrentAssistant, assistants } = useAssistant()
const { setMessages } = useMessages() const { setMessages } = useMessages()
const { streamingContent } = useAppState() const { streamingContent } = useAppState()
const { appMainViewBgColor } = useAppearance()
const { messages } = useMessages( const { messages } = useMessages(
useShallow((state) => ({ useShallow((state) => ({
@ -241,7 +243,10 @@ function ThreadDetail() {
<div className="w-4/6 mx-auto pt-2 pb-3 shrink-0 relative"> <div className="w-4/6 mx-auto pt-2 pb-3 shrink-0 relative">
<div <div
className={cn( 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' !isAtBottom && hasScrollbar && 'visibility-visible opacity-100'
)} )}
> >