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) => { | ||||||
|  |     if (renameValue.trim().length > 0) { | ||||||
|       onUpdateConversation(conversation, { key: 'name', value: renameValue }); |       onUpdateConversation(conversation, { key: 'name', value: renameValue }); | ||||||
|       setRenameValue(''); |       setRenameValue(''); | ||||||
|       setIsRenaming(false); |       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