Merge branch 'dev' of https://github.com/open-webui/open-webui into feat/web-search-toggle

kubernetes/helm/templates/ollama-statefulset.yaml

-{{- if not .Values.ollama.externalHost }}
-apiVersion: apps/v1
-kind: StatefulSet
-metadata:
-  name: {{ include "ollama.name" . }}
-  labels:
-    {{- include "ollama.labels" . | nindent 4 }}
-  {{- with .Values.ollama.annotations }}
-  annotations:
-    {{- toYaml . | nindent 4 }}
-  {{- end }}
-spec:
-  serviceName: {{ include "ollama.name" . }}
-  replicas: {{ .Values.ollama.replicaCount }}
-  selector:
-    matchLabels:
-      {{- include "ollama.selectorLabels" . | nindent 6 }}
-  template:
-    metadata:
-      labels:
-        {{- include "ollama.labels" . | nindent 8 }}
-      {{- with .Values.ollama.podAnnotations }}
-      annotations:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}
-    spec:
-      enableServiceLinks: false
-      automountServiceAccountToken: false
-      {{- with .Values.ollama.runtimeClassName }}
-      runtimeClassName: {{ . }}
-      {{- end }}
-      containers:
-      - name: {{ include "ollama.name" . }}
-        {{- with .Values.ollama.image }}
-        image: {{ .repository }}:{{ .tag }}
-        imagePullPolicy: {{ .pullPolicy }}
-        {{- end }}
-        tty: true
-        ports:
-        - name: http
-          containerPort: {{ .Values.ollama.service.containerPort }}
-        env:
-        {{- if .Values.ollama.gpu.enabled }}
-          - name: PATH
-            value: /usr/local/nvidia/bin:/usr/local/cuda/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
-          - name: LD_LIBRARY_PATH
-            value: /usr/local/nvidia/lib:/usr/local/nvidia/lib64
-          - name: NVIDIA_DRIVER_CAPABILITIES
-            value: compute,utility
-        {{- end }}
-        {{- with .Values.ollama.resources }}
-        resources: {{- toYaml . | nindent 10 }}
-        {{- end }}
-        volumeMounts:
-        - name: data
-          mountPath: /root/.ollama
-      {{- with .Values.ollama.nodeSelector }}
-      nodeSelector:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}
-      {{- with .Values.ollama.tolerations }}
-      tolerations:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}
-      volumes:
-      {{- if and .Values.ollama.persistence.enabled .Values.ollama.persistence.existingClaim }}
-      - name: data
-        persistentVolumeClaim:
-          claimName: {{ .Values.ollama.persistence.existingClaim }}
-      {{- else if not .Values.ollama.persistence.enabled }}
-      - name: data
-        emptyDir: {}
-      {{- else if and .Values.ollama.persistence.enabled (not .Values.ollama.persistence.existingClaim) }}
-        []
-  volumeClaimTemplates:
-  - metadata:
-      name: data
-      labels:
-        {{- include "ollama.selectorLabels" . | nindent 8 }}
-      {{- with .Values.ollama.persistence.annotations }}
-      annotations:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}
-    spec:
-      accessModes:
-        {{- range .Values.ollama.persistence.accessModes }}
-        - {{ . | quote }}
-        {{- end }}
-      resources:
-        requests:
-          storage: {{ .Values.ollama.persistence.size | quote }}
-      storageClassName: {{ .Values.ollama.persistence.storageClass }}
-      {{- with .Values.ollama.persistence.selector }}
-      selector:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}
-      {{- end }}
-{{- end }}

kubernetes/helm/templates/webui-deployment.yaml

-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: {{ include "open-webui.name" . }}
-  labels:
-    {{- include "open-webui.labels" . | nindent 4 }}
-  {{- with .Values.webui.annotations }}
-  annotations:
-    {{- toYaml . | nindent 4 }}
-  {{- end }}
-spec:
-  replicas: {{ .Values.webui.replicaCount }}
-  selector:
-    matchLabels:
-      {{- include "open-webui.selectorLabels" . | nindent 6 }}
-  template:
-    metadata:
-      labels:
-        {{- include "open-webui.labels" . | nindent 8 }}
-      {{- with .Values.webui.podAnnotations }}
-      annotations:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}
-    spec:
-      enableServiceLinks: false
-      automountServiceAccountToken: false
-      containers:
-      - name: {{ .Chart.Name }}
-        {{- with .Values.webui.image }}
-        image: {{ .repository }}:{{ .tag | default $.Chart.AppVersion }}
-        imagePullPolicy: {{ .pullPolicy }}
-        {{- end }}
-        ports:
-        - name: http
-          containerPort: {{ .Values.webui.service.containerPort }}
-        {{- with .Values.webui.resources }}
-        resources: {{- toYaml . | nindent 10 }}
-        {{- end }}
-        volumeMounts:
-        - name: data
-          mountPath: /app/backend/data
-        env:
-        - name: OLLAMA_BASE_URL
-          value: {{ include "ollama.url" . | quote }}
-        tty: true
-      {{- with .Values.webui.nodeSelector }}
-      nodeSelector:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}
-      volumes:
-      {{- if and .Values.webui.persistence.enabled .Values.webui.persistence.existingClaim }}
-      - name: data
-        persistentVolumeClaim:
-          claimName: {{ .Values.webui.persistence.existingClaim }}
-      {{- else if not .Values.webui.persistence.enabled }}
-      - name: data
-        emptyDir: {}
-      {{- else if and .Values.webui.persistence.enabled (not .Values.webui.persistence.existingClaim) }}
-      - name: data
-        persistentVolumeClaim:
-          claimName: {{ include "open-webui.name" . }}
-      {{- end }}

kubernetes/helm/templates/webui-ingress.yaml

-{{- if .Values.webui.ingress.enabled }}
-apiVersion: networking.k8s.io/v1
-kind: Ingress
-metadata:
-  name: {{ include "open-webui.name" . }}
-  labels:
-    {{- include "open-webui.labels" . | nindent 4 }}
-  {{- with .Values.webui.ingress.annotations }}
-  annotations:
-    {{- toYaml . | nindent 4 }}
-  {{- end }}
-spec:
-  {{- with .Values.webui.ingress.class }}
-  ingressClassName: {{ . }}
-  {{- end }}
-  {{- if .Values.webui.ingress.tls }}
-  tls:
-    - hosts:
-      - {{ .Values.webui.ingress.host | quote }}
-      secretName: {{ default (printf "%s-tls" .Release.Name) .Values.webui.ingress.existingSecret }}
-  {{- end }}
-  rules:
-  - host: {{ .Values.webui.ingress.host }}
-    http:
-      paths:
-      - path: /
-        pathType: Prefix
-        backend:
-          service:
-            name: {{ include "open-webui.name" . }}
-            port:
-              name: http
-{{- end }}

kubernetes/helm/templates/webui-pvc.yaml

-{{- if and .Values.webui.persistence.enabled (not .Values.webui.persistence.existingClaim) }}
-apiVersion: v1
-kind: PersistentVolumeClaim
-metadata:
-  name: {{ include "open-webui.name" . }}
-  labels:
-    {{- include "open-webui.selectorLabels" . | nindent 4 }}
-  {{- with .Values.webui.persistence.annotations }}
-  annotations:
-    {{- toYaml . | nindent 8 }}
-  {{- end }}
-spec:
-  accessModes:
-    {{- range .Values.webui.persistence.accessModes }}
-    - {{ . | quote }}
-    {{- end }}
-  resources:
-    requests:
-      storage: {{ .Values.webui.persistence.size }}
-  {{- if .Values.webui.persistence.storageClass }}
-  storageClassName: {{ .Values.webui.persistence.storageClass }}
-  {{- end }}
-  {{- with .Values.webui.persistence.selector }}
-  selector:
-    {{- toYaml . | nindent 4 }}
-  {{- end }}
-{{- end }}

kubernetes/helm/templates/webui-service.yaml

-apiVersion: v1
-kind: Service
-metadata:
-  name: {{ include "open-webui.name" . }}
-  labels:
-    {{- include "open-webui.labels" . | nindent 4 }}
-    {{- with .Values.webui.service.labels }}
-    {{- toYaml . | nindent 4 }}
-    {{- end }}
-  {{- with .Values.webui.service.annotations }}
-  annotations:
-    {{- toYaml . | nindent 4 }}
-  {{- end }}
-spec:
-  selector:
-    {{- include "open-webui.selectorLabels" . | nindent 4 }}
-  type: {{ .Values.webui.service.type | default "ClusterIP" }}
-  ports:
-  - protocol: TCP
-    name: http
-    port: {{ .Values.webui.service.port }}
-    targetPort: http
-    {{- if .Values.webui.service.nodePort }}
-    nodePort: {{ .Values.webui.service.nodePort | int }}
-    {{- end }}
-  {{- if .Values.webui.service.loadBalancerClass }}
-  loadBalancerClass: {{ .Values.webui.service.loadBalancerClass | quote }}
-  {{- end }}
-

kubernetes/helm/values-minikube.yaml

-ollama:
-  resources:
-    requests:
-      cpu: "2000m"
-      memory: "2Gi"
-    limits:
-      cpu: "4000m"
-      memory: "4Gi"
-      nvidia.com/gpu: "0"
-  service:
-    type: ClusterIP
-  gpu:
-    enabled: false
-
-webui:
-  resources:
-    requests:
-      cpu: "500m"
-      memory: "500Mi"
-    limits:
-      cpu: "1000m"
-      memory: "1Gi"
-  ingress:
-    enabled: true
-    host: open-webui.minikube.local
-  service:
-    type: NodePort

kubernetes/helm/values.yaml

-nameOverride: ""
-
-ollama:
-  externalHost: ""
-  annotations: {}
-  podAnnotations: {}
-  replicaCount: 1
-  image:
-    repository: ollama/ollama
-    tag: latest
-    pullPolicy: Always
-  resources: {}
-  persistence:
-    enabled: true
-    size: 30Gi
-    existingClaim: ""
-    accessModes:
-    - ReadWriteOnce
-    storageClass: ""
-    selector: {}
-    annotations: {}
-  nodeSelector: {}
-  # -- If using a special runtime container such as nvidia, set it here.
-  runtimeClassName: ""
-  tolerations:
-  - key: nvidia.com/gpu
-    operator: Exists
-    effect: NoSchedule
-  service:
-    type: ClusterIP
-    annotations: {}
-    port: 80
-    containerPort: 11434
-  gpu:
-    # -- Enable additional ENV values to help Ollama discover GPU usage
-    enabled: false
-
-webui:
-  annotations: {}
-  podAnnotations: {}
-  replicaCount: 1
-  image:
-    repository: ghcr.io/open-webui/open-webui
-    tag: ""
-    pullPolicy: Always
-  resources: {}
-  ingress:
-    enabled: false
-    class: ""
-    # -- Use appropriate annotations for your Ingress controller, e.g., for NGINX:
-    # nginx.ingress.kubernetes.io/rewrite-target: /
-    annotations: {}
-    host: ""
-    tls: false
-    existingSecret: ""
-  persistence:
-    enabled: true
-    size: 2Gi
-    existingClaim: ""
-    # -- If using multiple replicas, you must update accessModes to ReadWriteMany
-    accessModes:
-    - ReadWriteOnce
-    storageClass: ""
-    selector: {}
-    annotations: {}
-  nodeSelector: {}
-  tolerations: []
-  service:
-    type: ClusterIP
-    annotations: {}
-    port: 80
-    containerPort: 8080
-    nodePort: ""
-    labels: {}
-    loadBalancerClass: "" 

package-lock.json

 {
 	"name": "open-webui",
-	"version": "0.1.123",
+	"version": "0.1.124",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "open-webui",
-			"version": "0.1.123",
+			"version": "0.1.124",
 			"dependencies": {
 				"@sveltejs/adapter-node": "^1.3.1",
 				"async": "^3.2.5",

package.json

 {
 	"name": "open-webui",
-	"version": "0.1.123",
+	"version": "0.1.124",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev --host",

src/app.html

@@ -6,6 +6,12 @@
 		<link rel="manifest" href="%sveltekit.assets%/manifest.json" crossorigin="use-credentials" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 		<meta name="robots" content="noindex,nofollow" />
+		<link
+			rel="search"
+			type="application/opensearchdescription+xml"
+			title="Open WebUI"
+			href="/opensearch.xml"
+		/>
 		<script>
 			// On page load or when changing themes, best to add inline in `head` to avoid FOUC
 			(() => {

src/lib/apis/audio/index.ts

@@ -30,6 +30,8 @@ export const getAudioConfig = async (token: string) => {
 type OpenAIConfigForm = {
 	url: string;
 	key: string;
+	model: string;
+	speaker: string;
 };
 
 export const updateAudioConfig = async (token: string, payload: OpenAIConfigForm) => {
@@ -95,7 +97,8 @@ export const transcribeAudio = async (token: string, file: File) => {
 export const synthesizeOpenAISpeech = async (
 	token: string = '',
 	speaker: string = 'alloy',
-	text: string = ''
+	text: string = '',
+	model: string = 'tts-1'
 ) => {
 	let error = null;
 
@@ -106,7 +109,7 @@ export const synthesizeOpenAISpeech = async (
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
-			model: 'tts-1',
+			model: model,
 			input: text,
 			voice: speaker
 		})

src/lib/apis/ollama/index.ts

@@ -182,7 +182,7 @@ export const generateTitle = async (
 		throw error;
 	}
 
-	return res?.response ?? 'New Chat';
+	return res?.response.replace(/["']/g, '') ?? 'New Chat';
 };
 
 export const generatePrompt = async (token: string = '', model: string, conversation: string) => {

src/lib/apis/openai/index.ts

@@ -239,7 +239,8 @@ export const generateOpenAIChatCompletion = async (
 export const synthesizeOpenAISpeech = async (
 	token: string = '',
 	speaker: string = 'alloy',
-	text: string = ''
+	text: string = '',
+	model: string = 'tts-1'
 ) => {
 	let error = null;
 
@@ -250,7 +251,7 @@ export const synthesizeOpenAISpeech = async (
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
-			model: 'tts-1',
+			model: model,
 			input: text,
 			voice: speaker
 		})
@@ -316,7 +317,7 @@ export const generateTitle = async (
 		throw error;
 	}
 
-	return res?.choices[0]?.message?.content ?? 'New Chat';
+	return res?.choices[0]?.message?.content.replace(/["']/g, '') ?? 'New Chat';
 };
 
 export const generateSearchQuery = async (

src/lib/apis/rag/index.ts

@@ -32,10 +32,16 @@ type ChunkConfigForm = {
 	chunk_overlap: number;
 };
 
+type YoutubeConfigForm = {
+	language: string[];
+	translation?: string | null;
+};
+
 type RAGConfigForm = {
 	pdf_extract_images?: boolean;
 	chunk?: ChunkConfigForm;
 	web_loader_ssl_verification?: boolean;
+	youtube?: YoutubeConfigForm;
 };
 
 export const updateRAGConfig = async (token: string, payload: RAGConfigForm) => {

src/lib/components/ChangelogModal.svelte

@@ -22,7 +22,7 @@
 </script>
 
 <Modal bind:show>
-	<div class="px-5 py-4 dark:text-gray-300 text-gray-700">
+	<div class="px-5 pt-4 dark:text-gray-300 text-gray-700">
 		<div class="flex justify-between items-start">
 			<div class="text-xl font-bold">
 				{$i18n.t('What’s New in')}
@@ -57,10 +57,8 @@
 		</div>
 	</div>
 
-	<hr class=" dark:border-gray-800" />
-
 	<div class=" w-full p-4 px-5 text-gray-700 dark:text-gray-100">
-		<div class=" overflow-y-scroll max-h-80">
+		<div class=" overflow-y-scroll max-h-80 scrollbar-none">
 			<div class="mb-3">
 				{#if changelog}
 					{#each Object.keys(changelog) as version}

src/lib/components/admin/AddUserModal.svelte

@@ -107,7 +107,7 @@
 
 				reader.readAsText(file);
 			} else {
-				toast.error(`File not found.`);
+				toast.error($i18n.t('File not found.'));
 			}
 		}
 	};

src/lib/components/chat/MessageInput/Documents.svelte

@@ -24,7 +24,7 @@
 					{
 						name: 'All Documents',
 						type: 'collection',
-						title: 'All Documents',
+						title: $i18n.t('All Documents'),
 						collection_names: $documents.map((doc) => doc.collection_name)
 					}
 			  ]
@@ -143,7 +143,11 @@
 						</button>
 					{/each}
 
-					{#if prompt.split(' ')?.at(0)?.substring(1).startsWith('https://www.youtube.com')}
+					{#if prompt
+						.split(' ')
+						.some((s) => s.substring(1).startsWith('https://www.youtube.com') || s
+									.substring(1)
+									.startsWith('https://youtu.be'))}
 						<button
 							class="px-3 py-1.5 rounded-xl w-full text-left bg-gray-100 selected-command-option-button"
 							type="button"

src/lib/components/chat/MessageInput/Suggestions.svelte

 <script lang="ts">
 	import Bolt from '$lib/components/icons/Bolt.svelte';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	export let submitPrompt: Function;
 	export let suggestionPrompts = [];
@@ -33,7 +35,7 @@
 {#if prompts.length > 0}
 	<div class="mb-2 flex gap-1 text-sm font-medium items-center text-gray-400 dark:text-gray-600">
 		<Bolt />
-		Suggested
+		{$i18n.t('Suggested')}
 	</div>
 {/if}
 
@@ -71,7 +73,7 @@
 						<div
 							class="text-xs text-gray-400 group-hover:text-gray-500 dark:text-gray-600 dark:group-hover:text-gray-500 transition self-center"
 						>
-							Prompt
+							{$i18n.t('Prompt')}
 						</div>
 
 						<div

src/lib/components/chat/Messages/RateComment.svelte

@@ -123,7 +123,7 @@
 				submitHandler();
 			}}
 		>
-			Submit
+			{$i18n.t('Submit')}
 		</button>
 	</div>
 </div>

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -23,13 +23,13 @@
 		revertSanitizedResponseContent,
 		sanitizeResponseContent
 	} from '$lib/utils';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
 	import Skeleton from './Skeleton.svelte';
 	import CodeBlock from './CodeBlock.svelte';
 	import Image from '$lib/components/common/Image.svelte';
-	import { WEBUI_BASE_URL } from '$lib/constants';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import RateComment from './RateComment.svelte';
 	import CitationsModal from '$lib/components/chat/Messages/CitationsModal.svelte';
@@ -227,7 +227,8 @@
 					const res = await synthesizeOpenAISpeech(
 						localStorage.token,
 						$settings?.audio?.speaker,
-						sentence
+						sentence,
+						$settings?.audio?.model
 					).catch((error) => {
 						toast.error(error);
 
@@ -352,579 +353,569 @@
 				{/if}
 			</Name>
 
-			{#if message.content === ''}
-				<Skeleton />
-			{:else}
-				{#if message.files}
-					<div class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap">
-						{#each message.files as file}
-							<div>
-								{#if file.type === 'image'}
-									<Image src={file.url} />
-								{/if}
-							</div>
-						{/each}
-					</div>
-				{/if}
-				<div
-					class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:m-0 prose-p:-mb-6 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-8 prose-ol:p-0 prose-li:-mb-4 whitespace-pre-line"
-				>
-					<div>
-						{#if edit === true}
-							<div class=" w-full">
-								<textarea
-									id="message-edit-{message.id}"
-									bind:this={editTextAreaElement}
-									class=" bg-transparent outline-none w-full resize-none"
-									bind:value={editedContent}
-									on:input={(e) => {
-										e.target.style.height = '';
-										e.target.style.height = `${e.target.scrollHeight}px`;
-									}}
-								/>
-
-								<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
-									<button
-										class="px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
-										on:click={() => {
-											editMessageConfirmHandler();
-										}}
-									>
-										{$i18n.t('Save')}
-									</button>
-
-									<button
-										class=" px-4 py-2 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
-										on:click={() => {
-											cancelEditMessage();
-										}}
-									>
-										{$i18n.t('Cancel')}
-									</button>
-								</div>
-							</div>
-						{:else}
-							<div class="w-full">
-								{#if message?.error === true}
-									<div
-										class="flex mt-2 mb-4 space-x-2 border px-4 py-3 border-red-800 bg-red-800/30 font-medium rounded-lg"
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											stroke="currentColor"
-											class="w-5 h-5 self-center"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
-											/>
-										</svg>
-
-										<div class=" self-center">
-											{message.content}
-										</div>
-									</div>
-								{:else}
-									{#each tokens as token}
-										{#if token.type === 'code'}
-											<CodeBlock
-												lang={token.lang}
-												code={revertSanitizedResponseContent(token.text)}
-											/>
-										{:else}
-											{@html marked.parse(token.raw, {
-												...defaults,
-												gfm: true,
-												breaks: true,
-												renderer
-											})}
-										{/if}
-									{/each}
-									<!-- {@html marked(message.content.replaceAll('\\', '\\\\'))} -->
-								{/if}
-							</div>
-						{/if}
-					</div>
+			{#if message.files}
+				<div class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap">
+					{#each message.files as file}
+						<div>
+							{#if file.type === 'image'}
+								<Image src={file.url} />
+							{/if}
+						</div>
+					{/each}
 				</div>
+			{/if}
 
-				<!-- if (message.citations) {
-					citations = message.citations.forEach((citation) => {
-						citation.document.forEach((document, index) => {
-							const metadata = citation.metadata?.[index];
-							const source = citation?.source?.name ?? metadata?.source ?? 'N/A';
-		
-							citations[source] = citations[source] || {
-								source: citation.source,
-								document: [],
-								metadata: []
-							};
-		
-							citations[source].document.push(document);
-							citations[source].metadata.push(metadata);
-						});
-					});
-				} -->
-
-				{#if message.citations}
-					<hr class="  dark:border-gray-800" />
-					<div class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap">
-						{#each message.citations.reduce((acc, citation) => {
-							citation.document.forEach((document, index) => {
-								const metadata = citation.metadata?.[index];
-								const id = metadata?.source ?? 'N/A';
-
-								const existingSource = acc.find((item) => item.id === id);
-
-								if (existingSource) {
-									existingSource.document.push(document);
-									existingSource.metadata.push(metadata);
-								} else {
-									acc.push( { id: id, source: citation?.source, document: [document], metadata: metadata ? [metadata] : [] } );
-								}
-							});
-							return acc;
-						}, []) as citation, idx}
-							<div class="flex gap-1 text-xs font-semibold">
-								<div>
-									[{idx + 1}]
-								</div>
-
-								<button
-									class="dark:text-gray-500 underline"
-									on:click={() => {
-										showCitationModal = true;
-										selectedCitation = citation;
-									}}
-								>
-									{citation.source.name}
-								</button>
-							</div>
-						{/each}
-					</div>
-				{/if}
+			<div
+				class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:m-0 prose-p:-mb-6 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-8 prose-ol:p-0 prose-li:-mb-4 whitespace-pre-line"
+			>
+				<div>
+					{#if edit === true}
+						<div class=" w-full">
+							<textarea
+								id="message-edit-{message.id}"
+								bind:this={editTextAreaElement}
+								class=" bg-transparent outline-none w-full resize-none"
+								bind:value={editedContent}
+								on:input={(e) => {
+									e.target.style.height = '';
+									e.target.style.height = `${e.target.scrollHeight}px`;
+								}}
+							/>
 
-				{#if message.done}
-					<div
-						class=" flex justify-start space-x-1 overflow-x-auto buttons text-gray-700 dark:text-gray-500"
-					>
-						{#if siblings.length > 1}
-							<div class="flex self-center min-w-fit">
+							<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
 								<button
-									class="self-center dark:hover:text-white hover:text-black transition"
+									class="px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
 									on:click={() => {
-										showPreviousMessage(message);
+										editMessageConfirmHandler();
 									}}
 								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											fill-rule="evenodd"
-											d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-											clip-rule="evenodd"
-										/>
-									</svg>
+									{$i18n.t('Save')}
 								</button>
 
-								<div class="text-xs font-bold self-center min-w-fit dark:text-gray-100">
-									{siblings.indexOf(message.id) + 1} / {siblings.length}
-								</div>
-
 								<button
-									class="self-center dark:hover:text-white hover:text-black transition"
+									class=" px-4 py-2 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
 									on:click={() => {
-										showNextMessage(message);
+										cancelEditMessage();
 									}}
 								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											fill-rule="evenodd"
-											d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-											clip-rule="evenodd"
-										/>
-									</svg>
+									{$i18n.t('Cancel')}
 								</button>
 							</div>
-						{/if}
-
-						{#if !readOnly}
-							<Tooltip content={$i18n.t('Edit')} placement="bottom">
-								<button
-									class="{isLastMessage
-										? 'visible'
-										: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
-									on:click={() => {
-										editMessageHandler();
-									}}
+						</div>
+					{:else}
+						<div class="w-full">
+							{#if message?.error === true}
+								<div
+									class="flex mt-2 mb-4 space-x-2 border px-4 py-3 border-red-800 bg-red-800/30 font-medium rounded-lg"
 								>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
 										fill="none"
 										viewBox="0 0 24 24"
-										stroke-width="2"
+										stroke-width="1.5"
 										stroke="currentColor"
-										class="w-4 h-4"
+										class="w-5 h-5 self-center"
 									>
 										<path
 											stroke-linecap="round"
 											stroke-linejoin="round"
-											d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
+											d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
 										/>
 									</svg>
-								</button>
-							</Tooltip>
-						{/if}
-
-						<Tooltip content={$i18n.t('Copy')} placement="bottom">
-							<button
-								class="{isLastMessage
-									? 'visible'
-									: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition copy-response-button"
-								on:click={() => {
-									copyToClipboard(message.content);
-								}}
-							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="2"
-									stroke="currentColor"
-									class="w-4 h-4"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
-									/>
-								</svg>
-							</button>
-						</Tooltip>
-
-						{#if !readOnly}
-							<Tooltip content={$i18n.t('Good Response')} placement="bottom">
-								<button
-									class="{isLastMessage
-										? 'visible'
-										: 'invisible group-hover:visible'} p-1 rounded {message?.annotation?.rating ===
-									1
-										? 'bg-gray-100 dark:bg-gray-800'
-										: ''} dark:hover:text-white hover:text-black transition"
-									on:click={() => {
-										rateMessage(message.id, 1);
-										showRateComment = true;
-
-										window.setTimeout(() => {
-											document.getElementById(`message-feedback-${message.id}`)?.scrollIntoView();
-										}, 0);
-									}}
-								>
-									<svg
-										stroke="currentColor"
-										fill="none"
-										stroke-width="2"
-										viewBox="0 0 24 24"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										class="w-4 h-4"
-										xmlns="http://www.w3.org/2000/svg"
-									>
-										<path
-											d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
-										/>
-									</svg>
-								</button>
-							</Tooltip>
 
-							<Tooltip content={$i18n.t('Bad Response')} placement="bottom">
-								<button
-									class="{isLastMessage
-										? 'visible'
-										: 'invisible group-hover:visible'} p-1 rounded {message?.annotation?.rating ===
-									-1
-										? 'bg-gray-100 dark:bg-gray-800'
-										: ''} dark:hover:text-white hover:text-black transition"
-									on:click={() => {
-										rateMessage(message.id, -1);
-										showRateComment = true;
-										window.setTimeout(() => {
-											document.getElementById(`message-feedback-${message.id}`)?.scrollIntoView();
-										}, 0);
-									}}
-								>
-									<svg
-										stroke="currentColor"
-										fill="none"
-										stroke-width="2"
-										viewBox="0 0 24 24"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										class="w-4 h-4"
-										xmlns="http://www.w3.org/2000/svg"
-									>
-										<path
-											d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
+									<div class=" self-center">
+										{message.content}
+									</div>
+								</div>
+							{:else if message.content === ''}
+								<Skeleton />
+							{:else}
+								{#each tokens as token}
+									{#if token.type === 'code'}
+										<CodeBlock
+											lang={token.lang}
+											code={revertSanitizedResponseContent(token.text)}
 										/>
-									</svg>
-								</button>
-							</Tooltip>
-						{/if}
-
-						<Tooltip content={$i18n.t('Read Aloud')} placement="bottom">
-							<button
-								id="speak-button-{message.id}"
-								class="{isLastMessage
-									? 'visible'
-									: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
-								on:click={() => {
-									if (!loadingSpeech) {
-										toggleSpeakMessage(message);
-									}
-								}}
-							>
-								{#if loadingSpeech}
-									<svg
-										class=" w-4 h-4"
-										fill="currentColor"
-										viewBox="0 0 24 24"
-										xmlns="http://www.w3.org/2000/svg"
-									>
-										<style>
-											.spinner_S1WN {
-												animation: spinner_MGfb 0.8s linear infinite;
-												animation-delay: -0.8s;
+									{:else}
+										{@html marked.parse(token.raw, {
+											...defaults,
+											gfm: true,
+											breaks: true,
+											renderer
+										})}
+									{/if}
+								{/each}
+							{/if}
+
+							{#if message.citations}
+								<div class="mt-1 mb-2 w-full flex gap-1 items-center">
+									{#each message.citations.reduce((acc, citation) => {
+										citation.document.forEach((document, index) => {
+											const metadata = citation.metadata?.[index];
+											const id = metadata?.source ?? 'N/A';
+
+											const existingSource = acc.find((item) => item.id === id);
+
+											if (existingSource) {
+												existingSource.document.push(document);
+												existingSource.metadata.push(metadata);
+											} else {
+												acc.push( { id: id, source: citation?.source, document: [document], metadata: metadata ? [metadata] : [] } );
 											}
+										});
+										return acc;
+									}, []) as citation, idx}
+										<div class="flex gap-1 text-xs font-semibold">
+											<button
+												class="flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl"
+												on:click={() => {
+													showCitationModal = true;
+													selectedCitation = citation;
+												}}
+											>
+												<div class="bg-white dark:bg-gray-700 rounded-full size-4">
+													{idx + 1}
+												</div>
+												<div class="flex-1 mx-2 line-clamp-1">
+													{citation.source.name}
+												</div>
+											</button>
+										</div>
+									{/each}
+								</div>
+							{/if}
 
-											.spinner_Km9P {
-												animation-delay: -0.65s;
-											}
+							{#if message.done || siblings.length > 1}
+								<div
+									class=" flex justify-start space-x-1 overflow-x-auto buttons text-gray-700 dark:text-gray-500"
+								>
+									{#if siblings.length > 1}
+										<div class="flex self-center min-w-fit">
+											<button
+												class="self-center dark:hover:text-white hover:text-black transition"
+												on:click={() => {
+													showPreviousMessage(message);
+												}}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											</button>
+
+											<div class="text-xs font-bold self-center min-w-fit dark:text-gray-100">
+												{siblings.indexOf(message.id) + 1} / {siblings.length}
+											</div>
+
+											<button
+												class="self-center dark:hover:text-white hover:text-black transition"
+												on:click={() => {
+													showNextMessage(message);
+												}}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											</button>
+										</div>
+									{/if}
 
-											.spinner_JApP {
-												animation-delay: -0.5s;
-											}
+									{#if message.done}
+										{#if !readOnly}
+											<Tooltip content={$i18n.t('Edit')} placement="bottom">
+												<button
+													class="{isLastMessage
+														? 'visible'
+														: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
+													on:click={() => {
+														editMessageHandler();
+													}}
+												>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke-width="2"
+														stroke="currentColor"
+														class="w-4 h-4"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
+														/>
+													</svg>
+												</button>
+											</Tooltip>
+										{/if}
 
-											@keyframes spinner_MGfb {
-												93.75%,
-												100% {
-													opacity: 0.2;
-												}
-											}
-										</style>
-										<circle class="spinner_S1WN" cx="4" cy="12" r="3" />
-										<circle class="spinner_S1WN spinner_Km9P" cx="12" cy="12" r="3" />
-										<circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3" />
-									</svg>
-								{:else if speaking}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="2"
-										stroke="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"
-										/>
-									</svg>
-								{:else}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="2"
-										stroke="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
-										/>
-									</svg>
-								{/if}
-							</button>
-						</Tooltip>
+										<Tooltip content={$i18n.t('Copy')} placement="bottom">
+											<button
+												class="{isLastMessage
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition copy-response-button"
+												on:click={() => {
+													copyToClipboard(message.content);
+												}}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="2"
+													stroke="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+													/>
+												</svg>
+											</button>
+										</Tooltip>
+
+										{#if !readOnly}
+											<Tooltip content={$i18n.t('Good Response')} placement="bottom">
+												<button
+													class="{isLastMessage
+														? 'visible'
+														: 'invisible group-hover:visible'} p-1 rounded {message?.annotation
+														?.rating === 1
+														? 'bg-gray-100 dark:bg-gray-800'
+														: ''} dark:hover:text-white hover:text-black transition"
+													on:click={() => {
+														rateMessage(message.id, 1);
+														showRateComment = true;
+
+														window.setTimeout(() => {
+															document
+																.getElementById(`message-feedback-${message.id}`)
+																?.scrollIntoView();
+														}, 0);
+													}}
+												>
+													<svg
+														stroke="currentColor"
+														fill="none"
+														stroke-width="2"
+														viewBox="0 0 24 24"
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														class="w-4 h-4"
+														xmlns="http://www.w3.org/2000/svg"
+														><path
+															d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
+														/></svg
+													>
+												</button>
+											</Tooltip>
+
+											<Tooltip content={$i18n.t('Bad Response')} placement="bottom">
+												<button
+													class="{isLastMessage
+														? 'visible'
+														: 'invisible group-hover:visible'} p-1 rounded {message?.annotation
+														?.rating === -1
+														? 'bg-gray-100 dark:bg-gray-800'
+														: ''} dark:hover:text-white hover:text-black transition"
+													on:click={() => {
+														rateMessage(message.id, -1);
+														showRateComment = true;
+														window.setTimeout(() => {
+															document
+																.getElementById(`message-feedback-${message.id}`)
+																?.scrollIntoView();
+														}, 0);
+													}}
+												>
+													<svg
+														stroke="currentColor"
+														fill="none"
+														stroke-width="2"
+														viewBox="0 0 24 24"
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														class="w-4 h-4"
+														xmlns="http://www.w3.org/2000/svg"
+														><path
+															d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
+														/></svg
+													>
+												</button>
+											</Tooltip>
+										{/if}
 
-						{#if $config.images && !readOnly}
-							<Tooltip content="Generate Image" placement="bottom">
-								<button
-									class="{isLastMessage
-										? 'visible'
-										: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
-									on:click={() => {
-										if (!generatingImage) {
-											generateImage(message);
-										}
-									}}
-								>
-									{#if generatingImage}
-										<svg
-											class=" w-4 h-4"
-											fill="currentColor"
-											viewBox="0 0 24 24"
-											xmlns="http://www.w3.org/2000/svg"
-										>
-											<style>
-												.spinner_S1WN {
-													animation: spinner_MGfb 0.8s linear infinite;
-													animation-delay: -0.8s;
-												}
-
-												.spinner_Km9P {
-													animation-delay: -0.65s;
-												}
-
-												.spinner_JApP {
-													animation-delay: -0.5s;
-												}
-
-												@keyframes spinner_MGfb {
-													93.75%,
-													100% {
-														opacity: 0.2;
+										<Tooltip content={$i18n.t('Read Aloud')} placement="bottom">
+											<button
+												id="speak-button-{message.id}"
+												class="{isLastMessage
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
+												on:click={() => {
+													if (!loadingSpeech) {
+														toggleSpeakMessage(message);
 													}
-												}
-											</style>
-											<circle class="spinner_S1WN" cx="4" cy="12" r="3" />
-											<circle class="spinner_S1WN spinner_Km9P" cx="12" cy="12" r="3" />
-											<circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3" />
-										</svg>
-									{:else}
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke-width="2"
-											stroke="currentColor"
-											class="w-4 h-4"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
-											/>
-										</svg>
-									{/if}
-								</button>
-							</Tooltip>
-						{/if}
+												}}
+											>
+												{#if loadingSpeech}
+													<svg
+														class=" w-4 h-4"
+														fill="currentColor"
+														viewBox="0 0 24 24"
+														xmlns="http://www.w3.org/2000/svg"
+														><style>
+															.spinner_S1WN {
+																animation: spinner_MGfb 0.8s linear infinite;
+																animation-delay: -0.8s;
+															}
+															.spinner_Km9P {
+																animation-delay: -0.65s;
+															}
+															.spinner_JApP {
+																animation-delay: -0.5s;
+															}
+															@keyframes spinner_MGfb {
+																93.75%,
+																100% {
+																	opacity: 0.2;
+																}
+															}
+														</style><circle class="spinner_S1WN" cx="4" cy="12" r="3" /><circle
+															class="spinner_S1WN spinner_Km9P"
+															cx="12"
+															cy="12"
+															r="3"
+														/><circle
+															class="spinner_S1WN spinner_JApP"
+															cx="20"
+															cy="12"
+															r="3"
+														/></svg
+													>
+												{:else if speaking}
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke-width="2"
+														stroke="currentColor"
+														class="w-4 h-4"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"
+														/>
+													</svg>
+												{:else}
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke-width="2"
+														stroke="currentColor"
+														class="w-4 h-4"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
+														/>
+													</svg>
+												{/if}
+											</button>
+										</Tooltip>
+
+										{#if $config.images && !readOnly}
+											<Tooltip content="Generate Image" placement="bottom">
+												<button
+													class="{isLastMessage
+														? 'visible'
+														: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
+													on:click={() => {
+														if (!generatingImage) {
+															generateImage(message);
+														}
+													}}
+												>
+													{#if generatingImage}
+														<svg
+															class=" w-4 h-4"
+															fill="currentColor"
+															viewBox="0 0 24 24"
+															xmlns="http://www.w3.org/2000/svg"
+															><style>
+																.spinner_S1WN {
+																	animation: spinner_MGfb 0.8s linear infinite;
+																	animation-delay: -0.8s;
+																}
+																.spinner_Km9P {
+																	animation-delay: -0.65s;
+																}
+																.spinner_JApP {
+																	animation-delay: -0.5s;
+																}
+																@keyframes spinner_MGfb {
+																	93.75%,
+																	100% {
+																		opacity: 0.2;
+																	}
+																}
+															</style><circle class="spinner_S1WN" cx="4" cy="12" r="3" /><circle
+																class="spinner_S1WN spinner_Km9P"
+																cx="12"
+																cy="12"
+																r="3"
+															/><circle
+																class="spinner_S1WN spinner_JApP"
+																cx="20"
+																cy="12"
+																r="3"
+															/></svg
+														>
+													{:else}
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															fill="none"
+															viewBox="0 0 24 24"
+															stroke-width="2"
+															stroke="currentColor"
+															class="w-4 h-4"
+														>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+															/>
+														</svg>
+													{/if}
+												</button>
+											</Tooltip>
+										{/if}
 
-						{#if message.info}
-							<Tooltip content={$i18n.t('Generation Info')} placement="bottom">
-								<button
-									class=" {isLastMessage
-										? 'visible'
-										: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
-									on:click={() => {
-										console.log(message);
-									}}
-									id="info-{message.id}"
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="2"
-										stroke="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
-										/>
-									</svg>
-								</button>
-							</Tooltip>
-						{/if}
+										{#if message.info}
+											<Tooltip content={$i18n.t('Generation Info')} placement="bottom">
+												<button
+													class=" {isLastMessage
+														? 'visible'
+														: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
+													on:click={() => {
+														console.log(message);
+													}}
+													id="info-{message.id}"
+												>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke-width="2"
+														stroke="currentColor"
+														class="w-4 h-4"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+														/>
+													</svg>
+												</button>
+											</Tooltip>
+										{/if}
 
-						{#if isLastMessage && !readOnly}
-							<Tooltip content={$i18n.t('Continue Response')} placement="bottom">
-								<button
-									type="button"
-									class="{isLastMessage
-										? 'visible'
-										: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition regenerate-response-button"
-									on:click={() => {
-										continueGeneration();
+										{#if isLastMessage && !readOnly}
+											<Tooltip content={$i18n.t('Continue Response')} placement="bottom">
+												<button
+													type="button"
+													class="{isLastMessage
+														? 'visible'
+														: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition regenerate-response-button"
+													on:click={() => {
+														continueGeneration();
+													}}
+												>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke-width="2"
+														stroke="currentColor"
+														class="w-4 h-4"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+														/>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"
+														/>
+													</svg>
+												</button>
+											</Tooltip>
+
+											<Tooltip content={$i18n.t('Regenerate')} placement="bottom">
+												<button
+													type="button"
+													class="{isLastMessage
+														? 'visible'
+														: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition regenerate-response-button"
+													on:click={regenerateResponse}
+												>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke-width="2"
+														stroke="currentColor"
+														class="w-4 h-4"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+														/>
+													</svg>
+												</button>
+											</Tooltip>
+										{/if}
+									{/if}
+								</div>
+							{/if}
+
+							{#if showRateComment}
+								<RateComment
+									messageId={message.id}
+									bind:show={showRateComment}
+									bind:message
+									on:submit={() => {
+										updateChatMessages();
 									}}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="2"
-										stroke="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-										/>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"
-										/>
-									</svg>
-								</button>
-							</Tooltip>
-
-							<Tooltip content={$i18n.t('Regenerate')} placement="bottom">
-								<button
-									type="button"
-									class="{isLastMessage
-										? 'visible'
-										: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition regenerate-response-button"
-									on:click={regenerateResponse}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="2"
-										stroke="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-										/>
-									</svg>
-								</button>
-							</Tooltip>
-						{/if}
-					</div>
-				{/if}
-
-				{#if showRateComment}
-					<RateComment
-						messageId={message.id}
-						bind:show={showRateComment}
-						bind:message
-						on:submit={() => {
-							updateChatMessages();
-						}}
-					/>
-				{/if}
-			{/if}
+								/>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			</div>
 		</div>
 	</div>
 {/key}