Skip to content

Commit

Permalink
fix: adjustment minor UI from qa feedback (#2963)
Browse files Browse the repository at this point in the history
* feat: update minor ui from feedback

* fix: adjust spacing import model

* feat: edit title thread (#2964)

* feat: edit title thread

* fix: fix copies

* fix copies

* fix copies
  • Loading branch information
urmauur authored May 30, 2024
1 parent 9ac5696 commit b662c25
Show file tree
Hide file tree
Showing 10 changed files with 96 additions and 11 deletions.
4 changes: 2 additions & 2 deletions themes/dark-dimmed/theme.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
},

"left-panel": {
"bg": "0, 0%, 13%, 0",
"bg": "215, 25%, 9%, 1",
"menu": "0, 0%, 95%, 1",
"menu-hover": "0, 0%, 28%, 0.2",
"menu-active": "0, 0%, 100%, 1",
Expand All @@ -64,7 +64,7 @@
},

"right-panel": {
"bg": "0, 0%, 13%, 0"
"bg": "215, 25%, 9%, 1"
},

"tooltip": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function DownloadingState() {
<Modal
title="Downloading model"
trigger={
<div className="flex items-center gap-2">
<div className="flex cursor-pointer items-center gap-2">
<Button size="small" theme="ghost">
<span className="font-medium">
Downloading model{' '}
Expand Down
10 changes: 9 additions & 1 deletion web/containers/Layout/RibbonPanel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,15 @@ export default function RibbonPanel() {
const RibbonNavMenus = [
{
name: 'Thread',
icon: <MessageCircleIcon size={18} className="flex-shrink-0" />,
icon: (
<MessageCircleIcon
size={18}
className={twMerge(
'flex-shrink-0',
serverEnabled && 'text-[hsla(var(--disabled-fg))]'
)}
/>
),
state: MainViewState.Thread,
},
{
Expand Down
2 changes: 1 addition & 1 deletion web/containers/Layout/TopPanel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const TopPanel = () => {
<PaletteIcon size={16} className="cursor-pointer" />
</Button>

{!isMac && (
{isWindows && (
<div className="flex items-center gap-x-2">
<Button
theme="icon"
Expand Down
4 changes: 2 additions & 2 deletions web/containers/LeftPanelContainer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,9 @@ const LeftPanelContainer = ({ children }: Props) => {
showLeftPanel ? 'opacity-100' : 'w-0 translate-x-full opacity-0',
isResizing && 'cursor-col-resize',
matches &&
'absolute left-2 z-50 rounded-s-lg border-r border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
'absolute left-2 z-[100] rounded-s-lg border-r border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
reduceTransparent &&
'border-r border-[hsla(var(--app-border))] bg-[hsla(var(--left-panel-bg))]'
'left-0 border-r border-[hsla(var(--app-border))] bg-[hsla(var(--left-panel-bg))]'
)}
style={{ width: showLeftPanel ? threadLeftPanelWidth : 0 }}
onMouseDown={(e) => isResizing && e.stopPropagation()}
Expand Down
3 changes: 2 additions & 1 deletion web/screens/Settings/Appearance/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,14 @@ export default function AppearanceOptions() {
setThemeData(theme)
setTheme(String(theme?.nativeTheme))
if (theme?.reduceTransparent) {
setReduceTransparent(false)
setReduceTransparent(reduceTransparent)
} else {
setReduceTransparent(true)
}
},
[
janThemesPath,
reduceTransparent,
setReduceTransparent,
setSelectedIdTheme,
setTheme,
Expand Down
4 changes: 2 additions & 2 deletions web/screens/Settings/EditModelInfoModal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ const EditModelInfoModal = () => {
</div>
</div>

<form className="flex flex-col space-y-4">
<form className="mt-4 flex flex-col space-y-4">
<div className="flex flex-col">
<label className="mb-1">Model Name</label>
<Input
Expand Down Expand Up @@ -183,7 +183,7 @@ const EditModelInfoModal = () => {
</div>
</form>

<div className="flex gap-x-2">
<div className="mt-4 flex gap-x-2">
<ModalClose asChild onClick={onCancelClick}>
<Button theme="ghost">Cancel</Button>
</ModalClose>
Expand Down
5 changes: 4 additions & 1 deletion web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,10 @@ const ChatInput = () => {
{showAttacmentMenus && (
<div
ref={refAttachmentMenus}
className="absolute bottom-14 left-0 z-30 w-36 cursor-pointer rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] py-1 shadow-sm"
className={twMerge(
'absolute bottom-14 left-0 z-30 w-36 cursor-pointer rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] py-1 shadow-sm',
activeSetting && 'bottom-28'
)}
>
<ul>
<Tooltip
Expand Down
71 changes: 71 additions & 0 deletions web/screens/Thread/ThreadLeftPanel/ModalEditTitleThread/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { useCallback, memo, useState } from 'react'

import { Thread } from '@janhq/core'
import { Modal, ModalClose, Button, Input } from '@janhq/joi'
import { PencilIcon } from 'lucide-react'

import { useCreateNewThread } from '@/hooks/useCreateNewThread'

type Props = {
thread: Thread
}

const ModalEditTitleThread = ({ thread }: Props) => {
const [title, setTitle] = useState(thread.title)

const { updateThreadMetadata } = useCreateNewThread()

const onUpdateTitle = useCallback(
(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation()

updateThreadMetadata({
...thread,
title: title || 'New Thread',
})
},
[thread, title, updateThreadMetadata]
)

return (
<Modal
title="Edit title thread"
trigger={
<div
className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
onClick={(e) => e.stopPropagation()}
>
<PencilIcon size={16} className="text-[hsla(var(--secondary))]" />
<span className="text-bold text-[hsla(var(--secondary))]">
Edit title
</span>
</div>
}
content={
<form className="mt-4">
<Input
value={title}
onChange={(e) => setTitle(e.target.value)}
autoFocus
/>
<div className="mt-4 flex justify-end gap-x-2">
<ModalClose asChild onClick={(e) => e.stopPropagation()}>
<Button theme="ghost">Cancel</Button>
</ModalClose>
<ModalClose asChild>
<Button
type="submit"
onClick={onUpdateTitle}
disabled={title.length === 0}
>
Save
</Button>
</ModalClose>
</div>
</form>
}
/>
)
}

export default memo(ModalEditTitleThread)
2 changes: 2 additions & 0 deletions web/screens/Thread/ThreadLeftPanel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import useSetActiveThread from '@/hooks/useSetActiveThread'

import ModalCleanThread from './ModalCleanThread'
import ModalDeleteThread from './ModalDeleteThread'
import ModalEditTitleThread from './ModalEditTitleThread'

import { assistantsAtom } from '@/helpers/atoms/Assistant.atom'
import { editMessageAtom } from '@/helpers/atoms/ChatMessage.atom'
Expand Down Expand Up @@ -143,6 +144,7 @@ const ThreadLeftPanel = () => {
<MoreHorizontalIcon />
</Button>
<div className="invisible absolute -right-1 z-50 w-40 overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-lg group-hover/icon:visible">
<ModalEditTitleThread thread={thread} />
<ModalCleanThread threadId={thread.id} />
<ModalDeleteThread threadId={thread.id} />
</div>
Expand Down

0 comments on commit b662c25

Please sign in to comment.