Skip to content

Commit

Permalink
improve navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@vemonet
vemonet committed Jan 11, 2024
1 parent 8780244 commit d401833
Show file tree
Hide file tree
Showing 11 changed files with 116 additions and 102 deletions.
5 changes: 4 additions & 1 deletion frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,10 @@
"solid",
"@typescript-eslint"
],
"rules": {},
"rules": {
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/ban-ts-comment": "off"
},
"overrides": [
{
"files": [
Expand Down
62 changes: 27 additions & 35 deletions frontend/src/components/chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ export default function Chat() {
};
socket.onclose = (event) => {
console.warn("WebSocket closed with code:", event.code, "reason:", event.reason);
appendMessage("Sorry, an error happened, please retry.")
setLoading(false);
// Attempt to reconnect after a delay
setTimeout(() => {
Expand Down Expand Up @@ -127,7 +126,6 @@ export default function Chat() {

return (
<main class="flex flex-col overflow-y-auto flex-grow">

<div ref={chatContainer} id="chat-container" class="flex-grow overflow-y-auto">

{/* Website description */}
Expand All @@ -141,37 +139,31 @@ export default function Chat() {
// messageElement.className = `border-b border-slate-500 ${sender === "user" ? "bg-gray-100 dark:bg-gray-700" : "bg-gray-200 dark:bg-gray-600 hidden"}`;
<div class={`border-b border-slate-500 ${msg.type === "user" ? "bg-accent" : "bg-secondary"}`}>
<div class="px-2 py-8 mx-auto max-w-5xl">
<div class="container flex items-center">
<div>
<article class="prose max-w-full" innerHTML={DOMPurify.sanitize(marked.parse(msg.message).toString())} />
{/* Add sources when RAG */}
{ msg.sources.length > 0 &&
<>
<For each={msg.sources}>{(source: any, iSource) =>
<>
<button class="m-2 px-3 py-1 text-sm bg-accent hover:bg-base-100 rounded-lg"
// @ts-ignore
onClick={()=>document.getElementById(`source_modal_${iMsg()}_${iSource()}`)?.showModal()}
>
{source.metadata.filename}
</button>
<dialog id={`source_modal_${iMsg()}_${iSource()}`} class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">📖 {source.metadata.filename} [p. {source.metadata.page}]</h3>
<p class="py-4">
{source.page_content}
</p>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
</>
}</For>
</>
}
</div>
</div>
<article class="prose max-w-full" innerHTML={DOMPurify.sanitize(marked.parse(msg.message).toString())} />
{/* Add sources when RAG */}
{ msg.sources.length > 0 &&
<For each={msg.sources}>{(source: any, iSource) =>
<>
<button class="m-2 px-3 py-1 text-sm bg-accent hover:bg-base-100 rounded-lg"
// @ts-ignore
onClick={()=>document.getElementById(`source_modal_${iMsg()}_${iSource()}`)?.showModal()}
>
{source.metadata.filename}
</button>
<dialog id={`source_modal_${iMsg()}_${iSource()}`} class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">📖 {source.metadata.filename} [p. {source.metadata.page}]</h3>
<p class="py-4">
{source.page_content}
</p>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
</>
}</For>
}
</div>
</div>
}
Expand Down Expand Up @@ -201,7 +193,8 @@ export default function Chat() {
<div class="container flex mx-auto max-w-5xl">
<div id="user-input" contenteditable={true} style="height: max-content;"
class="flex-grow px-4 py-2 border border-slate-500 rounded-lg focus:outline-none focus:ring focus:ring-blue-300"
// placeholder="Send a message..."
// @ts-ignore
placeholder="Ask something..."
onInput={(e) => handleInput(e)}
onKeyDown={(e) => handleKeyPress(e)}
/>
Expand All @@ -215,7 +208,6 @@ export default function Chat() {
</div>
</form>
</div>

</main>
);
}
4 changes: 2 additions & 2 deletions frontend/src/layouts/Layout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,11 @@ const { title } = Astro.props;
}

/* Add placeholder in text input */
/* [placeholder]:empty:before {
[placeholder]:empty:before {
content: attr(placeholder);
opacity: 0.6;
pointer-events: none;
} */
}

/* Add tooltip for top nav on desktop */
@media (min-width: 640px) {
Expand Down
95 changes: 57 additions & 38 deletions frontend/src/layouts/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,69 +26,88 @@ export default function Nav() {
};

return (
<nav class="bg-base-300">
<div class="nav-btns-desktop flex justify-between items-center">
{/* Left-side menu */}
<div></div>
{/* <ul class="flex p-3 text-gray-200">
<li class={`border-b-2 ${active("/")} mx-1.5 sm:mx-6`}>
<a href="/">Home</a>
</li>
<li class={`border-b-2 ${active("/about")} mx-1.5 sm:mx-6`}>
<a href="/about">About</a>
</li>
</ul> */}
<div class="navbar bg-base-300 min-h-0 p-0">
<div class="navbar-start">
{/* <ul class="menu menu-horizontal px-1 hidden lg:flex">
<li><a href="/">Home</a></li>
<li><a href="/admin">Admin</a></li>
</ul>
<div class="dropdown lg:hidden">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="/">Home</a></li>
<li><a href="/admin">Admin</a></li>
</ul>
</div> */}
</div>

<div class="navbar-center">
{/* <a class="btn btn-ghost text-xl">daisyUI</a> */}
<div class="text-xl font-thin">
{chatConfig().info.title}
</div>
</div>

<div class="flex space-x-2">
<div class="navbar-end">
{/* Desktop */}
<div class="space-x-3 hidden items-center lg:flex">
{/* Add light/dark theme switch */}
<label class="cursor-pointer grid place-items-center">
<input type="checkbox" onClick={toggleTheme} value="dark" checked class="toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"/>
<svg class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
<svg class="col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</label>
<a href="/gradio/" target="_blank" data-tooltip="Gradio UI">
<button class="px-4 py-3 rounded-lg hover:bg-gray-300">
<button class="p-1 rounded-lg hover:bg-gray-500">
<img class="h-5" src="/gradio_logo.svg" />
</button>
</a>
<a href="/docs" target="_blank" data-tooltip="OpenAPI documentation">
<button class="px-4 py-3 rounded-lg hover:bg-gray-500">
<button class="p-1 rounded-lg hover:bg-gray-500">
<img class="h-5" src="/openapi_logo.svg" />
</button>
</a>
<a href={chatConfig().info.repository_url} target="_blank" rel="noopener noreferrer">
<button data-tooltip="Source code" class="px-4 py-2 mr-6 rounded-lg hover:bg-gray-500">
<i class="fab fa-github text-xl"></i>
<button data-tooltip="Source code" class="px-2 py-1 mr-6 rounded-lg hover:bg-gray-500">
<i class="fab fa-github text-xl" />
</button>
</a>
</div>
</div>
{/* Nav on mobile */}
<div class="nav-btns-mobile flex gap-1 absolute top-2 right-3">
<button data-tooltip="Menu" id="mobile-nav-btn" class="px-4 py-2 rounded-lg hover:bg-gray-500">
<i class="fas fa-bars"></i>
</button>
<div id="nav-btns-mobile" class="hidden">
{/* <!-- <button data-tooltip="Switch theme" id="theme-switch-btn" class="px-4 py-2 rounded-lg hover:bg-gray-300">
<i id="sun-icon" class="fas fa-sun"></i>
<i id="moon-icon" class="fas fa-moon hidden"></i>
</button> --> */}
<a href="/docs" target="_blank" rel="noopener noreferrer" class="text-black hover:text-black dark:text-white">
<button data-tooltip-target="tooltip-api" class="px-4 py-3 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-500">
<img class="h-5" src="https://raw.github.com/vemonet/libre-chat/main/docs/docs/assets/openapi_logo.svg" />
</button>

{/* Mobile */}
<div class="dropdown dropdown-end lg:hidden">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content items-center mt-3 z-[1] p-2 shadow bg-base-100 rounded-box dropdown-left">
{/* <li>
<label class="cursor-pointer grid place-items-center">
<input type="checkbox" onClick={toggleTheme} value="dark" checked class="toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"/>
<svg class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
<svg class="col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</label>
</li> */}
<li>
<a href="/gradio/" target="_blank" data-tooltip="Gradio UI">
<img class="h-5" src="/gradio_logo.svg" />
</a>
<a href={chatConfig().info.repository_url} target="_blank" rel="noopener noreferrer" class="text-black hover:text-black dark:text-white">
<button data-tooltip="Source code" class="px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-500">
<i class="fab fa-github text-xl"></i>
</button>
</li>
<li>
<a href="/docs" target="_blank" data-tooltip="OpenAPI documentation">
<img class="h-5" src="/openapi_logo.svg" />
</a>
</div>
</li>
<li>
<a href={chatConfig().info.repository_url} target="_blank" rel="noopener noreferrer">
<i class="fab fa-github text-xl" />
</a>
</li>
</ul>
</div>
</div>
</nav>

</div>
);
}
1 change: 0 additions & 1 deletion src/libre_chat/webapp/_astro/Nav.2xMXVGgD.js
View file

This file was deleted.

1 change: 1 addition & 0 deletions src/libre_chat/webapp/_astro/Nav.ZZSH7M1w.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/libre_chat/webapp/_astro/admin.MfY5vUw9.css
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion src/libre_chat/webapp/_astro/admin.gZfS6yVK.css
View file

This file was deleted.

Loading

0 comments on commit d401833

Please sign in to comment.