chore: fix styles in "OpenAI Key" div (#228)
chore: do nothing if the name of the renamed dialog contains nothing. chore: fix some styles chore: remake conversation settings on mobile
This commit is contained in:
parent
a1743c82cc
commit
2269403806
|
@ -111,7 +111,7 @@ export const Chat: FC<Props> = memo(
|
||||||
<div className="overflow-none relative flex-1 bg-white dark:bg-[#343541]">
|
<div className="overflow-none relative flex-1 bg-white dark:bg-[#343541]">
|
||||||
{!(apiKey || serverSideApiKeyIsSet) ? (
|
{!(apiKey || serverSideApiKeyIsSet) ? (
|
||||||
<div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[500px]">
|
<div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[500px]">
|
||||||
<div className="mx-auto mb-5">
|
<div className="mx-auto mb-5 text-gray-800 dark:text-gray-100">
|
||||||
<IconKey size={36} />
|
<IconKey size={36} />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center text-2xl font-semibold text-gray-800 dark:text-gray-100">
|
<div className="text-center text-2xl font-semibold text-gray-800 dark:text-gray-100">
|
||||||
|
@ -201,8 +201,8 @@ export const Chat: FC<Props> = memo(
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{showSettings && (
|
{showSettings && (
|
||||||
<div className="mx-auto flex w-[200px] flex-col space-y-10 pt-8 sm:w-[300px]">
|
<div className="flex flex-col space-y-10 md:max-w-xl md:gap-6 md:py-3 md:pt-6 md:mx-auto lg:max-w-2xl lg:px-0 xl:max-w-3xl">
|
||||||
<div className="flex h-full flex-col space-y-4 rounded border border-neutral-500 p-2">
|
<div className="flex h-full flex-col space-y-4 border-b md:rounded-lg md:border border-neutral-200 p-4 dark:border-neutral-600">
|
||||||
<ModelSelect
|
<ModelSelect
|
||||||
model={conversation.model}
|
model={conversation.model}
|
||||||
models={models}
|
models={models}
|
||||||
|
|
|
@ -49,9 +49,11 @@ export const ConversationComponent: FC<Props> = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleRename = (conversation: Conversation) => {
|
const handleRename = (conversation: Conversation) => {
|
||||||
onUpdateConversation(conversation, { key: 'name', value: renameValue });
|
if (renameValue.trim().length > 0) {
|
||||||
setRenameValue('');
|
onUpdateConversation(conversation, { key: 'name', value: renameValue });
|
||||||
setIsRenaming(false);
|
setRenameValue('');
|
||||||
|
setIsRenaming(false);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -65,10 +67,10 @@ export const ConversationComponent: FC<Props> = ({
|
||||||
return (
|
return (
|
||||||
<div className="relative flex items-center">
|
<div className="relative flex items-center">
|
||||||
{isRenaming && selectedConversation.id === conversation.id ? (
|
{isRenaming && selectedConversation.id === conversation.id ? (
|
||||||
<div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
|
<div className="flex w-full items-center gap-3 rounded-lg bg-gray-500/10 p-3">
|
||||||
<IconMessage size={18} />
|
<IconMessage size={18} />
|
||||||
<input
|
<input
|
||||||
className="mr-12 flex-1 overflow-hidden text-[12.5px] leading-3 overflow-ellipsis border-neutral-400 bg-transparent text-left text-white outline-none focus:border-neutral-100"
|
className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-4 text-white outline-none focus:border-neutral-100"
|
||||||
type="text"
|
type="text"
|
||||||
value={renameValue}
|
value={renameValue}
|
||||||
onChange={(e) => setRenameValue(e.target.value)}
|
onChange={(e) => setRenameValue(e.target.value)}
|
||||||
|
@ -78,10 +80,10 @@ export const ConversationComponent: FC<Props> = ({
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<button
|
<button
|
||||||
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90 ${
|
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-gray-500/10 ${
|
||||||
loading ? 'disabled:cursor-not-allowed' : ''
|
loading ? 'disabled:cursor-not-allowed' : ''
|
||||||
} ${
|
} ${
|
||||||
selectedConversation.id === conversation.id ? 'bg-[#343541]/90' : ''
|
selectedConversation.id === conversation.id ? 'bg-gray-500/10' : ''
|
||||||
}`}
|
}`}
|
||||||
onClick={() => onSelectConversation(conversation)}
|
onClick={() => onSelectConversation(conversation)}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
|
@ -90,7 +92,7 @@ export const ConversationComponent: FC<Props> = ({
|
||||||
>
|
>
|
||||||
<IconMessage size={18} />
|
<IconMessage size={18} />
|
||||||
<div
|
<div
|
||||||
className={`relative max-h-5 flex-1 text-[12.5px] leading-3 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left ${
|
className={`relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3 ${
|
||||||
selectedConversation.id === conversation.id ? 'pr-12' : 'pr-1'
|
selectedConversation.id === conversation.id ? 'pr-12' : 'pr-1'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in New Issue