From 81e9a84590b62b376e82586fd1903e1d529c508c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20B=C3=A4uerle?= <alex@a13x.io>
Date: Fri, 29 Sep 2023 15:31:42 +0200
Subject: [PATCH] style: change icons from svg paths to material ui icons
 (#245)

---
 .../components/instance-views/views/views/OpenAIChat.svelte | 3 ++-
 .../instance-views/views/views/OpenAIChatMarkdown.svelte    | 3 ++-
 .../views/views/chatbot/AssistantBlock.svelte               | 6 +++---
 .../instance-views/views/views/chatbot/UserBlock.svelte     | 6 +++---
 .../views/views/openai-chat/AssistantBlock.svelte           | 6 +++---
 .../instance-views/views/views/openai-chat/UserBlock.svelte | 6 +++---
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/instance-views/views/views/OpenAIChat.svelte b/frontend/src/lib/components/instance-views/views/views/OpenAIChat.svelte
index bfeaf3ea..c1eb3a01 100644
--- a/frontend/src/lib/components/instance-views/views/views/OpenAIChat.svelte
+++ b/frontend/src/lib/components/instance-views/views/views/OpenAIChat.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { resolveDataPoint } from '$lib/util/util';
+	import { mdiChevronUp } from '@mdi/js';
 	import CircularProgress from '@smui/circular-progress/src/CircularProgress.svelte';
 	import AssistantBlock from './openai-chat/AssistantBlock.svelte';
 	import SystemBlock from './openai-chat/SystemBlock.svelte';
@@ -34,7 +35,7 @@
 				on:click={() => (showall = true)}
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 fill-grey-darker">
-					<path d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+					<path d={mdiChevronUp} />
 				</svg>
 				<span class="pr-1">Show All</span>
 			</button>
diff --git a/frontend/src/lib/components/instance-views/views/views/OpenAIChatMarkdown.svelte b/frontend/src/lib/components/instance-views/views/views/OpenAIChatMarkdown.svelte
index dc3be8b3..804eb6d6 100644
--- a/frontend/src/lib/components/instance-views/views/views/OpenAIChatMarkdown.svelte
+++ b/frontend/src/lib/components/instance-views/views/views/OpenAIChatMarkdown.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Markdown from '$lib/components/general/Markdown.svelte';
 	import { resolveDataPoint } from '$lib/util/util';
+	import { mdiChevronUp } from '@mdi/js';
 	import CircularProgress from '@smui/circular-progress/src/CircularProgress.svelte';
 	import purify from 'isomorphic-dompurify';
 	import { parse } from 'marked';
@@ -42,7 +43,7 @@
 				on:click={() => (showall = true)}
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 fill-grey-darker">
-					<path d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+					<path d={mdiChevronUp} />
 				</svg>
 				<span class="pr-1">Show All</span>
 			</button>
diff --git a/frontend/src/lib/components/instance-views/views/views/chatbot/AssistantBlock.svelte b/frontend/src/lib/components/instance-views/views/views/chatbot/AssistantBlock.svelte
index 570f5c74..3c4746a8 100644
--- a/frontend/src/lib/components/instance-views/views/views/chatbot/AssistantBlock.svelte
+++ b/frontend/src/lib/components/instance-views/views/views/chatbot/AssistantBlock.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { mdiRobotHappy } from '@mdi/js';
+
 	export let input: string;
 	export let output = false;
 </script>
@@ -9,9 +11,7 @@
 		viewBox="0 0 640 512"
 		class={`${output ? 'fill-primary' : 'fill-grey-darker'} w-6 mr-2.5 mt-2`}
 	>
-		<path
-			d="M320 0c17.7 0 32 14.3 32 32V96H472c39.8 0 72 32.2 72 72V440c0 39.8-32.2 72-72 72H168c-39.8 0-72-32.2-72-72V168c0-39.8 32.2-72 72-72H288V32c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H208zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H400zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224H64V416H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H576V224h16z"
-		/>
+		<path d={mdiRobotHappy} />
 	</svg>
 
 	<p class="rounded m-0 p-2.5 {output ? 'border border-primary' : 'border border-grey-darker'}">
diff --git a/frontend/src/lib/components/instance-views/views/views/chatbot/UserBlock.svelte b/frontend/src/lib/components/instance-views/views/views/chatbot/UserBlock.svelte
index 5546f0e7..d77cc8bd 100644
--- a/frontend/src/lib/components/instance-views/views/views/chatbot/UserBlock.svelte
+++ b/frontend/src/lib/components/instance-views/views/views/chatbot/UserBlock.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { mdiAccount } from '@mdi/js';
+
 	export let input: string;
 </script>
 
@@ -8,9 +10,7 @@
 		viewBox="0 0 448 512"
 		class="w-6 mr-2.5 mt-2 fill-grey-darker"
 	>
-		<path
-			d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"
-		/>
+		<path d={mdiAccount} />
 	</svg>
 
 	<p class="rounded m-0 p-2.5 border border-grey-darker">{input}</p>
diff --git a/frontend/src/lib/components/instance-views/views/views/openai-chat/AssistantBlock.svelte b/frontend/src/lib/components/instance-views/views/views/openai-chat/AssistantBlock.svelte
index 41481cb6..77a8edf5 100644
--- a/frontend/src/lib/components/instance-views/views/views/openai-chat/AssistantBlock.svelte
+++ b/frontend/src/lib/components/instance-views/views/views/openai-chat/AssistantBlock.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { mdiRobotHappy } from '@mdi/js';
+
 	export let input: string;
 	export let output = false;
 </script>
@@ -9,9 +11,7 @@
 		viewBox="0 0 640 512"
 		class={`${output ? 'fill-primary' : 'fill-grey-darker'} w-6 mr-2.5 mt-2`}
 	>
-		<path
-			d="M320 0c17.7 0 32 14.3 32 32V96H472c39.8 0 72 32.2 72 72V440c0 39.8-32.2 72-72 72H168c-39.8 0-72-32.2-72-72V168c0-39.8 32.2-72 72-72H288V32c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H208zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H400zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224H64V416H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H576V224h16z"
-		/>
+		<path d={mdiRobotHappy} />
 	</svg>
 
 	<p
diff --git a/frontend/src/lib/components/instance-views/views/views/openai-chat/UserBlock.svelte b/frontend/src/lib/components/instance-views/views/views/openai-chat/UserBlock.svelte
index 2fba0300..f93bf3f3 100644
--- a/frontend/src/lib/components/instance-views/views/views/openai-chat/UserBlock.svelte
+++ b/frontend/src/lib/components/instance-views/views/views/openai-chat/UserBlock.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { mdiAccount } from '@mdi/js';
+
 	export let input: string;
 </script>
 
@@ -15,8 +17,6 @@
 		viewBox="0 0 448 512"
 		class="w-3.5 ml-2.5 mt-2 fill-grey-darker"
 	>
-		<path
-			d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"
-		/>
+		<path d={mdiAccount} />
 	</svg>
 </div>