chat feature added

.eslintignore

+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

.gitignore

+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

+engine-strict=true

.prettierignore

+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

Dockerfile

+# syntax=docker/dockerfile:1
+
+FROM node:latest
+
+WORKDIR /app
+ENV ENV prod
+
+COPY package.json package-lock.json ./ 
+RUN npm ci
+
+
+COPY . .
+RUN npm run build
+
+CMD [ "node", "./build/index.js"]

README.md

+# Ollama Web UI 👋
+
+ChatGPT-Style Web Interface for Ollama 🦙
+
+![Ollama Web UI Demo](./demo.gif)
+
+## Features ⭐
+
+- 🖥️ **Intuitive Interface**: Our chat interface takes inspiration from ChatGPT, ensuring a user-friendly experience.
+- 📱 **Responsive Design**: Enjoy a seamless experience on both desktop and mobile devices.
+- ⚡ **Swift Responsiveness**: Enjoy fast and responsive performance.
+- 🚀 **Effortless Setup**: Install seamlessly using Docker for a hassle-free experience.
+- 🤖 **Multiple Model Support**: Seamlessly switch between different chat models for diverse interactions.
+- 🌟 **Continuous Updates**: We are committed to improving Ollama Web UI with regular updates and new features.
+
+## How to Install 🚀
+
+### Using Docker 🐳
+
+```bash
+docker build -t ollama-webui .
+docker run -d -p 3000:3000 --name ollama-webui --restart always ollama-webui
+```
+
+Your Ollama Web UI should now be hosted at [http://localhost:3000](http://localhost:3000). Enjoy! 😄
+
+## What's Next? 🚀
+
+### To-Do List 📝
+
+Here are some exciting tasks on our to-do list:
+
+- 📜 **Chat History**: Effortlessly access and manage your conversation history.
+- 📤📥 **Import/Export Chat History**: Seamlessly move your chat data in and out of the platform.
+- 🎨 **Customization**: Tailor your chat environment with personalized themes and styles.
+- 📥🗑️ **Download/Delete Models**: Easily acquire or remove models directly from the web UI.
+- ⚙️ **Advanced Parameters Support**: Harness the power of advanced settings for fine-tuned control.
+- 📚 **Enhanced Documentation**: Elevate your setup and customization experience with improved, comprehensive documentation.
+- 🌟 **User Interface Enhancement**: Elevate the user interface to deliver a smoother, more enjoyable interaction.
+- 📲🖥️ **Cross-Device Responsiveness**: Seamlessly transition between desktop and mobile for a consistent experience.
+- 🚀 **Integration with Messaging Platforms**: Explore possibilities for integrating with popular messaging platforms like Slack and Discord.
+- 🧐 **User Testing and Feedback Gathering**: Conduct thorough user testing to gather insights and refine our offerings based on valuable user feedback.
+
+Feel free to contribute and help us make Ollama Web UI even better! 🙌
+
+## Contributors ✨
+
+A big shoutout to our amazing contributors who have helped make this project possible! 🙏
+
+- [Jeffrey Morgan (Creator of Ollama)](https://github.com/jmorganca)
+- [Timothy J. Baek](https://github.com/tjbck)
+
+## License 📜
+
+This project is licensed under the [MIT License](LICENSE) - see the [LICENSE](LICENSE) file for details. 📄
+
+## Support 💬
+
+If you have any questions, suggestions, or need assistance, please open an issue or join our [Discord community](https://discord.gg/ollama) to connect with us! 🤝
+
+---
+
+Let's make Ollama Web UI even more amazing together! 💪

package.json

+{
+	"name": "ollama-webui",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@typescript-eslint/eslint-plugin": "^6.0.0",
+		"@typescript-eslint/parser": "^6.0.0",
+		"autoprefixer": "^10.4.16",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"postcss": "^8.4.31",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tailwindcss": "^3.3.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2"
+	},
+	"type": "module",
+	"dependencies": {
+		"@sveltejs/adapter-node": "^1.3.1",
+		"marked": "^9.1.0",
+		"svelte-french-toast": "^1.2.0"
+	}
+}

postcss.config.js

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

run.sh

+docker stop ollama-webui || true
+docker rm ollama-webui || true
+docker build -t ollama-webui .
+docker run -d -p 3000:3000 --name ollama-webui --restart always ollama-webui
+docker image prune -f
\ No newline at end of file

src/app.css

+@font-face {
+	font-family: 'Arimo';
+	src: url('/assets/fonts/Arimo-Variable.ttf');
+	font-display: swap;
+}
+
+html {
+	@apply bg-gray-800;
+}
+
+::-webkit-scrollbar-thumb {
+	--tw-border-opacity: 1;
+	background-color: rgba(217, 217, 227, 0.8);
+	border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+	border-radius: 9999px;
+	border-width: 1px;
+}
+
+::-webkit-scrollbar {
+	height: 1rem;
+	width: 0.5rem;
+}
+
+::-webkit-scrollbar-track {
+	background-color: transparent;
+	border-radius: 9999px;
+}
+
+select {
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
+	background-position: right 0.5rem center;
+	background-repeat: no-repeat;
+	background-size: 1.5em 1.5em;
+	padding-right: 2.5rem;
+	-webkit-print-color-adjust: exact;
+	print-color-adjust: exact;
+	/* for Firefox */
+	-moz-appearance: none;
+	/* for Chrome */
+	-webkit-appearance: none;
+}

src/app.d.ts

+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/lib/components/chat/SettingsModal.svelte

+<script>
+	import Modal from '../common/Modal.svelte';
+	export let show = false;
+</script>
+
+<Modal bind:show>
+	<div class="mt-3 p-3 rounded-lg bg-gray-900">
+		<label for="models" class="block mb-2 text-sm font-medium text-gray-200">Select a model</label>
+		<select
+			id="models"
+			class="border border-gray-600 bg-gray-700 text-gray-200 text-sm rounded-lg block w-full p-2.5 placeholder-gray-400"
+		>
+			<option value="US">United States</option>
+			<option value="CA">Canada</option>
+			<option value="FR">France</option>
+			<option value="DE">Germany</option>
+		</select>
+	</div>
+</Modal>

src/lib/components/common/Modal.svelte

+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { fade, blur } from 'svelte/transition';
+
+	export let show = true;
+	let mounted = false;
+
+	onMount(() => {
+		mounted = true;
+	});
+
+	$: if (mounted) {
+		if (show) {
+			document.body.style.overflow = 'hidden';
+		} else {
+			document.body.style.overflow = 'unset';
+		}
+	}
+</script>
+
+{#if show}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		class="fixed top-0 right-0 left-0 bottom-0 bg-stone-900/50 w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
+		on:click={() => {
+			show = false;
+		}}
+	>
+		<div
+			class="m-auto min-h-52 max-w-full w-[30rem] bg-stone-800 rounded-lg p-5 mx-3 shadow-3xl"
+			transition:fade={{ delay: 100, duration: 200 }}
+			on:click={(e) => {
+				e.stopPropagation();
+			}}
+		>
+			<slot />
+		</div>
+	</div>
+{/if}

src/lib/components/common/Overlay.svelte

+<script>
+	import Spinner from './Spinner.svelte';
+
+	export let show = false;
+	export let content = '';
+
+	export let opacity = 1;
+</script>
+
+<div class="relative">
+	{#if show}
+		<div class="absolute w-full h-full flex">
+			<div
+				class="absolute rounded"
+				style="inset: -10px; opacity: {opacity}; backdrop-filter: blur(5px);"
+			/>
+
+			<div class="flex w-full flex-col justify-center">
+				<div class=" py-3">
+					<Spinner className="ml-2" />
+				</div>
+
+				{#if content !== ''}
+					<div class="text-center text-gray-100 text-xs font-medium z-50">
+						{content}
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<slot />
+</div>

src/lib/components/common/Spinner.svelte

+<script lang="ts">
+	export let className: string = 'text-white';
+	export let theme: 'blue' | 'white' | 'black' = 'white';
+</script>
+
+<div class="flex justify-center text-center {className}">
+	<svg
+		class="animate-spin -ml-1 mr-3 h-5 w-5 {theme === 'blue'
+			? 'text-sky-600'
+			: theme === 'white'
+			? 'text-white'
+			: 'text-gray-600'} "
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+	>
+		<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+		<path
+			class="opacity-75"
+			fill="currentColor"
+			d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+		/>
+	</svg>
+</div>