Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix #283: small ui fixes (#299)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/_components/ConfirmDeleteConversationModal/index.tsx
View File

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

2
web/app/_components/LoginButton/index.tsx
View File

@ -12,7 +12,7 @@ const LoginButton: React.FC = () => {
// <button // <button
// onClick={signInWithKeyCloak} // onClick={signInWithKeyCloak}
// type="button" // 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 // Login
// </button> // </button>

12
web/app/_components/ModelSelector/index.tsx
View File

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

2
web/app/_components/PrimaryButton/index.tsx
View File

@ -16,7 +16,7 @@ const PrimaryButton: React.FC<Props> = ({
<button <button
onClick={onClick} onClick={onClick}
type="button" 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 " : "" fullWidth ? "flex-1 " : ""
}}`} }}`}
> >

2
web/app/_components/SendButton/index.tsx
View File

@ -25,7 +25,7 @@ const SendButton: React.FC = () => {
onClick={sendChatMessage} onClick={sendChatMessage}
style={disabled ? disabledStyle : enabledStyle} style={disabled ? disabledStyle : enabledStyle}
type="submit" 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} /> <ArrowRightIcon width={16} height={16} />
</button> </button>

2
web/app/_components/SimpleTextMessage/index.tsx
View File

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

16
web/app/_hooks/useDeleteConversation.ts
View File

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