fix #283: small ui fixes (#299)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>
This commit is contained in:
NamH 2023-10-07 21:41:07 -07:00 committed by GitHub
parent 780ec5c3fd
commit 70202cceba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 22 additions and 18 deletions

View File

@ -63,8 +63,8 @@ const ConfirmDeleteConversationModal: React.FC = () => {
<div className="mt-2">
<p className="text-sm text-gray-500">
Are you sure you want to delete this conversation? All
of messages will be permanently removed from our servers
forever. This action cannot be undone.
of messages will be permanently removed. This action
cannot be undone.
</p>
</div>
</div>

View File

@ -12,7 +12,7 @@ const LoginButton: React.FC = () => {
// <button
// onClick={signInWithKeyCloak}
// type="button"
// className="rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
// className="rounded-md bg-blue-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
// >
// Login
// </button>

View File

@ -36,7 +36,7 @@ const SelectModels: React.FC = () => {
Select a Model:
</Listbox.Label>
<div className="relative mt-[19px]">
<Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm sm:leading-6">
<Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
<span className="flex items-center">
<img
src={selectedModel.avatarUrl}
@ -68,8 +68,8 @@ const SelectModels: React.FC = () => {
key={model.id}
className={({ active }) =>
classNames(
active ? "bg-indigo-600 text-white" : "text-gray-900",
"relative cursor-default select-none py-2 pl-3 pr-9"
active ? "bg-blue-600 text-white" : "text-gray-900",
"relative cursor-default select-none py-2 pl-3 pr-9",
)
}
value={model}
@ -85,7 +85,7 @@ const SelectModels: React.FC = () => {
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"ml-3 block truncate"
"ml-3 block truncate",
)}
>
{model.name}
@ -95,8 +95,8 @@ const SelectModels: React.FC = () => {
{selected ? (
<span
className={classNames(
active ? "text-white" : "text-indigo-600",
"absolute inset-y-0 right-0 flex items-center pr-4"
active ? "text-white" : "text-blue-600",
"absolute inset-y-0 right-0 flex items-center pr-4",
)}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />

View File

@ -16,7 +16,7 @@ const PrimaryButton: React.FC<Props> = ({
<button
onClick={onClick}
type="button"
className={`rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-50 line-clamp-1 flex-shrink-0 ${className} ${
className={`rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-50 line-clamp-1 flex-shrink-0 ${className} ${
fullWidth ? "flex-1 " : ""
}}`}
>

View File

@ -25,7 +25,7 @@ const SendButton: React.FC = () => {
onClick={sendChatMessage}
style={disabled ? disabledStyle : enabledStyle}
type="submit"
className="p-2 gap-2.5 inline-flex items-center rounded-xl text-sm font-semibold shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
className="p-2 gap-2.5 inline-flex items-center rounded-xl text-sm font-semibold shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
>
<ArrowRightIcon width={16} height={16} />
</button>

View File

@ -53,7 +53,7 @@ const SimpleTextMessage: React.FC<Props> = ({
</div>
))
) : (
<span className="text-sm">{text}</span>
<span className="text-sm leading-loose font-normal">{text}</span>
)}
</div>
</div>

View File

@ -19,12 +19,13 @@ import {
export default function useDeleteConversation() {
const [userConversations, setUserConversations] = useAtom(
userConversationsAtom
userConversationsAtom,
);
const setCurrentPrompt = useSetAtom(currentPromptAtom);
const setShowingProductDetail = useSetAtom(showingProductDetailAtom);
const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom);
const activeConvoId = useAtomValue(getActiveConvoIdAtom);
const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
const deleteMessages = useSetAtom(deleteConversationMessage);
const setMainViewState = useSetAtom(setMainViewStateAtom);
@ -34,14 +35,17 @@ export default function useDeleteConversation() {
try {
await execute(DataService.DELETE_CONVERSATION, activeConvoId);
const currentConversations = userConversations.filter(
(c) => c.id !== activeConvoId
(c) => c.id !== activeConvoId,
);
setUserConversations(currentConversations);
if (currentConversations.length === 0) {
setMainViewState(MainViewState.Welcome);
}
deleteMessages(activeConvoId);
setActiveConvoId(undefined);
if (currentConversations.length > 0) {
setActiveConvoId(currentConversations[0].id);
} else {
setMainViewState(MainViewState.Welcome);
setActiveConvoId(undefined);
}
setCurrentPrompt("");
setShowingProductDetail(false);
setShowingAdvancedPrompt(false);