diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss index a3ab5606..0297a56a 100644 --- a/app/components/chat.module.scss +++ b/app/components/chat.module.scss @@ -18,6 +18,7 @@ align-items: center; height: 16px; width: var(--icon-width); + overflow: hidden; &:not(:last-child) { margin-right: 5px; @@ -29,14 +30,16 @@ opacity: 0; transform: translateX(-5px); transition: all ease 0.3s; - transition-delay: 0.1s; pointer-events: none; } &:hover { + --delay: 0.5s; width: var(--full-width); + transition-delay: var(--delay); .text { + transition-delay: var(--delay); opacity: 1; transform: translate(0); } diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 7f54a7dd..b4297a7a 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -504,6 +504,7 @@ export function ChatActions(props: { {showModelSelector && ( ({ title: m, value: m, diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx index bf83712d..7025daf7 100644 --- a/app/components/ui-lib.tsx +++ b/app/components/ui-lib.tsx @@ -443,6 +443,7 @@ export function Selector(props: { subTitle?: string; value: T; }>; + defaultSelectedValue?: T; onSelection?: (selection: T[]) => void; onClose?: () => void; multiple?: boolean; @@ -452,6 +453,7 @@ export function Selector(props: {
{props.items.map((item, i) => { + const selected = props.defaultSelectedValue === item.value; return ( (props: { props.onSelection?.([item.value]); props.onClose?.(); }} - > + > + {selected ? ( +
+ ) : ( + <> + )} + ); })}