Merge branch 'main' into dev

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,32 +7,54 @@ assignees: ''
 
 ---
 
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.
+# Bug Report
+
+## Description
+
+**Bug Summary:**
+[Provide a brief but clear summary of the bug]
+
+**Steps to Reproduce:**
+[Outline the steps to reproduce the bug. Be as detailed as possible.]
+
+**Expected Behavior:**
+[Describe what you expected to happen.]
+
+**Actual Behavior:**
+[Describe what actually happened.]
+
+## Environment
+
+- **Operating System:** [e.g., Windows 10, macOS Big Sur, Ubuntu 20.04]
+- **Browser (if applicable):** [e.g., Chrome 100.0, Firefox 98.0]
+
+## Reproduction Details
+
+**Confirmation:**
+- [ ] I have read and followed all the instructions provided in the README.md.
+- [ ] I have reviewed the troubleshooting.md document.
+- [ ] I have included the browser console logs.
+- [ ] I have included the Docker container logs.
+
+## Logs and Screenshots
+
+**Browser Console Logs:**
+[Include relevant browser console logs, if applicable]
+
+**Docker Container Logs:**
+[Include relevant Docker container logs, if applicable]
+
+**Screenshots (if applicable):**
+[Attach any relevant screenshots to help illustrate the issue]
+
+## Installation Method
+
+[Describe the method you used to install the project, e.g., manual installation, Docker, package manager, etc.]
+
+## Additional Information
+
+[Include any additional details that may help in understanding and reproducing the issue. This could include specific configurations, error messages, or anything else relevant to the bug.]
+
+## Note
+
+If the bug report is incomplete or does not follow the provided instructions, it may not be addressed. Please ensure that you have followed the steps outlined in the README.md and troubleshooting.md documents, and provide all necessary information for us to reproduce and address the issue. Thank you!

README.md

@@ -13,6 +13,8 @@
 
 ChatGPT-Style Web Interface for Ollama 🦙
 
+**Disclaimer:** *ollama-webui is a community-driven project and is not affiliated with the Ollama team in any way. This initiative is independent, and any inquiries or feedback should be directed to [our community on Discord](https://discord.gg/5rJgQTnV4s). We kindly request users to refrain from contacting or harassing the Ollama team regarding this project.*
+
 ![Ollama Web UI Demo](./demo.gif)
 
 Also check our sibling project, [OllamaHub](https://ollamahub.com/), where you can discover, download, and explore customized Modelfiles for Ollama! 🦙🔍
@@ -123,6 +125,10 @@ docker run -d -p 3000:8080 -e OLLAMA_API_BASE_URL=https://example.com/api --name
 
 While we strongly recommend using our convenient Docker container installation for optimal support, we understand that some situations may require a non-Docker setup, especially for development purposes. Please note that non-Docker installations are not officially supported, and you might need to troubleshoot on your own.
 
+**Warning: Backend Dependency for Proper Functionality**
+
+In order to ensure the seamless operation of our application, it is crucial to run both the backend and frontend components simultaneously. Serving only the frontend in isolation is not supported and may lead to unpredictable outcomes, rendering the application inoperable. Attempting to raise an issue when solely serving the frontend will not be addressed, as it falls outside the intended usage. To achieve optimal results, please strictly adhere to the specified steps outlined in this documentation. Utilize the frontend solely for building static files, and subsequently run the complete application with the provided backend commands. Failure to follow these instructions may result in unsupported configurations, and we may not be able to provide assistance in such cases. Your cooperation in following the prescribed procedures is essential for a smooth user experience and effective issue resolution.
+
 ### TL;DR 🚀
 
 Run the following commands to install:

TROUBLESHOOTING.md

@@ -45,6 +45,15 @@ Becomes
 docker run --platform linux/amd64 -d -p 3000:8080 -e OLLAMA_API_BASE_URL=http://example.com:11434/api --name ollama-webui --restart always ghcr.io/ollama-webui/ollama-webui:main
 ```
 
+## Running ollama-webui as a container on WSL Ubuntu
+If you're running ollama-webui via docker on WSL Ubuntu and have chosen to install webui and ollama separately, you might encounter connection issues. This is often due to the docker container being unable to reach the Ollama server at 127.0.0.1:11434. To resolve this, you can use the `--network=host` flag in the docker command. 
+
+Here's an example of the command you should run:
+
+```bash
+docker run -d --network=host -e OLLAMA_API_BASE_URL=http://127.0.0.1:11434/api --name ollama-webui --restart always ghcr.io/ollama-webui/ollama-webui:main
+```
+
 ## References
 
 [Change Docker Desktop Settings on Mac](https://docs.docker.com/desktop/settings/mac/) Search for "x86" in that page.

package.json

@@ -3,7 +3,6 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"start": "http-server ./build -P http://localhost:8080?",
 		"dev": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
@@ -42,7 +41,6 @@
 		"@sveltejs/adapter-node": "^1.3.1",
 		"file-saver": "^2.0.5",
 		"highlight.js": "^11.9.0",
-		"http-server": "^14.1.1",
 		"idb": "^7.1.1",
 		"js-sha256": "^0.10.1",
 		"katex": "^0.16.9",

src/lib/components/chat/MessageInput.svelte

@@ -2,6 +2,7 @@
 	import { settings } from '$lib/stores';
 	import toast from 'svelte-french-toast';
 	import Suggestions from './MessageInput/Suggestions.svelte';
+	import { onMount } from 'svelte';
 
 	export let submitPrompt: Function;
 	export let stopResponse: Function;
@@ -11,6 +12,7 @@
 
 	let filesInputElement;
 	let inputFiles;
+	let dragged = false;
 
 	export let files = [];
 
@@ -82,8 +84,74 @@
 			}
 		}
 	};
+
+	onMount(() => {
+		const dropZone = document.querySelector('body');
+
+		dropZone?.addEventListener('dragover', (e) => {
+			e.preventDefault();
+			dragged = true;
+		});
+
+		dropZone.addEventListener('drop', (e) => {
+			e.preventDefault();
+			console.log(e);
+
+			if (e.dataTransfer?.files) {
+				let reader = new FileReader();
+
+				reader.onload = (event) => {
+					files = [
+						...files,
+						{
+							type: 'image',
+							url: `${event.target.result}`
+						}
+					];
+				};
+
+				if (
+					e.dataTransfer?.files &&
+					e.dataTransfer?.files.length > 0 &&
+					['image/gif', 'image/jpeg', 'image/png'].includes(e.dataTransfer?.files[0]['type'])
+				) {
+					reader.readAsDataURL(e.dataTransfer?.files[0]);
+				} else {
+					toast.error(`Unsupported File Type '${e.dataTransfer?.files[0]['type']}'.`);
+				}
+			}
+
+			dragged = false;
+		});
+
+		dropZone?.addEventListener('dragleave', () => {
+			dragged = false;
+		});
+	});
 </script>
 
+{#if dragged}
+	<div
+		class="absolute w-full h-full flex z-50 touch-none pointer-events-none"
+		id="dropzone"
+		role="region"
+		aria-label="Drag and Drop Container"
+	>
+		<div class="absolute rounded-xl w-full h-full backdrop-blur bg-gray-800/40 flex justify-center">
+			<div class="m-auto pt-48 flex flex-col justify-center">
+				<div class="max-w-md">
+					<div class="  text-center text-6xl mb-3">🏞️</div>
+					<div class="text-center dark:text-white text-2xl font-semibold z-50">Add Images</div>
+
+					<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
+						Drop any images here to add to the conversation
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <div class="fixed bottom-0 w-full">
 	<div class="px-2.5 pt-2.5 -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
 		{#if messages.length == 0 && suggestionPrompts.length !== 0}

src/lib/components/chat/Messages.svelte

@@ -469,7 +469,12 @@
 											{#each message.files as file}
 												<div>
 													{#if file.type === 'image'}
-														<img src={file.url} alt="input" class=" max-h-96 rounded-lg" />
+														<img
+															src={file.url}
+															alt="input"
+															class=" max-h-96 rounded-lg"
+															draggable="false"
+														/>
 													{/if}
 												</div>
 											{/each}

src/routes/(app)/+layout.svelte

@@ -236,36 +236,39 @@
 				<div
 					class="absolute rounded-xl w-full h-full backdrop-blur bg-gray-900/60 flex justify-center"
 				>
-					<div class="m-auto pb-44">
-						<div class="text-center dark:text-white text-2xl font-medium z-50">
-							Ollama Update Required
-						</div>
-
-						<div class=" mt-4 text-center max-w-md text-sm dark:text-gray-200">
-							Oops! It seems like your Ollama needs a little attention. <br
-								class=" hidden sm:flex"
-							/>
-							We encountered a connection issue or noticed that you're running an outdated version. Please
-							update to
-							<span class=" dark:text-white font-medium">{requiredOllamaVersion} or above</span>.
-						</div>
-
-						<div class=" mt-6 mx-auto relative group w-fit">
-							<button
-								class="relative z-20 flex px-5 py-2 rounded-full bg-gray-100 hover:bg-gray-200 transition font-medium text-sm"
-								on:click={async () => {
-									await setOllamaVersion(await getOllamaVersion());
-								}}
-							>
-								Check Again
-							</button>
-
-							<button
-								class="text-xs text-center w-full mt-2 text-gray-400 underline"
-								on:click={async () => {
-									await setOllamaVersion(requiredOllamaVersion);
-								}}>Close</button
-							>
+					<div class="m-auto pb-44 flex flex-col justify-center">
+						<div class="max-w-md">
+							<div class="text-center dark:text-white text-2xl font-medium z-50">
+								Connection Issue or Update Needed
+							</div>
+
+							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
+								Oops! It seems like your Ollama needs a little attention. <br
+									class=" hidden sm:flex"
+								/>We've detected either a connection hiccup or observed that you're using an older
+								version. Ensure you're on the latest Ollama version
+								<br class=" hidden sm:flex" />(version
+								<span class=" dark:text-white font-medium">{requiredOllamaVersion} or higher</span>)
+								or check your connection.
+							</div>
+
+							<div class=" mt-6 mx-auto relative group w-fit">
+								<button
+									class="relative z-20 flex px-5 py-2 rounded-full bg-gray-100 hover:bg-gray-200 transition font-medium text-sm"
+									on:click={async () => {
+										await setOllamaVersion(await getOllamaVersion());
+									}}
+								>
+									Check Again
+								</button>
+
+								<button
+									class="text-xs text-center w-full mt-2 text-gray-400 underline"
+									on:click={async () => {
+										await setOllamaVersion(requiredOllamaVersion);
+									}}>Close</button
+								>
+							</div>
 						</div>
 					</div>
 				</div>