From 5039d43aef4f1529d7f8dda7a1afa5e076de057e Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Fri, 23 Aug 2024 11:10:26 +0200
Subject: [PATCH 01/33] feat: reduce spacing in history section (#52)

* feat: reduce spacing in history section

* feat: adjust sidebar design

* feat: cleanup sidebar

* feat: polish design

- exchange icons
- change font size and spacing again

* feat: decrease icon size navigation
---
 src/components/buttons/icon-button.tsx        |  3 +-
 .../get-started/get-started-nav-links.tsx     |  4 +-
 src/components/icons/chat-icon.tsx            | 19 ++----
 src/components/icons/faq-icon.tsx             | 19 ++----
 src/components/icons/mail-icon.tsx            | 17 ++++--
 src/components/icons/new-chat-icon.tsx        |  6 +-
 src/components/icons/pdf-icon.tsx             | 19 ++----
 src/components/icons/settings-icon.tsx        | 21 +++++++
 src/components/icons/sidebar-icon.tsx         |  8 +--
 src/components/icons/vermerk-icon.tsx         |  6 +-
 .../sidebar-bar/history/history-entry.tsx     |  4 +-
 .../sidebar-bar/history/history-group.tsx     |  4 +-
 .../sidebar-bar/history/history.tsx           | 12 +++-
 src/components/sidebar-bar/navigation.tsx     |  4 +-
 src/components/sidebar-bar/side-bar.tsx       | 61 ++++++++++---------
 15 files changed, 110 insertions(+), 97 deletions(-)
 create mode 100644 src/components/icons/settings-icon.tsx

diff --git a/src/components/buttons/icon-button.tsx b/src/components/buttons/icon-button.tsx
index 9402de5..72d6296 100644
--- a/src/components/buttons/icon-button.tsx
+++ b/src/components/buttons/icon-button.tsx
@@ -8,12 +8,11 @@ export const IconButton: React.FC<ButtonProps> = ({
 	ariaLabel,
 	title,
 	icon,
-	isOutlineVisible = true,
 	className = "",
 }) => {
 	return (
 		<button
-			className={`${isOutlineVisible ? "outline-ber-light-grey outline-1" : ""} outline-0  my-2 flex size-[34px] items-center justify-center hover:outline-1 rounded-sm p-4 text-ber-darker-grey outline hover:bg-ber-lighter-grey hover:outline-ber-mid-grey active:bg-white ${className}`}
+			className={`flex size-[30px] items-center justify-center rounded-sm hover:text-ber-dark-grey text-ber-darker-grey ${className}`}
 			disabled={disabled}
 			onClick={onClick}
 			type={type}
diff --git a/src/components/chat/get-started/get-started-nav-links.tsx b/src/components/chat/get-started/get-started-nav-links.tsx
index c0c4338..c9485a3 100644
--- a/src/components/chat/get-started/get-started-nav-links.tsx
+++ b/src/components/chat/get-started/get-started-nav-links.tsx
@@ -40,9 +40,9 @@ export const GetStartedNavLinks: React.FC = () => {
 					{appLinks.map((item) => (
 						<li
 							key={item.label}
-							className={`flex flex-row w-[304px] gap-3 rounded-sm px-4 py-2.5 hover:underline ${item.backgroundColor} `}
+							className={`flex flex-row items-center w-[304px] gap-3 rounded-sm px-4 py-2 hover:underline ${item.backgroundColor} `}
 						>
-							<div className="flex size-4">{item.icon}</div>
+							<div className="flex">{item.icon}</div>
 							<a
 								className="text-ber-darker-grey"
 								href={item.href}
diff --git a/src/components/icons/chat-icon.tsx b/src/components/icons/chat-icon.tsx
index 06af815..0b557e0 100644
--- a/src/components/icons/chat-icon.tsx
+++ b/src/components/icons/chat-icon.tsx
@@ -3,21 +3,14 @@ import React from "react";
 export const ChatIcon: React.FC = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width="23"
-		height="23"
+		width="18"
+		height="18"
 		viewBox="0 0 23 23"
 		fill="none"
 	>
-		<g clipPath="url(#clip0_92_916)">
-			<path
-				d="M2.875 0C1.28926 0 0 1.28926 0 2.875V15.8125C0 17.3982 1.28926 18.6875 2.875 18.6875H7.1875V22.2813C7.1875 22.5553 7.34023 22.8023 7.58281 22.9236C7.82539 23.0449 8.11738 23.018 8.3375 22.8563L13.8943 18.6875H20.125C21.7107 18.6875 23 17.3982 23 15.8125V2.875C23 1.28926 21.7107 0 20.125 0H2.875Z"
-				fill="currentColor"
-			/>
-		</g>
-		<defs>
-			<clipPath id="clip0_92_916">
-				<rect width="23" height="23" fill="white" />
-			</clipPath>
-		</defs>
+		<path
+			d="M2.875 0C1.28926 0 0 1.28926 0 2.875V15.8125C0 17.3982 1.28926 18.6875 2.875 18.6875H7.1875V22.2813C7.1875 22.5553 7.34023 22.8023 7.58281 22.9236C7.82539 23.0449 8.11738 23.018 8.3375 22.8563L13.8943 18.6875H20.125C21.7107 18.6875 23 17.3982 23 15.8125V2.875C23 1.28926 21.7107 0 20.125 0H2.875Z"
+			fill="currentColor"
+		/>
 	</svg>
 );
diff --git a/src/components/icons/faq-icon.tsx b/src/components/icons/faq-icon.tsx
index 9c6ac82..0b75075 100644
--- a/src/components/icons/faq-icon.tsx
+++ b/src/components/icons/faq-icon.tsx
@@ -7,24 +7,15 @@ interface FaqIconProps {
 export const FaqIcon: React.FC<FaqIconProps> = ({ className }) => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width="35"
-		height="35"
-		viewBox="0 0 35 35"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
 		fill="none"
-		className={`${className ? className : "h-9 w-9"}`}
+		className={className}
 	>
-		<ellipse
-			cx="17.5"
-			cy="17.5527"
-			rx="15.5"
-			ry="15.7598"
-			stroke="currentColor"
-			strokeWidth="3"
-		/>
 		<path
-			d="M18.9732 19.1182L18.9718 19.1191C18.5649 19.3875 18.3175 19.8474 18.3175 20.3408V20.3965C18.3175 20.8342 17.9738 21.1706 17.5676 21.1706C17.1615 21.1706 16.8178 20.8342 16.8178 20.3965V20.3408C16.8178 19.316 17.3289 18.3638 18.1696 17.8128C18.1696 17.8127 18.1697 17.8127 18.1698 17.8126L19.8169 16.7343C19.8171 16.7342 19.8172 16.7341 19.8174 16.734C20.6763 16.174 21.1922 15.2068 21.1922 14.1734V14.03C21.1922 12.3575 19.8564 10.9819 18.1925 10.9819H16.9427C15.2788 10.9819 13.943 12.3575 13.943 14.03C13.943 14.4677 13.5994 14.8041 13.1932 14.8041C12.787 14.8041 12.4434 14.4677 12.4434 14.03C12.4434 11.4824 14.4663 9.43345 16.9431 9.42969H18.1925C20.6687 9.42969 22.6919 11.4781 22.6919 14.0261V14.1694C22.6919 15.7387 21.9082 17.1931 20.6212 18.0393C20.621 18.0394 20.6209 18.0396 20.6207 18.0397L18.9732 19.1182ZM18.3154 25.9543C18.1154 26.1582 17.8462 26.2709 17.5676 26.2709C17.289 26.2709 17.0198 26.1582 16.8199 25.9543C16.6195 25.7501 16.5053 25.4712 16.5053 25.1783C16.5053 24.8855 16.6195 24.6065 16.8199 24.4023C17.0198 24.1984 17.289 24.0857 17.5676 24.0857C17.8462 24.0857 18.1154 24.1984 18.3154 24.4023C18.5157 24.6065 18.6299 24.8855 18.6299 25.1783C18.6299 25.4712 18.5157 25.7501 18.3154 25.9543Z"
+			d="M10.8 18H13.2V10.8H10.8V18ZM12 8.4C12.34 8.4 12.625 8.285 12.855 8.055C13.085 7.825 13.2 7.54 13.2 7.2C13.2 6.86 13.085 6.575 12.855 6.345C12.625 6.115 12.34 6 12 6C11.66 6 11.375 6.115 11.145 6.345C10.915 6.575 10.8 6.86 10.8 7.2C10.8 7.54 10.915 7.825 11.145 8.055C11.375 8.285 11.66 8.4 12 8.4ZM12 24C10.34 24 8.78 23.685 7.32 23.055C5.86 22.425 4.59 21.57 3.51 20.49C2.43 19.41 1.575 18.14 0.945 16.68C0.315 15.22 0 13.66 0 12C0 10.34 0.315 8.78 0.945 7.32C1.575 5.86 2.43 4.59 3.51 3.51C4.59 2.43 5.86 1.575 7.32 0.945C8.78 0.315 10.34 0 12 0C13.66 0 15.22 0.315 16.68 0.945C18.14 1.575 19.41 2.43 20.49 3.51C21.57 4.59 22.425 5.86 23.055 7.32C23.685 8.78 24 10.34 24 12C24 13.66 23.685 15.22 23.055 16.68C22.425 18.14 21.57 19.41 20.49 20.49C19.41 21.57 18.14 22.425 16.68 23.055C15.22 23.685 13.66 24 12 24ZM12 21.6C14.68 21.6 16.95 20.67 18.81 18.81C20.67 16.95 21.6 14.68 21.6 12C21.6 9.32 20.67 7.05 18.81 5.19C16.95 3.33 14.68 2.4 12 2.4C9.32 2.4 7.05 3.33 5.19 5.19C3.33 7.05 2.4 9.32 2.4 12C2.4 14.68 3.33 16.95 5.19 18.81C7.05 20.67 9.32 21.6 12 21.6Z"
 			fill="currentColor"
-			stroke="currentColor"
 		/>
 	</svg>
 );
diff --git a/src/components/icons/mail-icon.tsx b/src/components/icons/mail-icon.tsx
index 5fcfbc9..cc0c1d0 100644
--- a/src/components/icons/mail-icon.tsx
+++ b/src/components/icons/mail-icon.tsx
@@ -3,20 +3,25 @@ import React from "react";
 export const MailIcon: React.FC = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width="23"
-		height="23"
+		width="18"
+		height="18"
 		viewBox="0 0 23 23"
 		fill="none"
 	>
-		<g clipPath="url(#clip0_92_963)">
+		<g clipPath="url(#clip0_843_371)">
 			<path
-				d="M2.875 9.34824L11.5 2.96035L20.125 9.34824V11.4775L13.0049 16.7559C12.5691 17.0793 12.0436 17.25 11.5 17.25C10.9564 17.25 10.4309 17.0748 9.99512 16.7559L2.875 11.4775V9.34824ZM11.5 0C10.9564 0 10.4309 0.175195 9.99512 0.494141L1.16348 7.03926C0.43125 7.58281 0 8.43633 0 9.34824V20.125C0 21.7107 1.28926 23 2.875 23H20.125C21.7107 23 23 21.7107 23 20.125V9.34824C23 8.43633 22.5688 7.57832 21.8365 7.03926L13.0049 0.494141C12.5691 0.175195 12.0436 0 11.5 0Z"
+				d="M2.875 9.34727L11.5 2.95938L20.125 9.34727V11.4766L13.0049 16.7549C12.5691 17.0783 12.0436 17.249 11.5 17.249C10.9564 17.249 10.4309 17.0738 9.99512 16.7549L2.875 11.4766V9.34727ZM11.5 -0.000976562C10.9564 -0.000976562 10.4309 0.174219 9.99512 0.493164L1.16348 7.03828C0.43125 7.58184 0 8.43535 0 9.34727V20.124C0 21.7098 1.28926 22.999 2.875 22.999H20.125C21.7107 22.999 23 21.7098 23 20.124V9.34727C23 8.43535 22.5688 7.57734 21.8365 7.03828L13.0049 0.493164C12.5691 0.174219 12.0436 -0.000976562 11.5 -0.000976562Z"
 				fill="currentColor"
 			/>
 		</g>
 		<defs>
-			<clipPath id="clip0_92_963">
-				<rect width="23" height="23" fill="white" />
+			<clipPath id="clip0_843_371">
+				<rect
+					width="23"
+					height="23"
+					fill="white"
+					transform="translate(0 -0.000976562)"
+				/>
 			</clipPath>
 		</defs>
 	</svg>
diff --git a/src/components/icons/new-chat-icon.tsx b/src/components/icons/new-chat-icon.tsx
index 3745a91..ce4b3c9 100644
--- a/src/components/icons/new-chat-icon.tsx
+++ b/src/components/icons/new-chat-icon.tsx
@@ -3,13 +3,13 @@ import React from "react";
 export const NewChatIcon: React.FC = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width="19"
+		width="20"
 		height="20"
-		viewBox="0 0 19 20"
+		viewBox="0 0 20 20"
 		fill="none"
 	>
 		<path
-			d="M17.683 1.37852C16.8618 0.567836 15.5345 0.567836 14.7133 1.37852L13.5847 2.48905L17.2555 6.11309L18.3841 4.99885C19.2053 4.18817 19.2053 2.87774 18.3841 2.06705L17.683 1.37852ZM6.46426 9.52242C6.23553 9.74822 6.0593 10.0259 5.95806 10.3331L4.84819 13.6203C4.73945 13.9386 4.82569 14.2903 5.06567 14.5309C5.30564 14.7715 5.66185 14.853 5.98806 14.7456L9.31768 13.6499C9.62514 13.5499 9.90636 13.376 10.1388 13.1502L16.4119 6.95339L12.7373 3.32565L6.46426 9.52242ZM3.59959 2.94437C1.61231 2.94437 0 4.53613 0 6.49807V15.9746C0 17.9365 1.61231 19.5283 3.59959 19.5283H13.1985C15.1858 19.5283 16.7981 17.9365 16.7981 15.9746V12.4209C16.7981 11.7657 16.2619 11.2363 15.5982 11.2363C14.9345 11.2363 14.3983 11.7657 14.3983 12.4209V15.9746C14.3983 16.6298 13.8622 17.1592 13.1985 17.1592H3.59959C2.93591 17.1592 2.39972 16.6298 2.39972 15.9746V6.49807C2.39972 5.84286 2.93591 5.3135 3.59959 5.3135H7.19917C7.86284 5.3135 8.39903 4.78415 8.39903 4.12894C8.39903 3.47372 7.86284 2.94437 7.19917 2.94437H3.59959Z"
+			d="M2.02289 20C1.47358 20 1.00333 19.8044 0.612157 19.4132C0.220979 19.0221 0.0253906 18.5518 0.0253906 18.0025V4.01998C0.0253906 3.47066 0.220979 3.00042 0.612157 2.60924C1.00333 2.21806 1.47358 2.02247 2.02289 2.02247H10.9368L8.93925 4.01998H2.02289V18.0025H16.0054V11.0612L18.0029 9.06367V18.0025C18.0029 18.5518 17.8073 19.0221 17.4162 19.4132C17.025 19.8044 16.5547 20 16.0054 20H2.02289ZM6.0179 14.0075V9.7628L15.1814 0.599251C15.3812 0.399501 15.6059 0.249688 15.8556 0.149813C16.1053 0.0499376 16.355 0 16.6047 0C16.871 0 17.1248 0.0499376 17.3662 0.149813C17.6076 0.249688 17.8281 0.399501 18.0279 0.599251L19.4261 2.02247C19.6092 2.22222 19.7507 2.44278 19.8506 2.68414C19.9505 2.92551 20.0004 3.17104 20.0004 3.42072C20.0004 3.67041 19.9546 3.91594 19.8631 4.1573C19.7715 4.39867 19.6259 4.61923 19.4261 4.81898L10.2626 14.0075H6.0179ZM8.0154 12.01H9.41366L15.2064 6.21723L14.5073 5.5181L13.7832 4.81898L8.0154 10.5868V12.01Z"
 			fill="currentColor"
 		/>
 	</svg>
diff --git a/src/components/icons/pdf-icon.tsx b/src/components/icons/pdf-icon.tsx
index c7d65d3..9543c47 100644
--- a/src/components/icons/pdf-icon.tsx
+++ b/src/components/icons/pdf-icon.tsx
@@ -3,21 +3,14 @@ import React from "react";
 export const PDFIcon: React.FC = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width="18"
-		height="23"
+		width="14.09"
+		height="18"
 		viewBox="0 0 18 23"
 		fill="none"
 	>
-		<g clipPath="url(#clip0_92_1607)">
-			<path
-				d="M3 0C1.34531 0 0 1.28926 0 2.875V20.125C0 21.7107 1.34531 23 3 23H15C16.6547 23 18 21.7107 18 20.125V7.1875H12C11.1703 7.1875 10.5 6.54512 10.5 5.75V0H3ZM12 0V5.75H18L12 0ZM5.25 11.5H12.75C13.1625 11.5 13.5 11.8234 13.5 12.2188C13.5 12.6141 13.1625 12.9375 12.75 12.9375H5.25C4.8375 12.9375 4.5 12.6141 4.5 12.2188C4.5 11.8234 4.8375 11.5 5.25 11.5ZM5.25 14.375H12.75C13.1625 14.375 13.5 14.6984 13.5 15.0938C13.5 15.4891 13.1625 15.8125 12.75 15.8125H5.25C4.8375 15.8125 4.5 15.4891 4.5 15.0938C4.5 14.6984 4.8375 14.375 5.25 14.375ZM5.25 17.25H12.75C13.1625 17.25 13.5 17.5734 13.5 17.9688C13.5 18.3641 13.1625 18.6875 12.75 18.6875H5.25C4.8375 18.6875 4.5 18.3641 4.5 17.9688C4.5 17.5734 4.8375 17.25 5.25 17.25Z"
-				fill="currentColor"
-			/>
-		</g>
-		<defs>
-			<clipPath id="clip0_92_1607">
-				<rect width="18" height="23" fill="white" />
-			</clipPath>
-		</defs>
+		<path
+			d="M3 -0.000976562C1.34531 -0.000976562 0 1.28828 0 2.87402V20.124C0 21.7098 1.34531 22.999 3 22.999H15C16.6547 22.999 18 21.7098 18 20.124V7.18652H12C11.1703 7.18652 10.5 6.54414 10.5 5.74902V-0.000976562H3ZM12 -0.000976562V5.74902H18L12 -0.000976562ZM5.25 11.499H12.75C13.1625 11.499 13.5 11.8225 13.5 12.2178C13.5 12.6131 13.1625 12.9365 12.75 12.9365H5.25C4.8375 12.9365 4.5 12.6131 4.5 12.2178C4.5 11.8225 4.8375 11.499 5.25 11.499ZM5.25 14.374H12.75C13.1625 14.374 13.5 14.6975 13.5 15.0928C13.5 15.4881 13.1625 15.8115 12.75 15.8115H5.25C4.8375 15.8115 4.5 15.4881 4.5 15.0928C4.5 14.6975 4.8375 14.374 5.25 14.374ZM5.25 17.249H12.75C13.1625 17.249 13.5 17.5725 13.5 17.9678C13.5 18.3631 13.1625 18.6865 12.75 18.6865H5.25C4.8375 18.6865 4.5 18.3631 4.5 17.9678C4.5 17.5725 4.8375 17.249 5.25 17.249Z"
+			fill="currentColor"
+		/>
 	</svg>
 );
diff --git a/src/components/icons/settings-icon.tsx b/src/components/icons/settings-icon.tsx
new file mode 100644
index 0000000..aa95b30
--- /dev/null
+++ b/src/components/icons/settings-icon.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+interface SettingsIconProps {
+	className?: string;
+}
+
+export const SettingsIcon: React.FC<SettingsIconProps> = ({ className }) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		className={className}
+	>
+		<path
+			d="M8.71642 23.9404L8.23881 20.1195C7.9801 20.02 7.73632 19.9006 7.50746 19.7613C7.27861 19.622 7.05473 19.4727 6.83582 19.3135L3.28358 20.8061L0 15.1344L3.07463 12.8061C3.05473 12.6668 3.04478 12.5325 3.04478 12.4031V11.5971C3.04478 11.4678 3.05473 11.3334 3.07463 11.1941L0 8.86578L3.28358 3.19414L6.83582 4.68668C7.05473 4.52748 7.28358 4.37822 7.52239 4.23892C7.76119 4.09962 8 3.98021 8.23881 3.88071L8.71642 0.0598145H15.2836L15.7612 3.88071C16.0199 3.98021 16.2637 4.09962 16.4925 4.23892C16.7214 4.37822 16.9453 4.52748 17.1642 4.68668L20.7164 3.19414L24 8.86578L20.9254 11.1941C20.9453 11.3334 20.9552 11.4678 20.9552 11.5971V12.4031C20.9552 12.5325 20.9353 12.6668 20.8955 12.8061L23.9701 15.1344L20.6866 20.8061L17.1642 19.3135C16.9453 19.4727 16.7164 19.622 16.4776 19.7613C16.2388 19.9006 16 20.02 15.7612 20.1195L15.2836 23.9404H8.71642ZM10.806 21.5524H13.1642L13.5821 18.3882C14.199 18.229 14.7711 17.9951 15.2985 17.6867C15.8259 17.3782 16.3085 17.0051 16.7463 16.5673L19.7015 17.7912L20.8657 15.7613L18.2985 13.821C18.398 13.5424 18.4677 13.2489 18.5075 12.9404C18.5473 12.632 18.5672 12.3185 18.5672 12.0001C18.5672 11.6817 18.5473 11.3683 18.5075 11.0598C18.4677 10.7514 18.398 10.4578 18.2985 10.1792L20.8657 8.23892L19.7015 6.20907L16.7463 7.4628C16.3085 7.00509 15.8259 6.622 15.2985 6.31355C14.7711 6.00509 14.199 5.77126 13.5821 5.61205L13.194 2.44787H10.8358L10.4179 5.61205C9.80099 5.77126 9.22886 6.00509 8.70149 6.31355C8.17413 6.622 7.69154 6.99514 7.25373 7.43295L4.29851 6.20907L3.13433 8.23892L5.70149 10.1494C5.60199 10.4479 5.53234 10.7464 5.49254 11.0449C5.45274 11.3434 5.43284 11.6618 5.43284 12.0001C5.43284 12.3185 5.45274 12.627 5.49254 12.9255C5.53234 13.224 5.60199 13.5225 5.70149 13.821L3.13433 15.7613L4.29851 17.7912L7.25373 16.5374C7.69154 16.9951 8.17413 17.3782 8.70149 17.6867C9.22886 17.9951 9.80099 18.229 10.4179 18.3882L10.806 21.5524ZM12.0597 16.1792C13.2139 16.1792 14.199 15.7713 15.0149 14.9553C15.8308 14.1394 16.2388 13.1543 16.2388 12.0001C16.2388 10.8459 15.8308 9.86081 15.0149 9.04489C14.199 8.22897 13.2139 7.82101 12.0597 7.82101C10.8856 7.82101 9.89552 8.22897 9.08955 9.04489C8.28358 9.86081 7.8806 10.8459 7.8806 12.0001C7.8806 13.1543 8.28358 14.1394 9.08955 14.9553C9.89552 15.7713 10.8856 16.1792 12.0597 16.1792Z"
+			fill="currentColor"
+		/>
+	</svg>
+);
diff --git a/src/components/icons/sidebar-icon.tsx b/src/components/icons/sidebar-icon.tsx
index a95096c..63a0496 100644
--- a/src/components/icons/sidebar-icon.tsx
+++ b/src/components/icons/sidebar-icon.tsx
@@ -3,13 +3,13 @@ import React from "react";
 export const SidebarIcon: React.FC = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width="19"
-		height="17"
-		viewBox="0 0 19 17"
+		width="20"
+		height="16"
+		viewBox="0 0 20 16"
 		fill="none"
 	>
 		<path
-			d="M0 2.42857C0 1.08906 1.06504 0 2.375 0H16.625C17.935 0 19 1.08906 19 2.42857V14.5714C19 15.9109 17.935 17 16.625 17H2.375C1.06504 17 0 15.9109 0 14.5714V2.42857ZM2.375 4.85714V14.5714H8.3125V4.85714H2.375ZM16.625 4.85714H10.6875V14.5714H16.625V4.85714Z"
+			d="M2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H18C18.55 0 19.0208 0.195833 19.4125 0.5875C19.8042 0.979167 20 1.45 20 2V14C20 14.55 19.8042 15.0208 19.4125 15.4125C19.0208 15.8042 18.55 16 18 16H2ZM15.5 4.675H18V2H15.5V4.675ZM15.5 9.325H18V6.675H15.5V9.325ZM2 14H13.5V2H2V14ZM15.5 14H18V11.325H15.5V14Z"
 			fill="currentColor"
 		/>
 	</svg>
diff --git a/src/components/icons/vermerk-icon.tsx b/src/components/icons/vermerk-icon.tsx
index a6058c7..067453c 100644
--- a/src/components/icons/vermerk-icon.tsx
+++ b/src/components/icons/vermerk-icon.tsx
@@ -3,13 +3,13 @@ import React from "react";
 export const VermerkIcon: React.FC = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width="21"
-		height="24"
+		width="15.75"
+		height="18"
 		viewBox="0 0 21 24"
 		fill="none"
 	>
 		<path
-			d="M4.5 0C2.01562 0 0 2.01562 0 4.5V19.5C0 21.9844 2.01562 24 4.5 24H18H19.5C20.3297 24 21 23.3297 21 22.5C21 21.6703 20.3297 21 19.5 21V18C20.3297 18 21 17.3297 21 16.5V1.5C21 0.670312 20.3297 0 19.5 0H18H4.5ZM4.5 18H16.5V21H4.5C3.67031 21 3 20.3297 3 19.5C3 18.6703 3.67031 18 4.5 18ZM6 6.75C6 6.3375 6.3375 6 6.75 6H15.75C16.1625 6 16.5 6.3375 16.5 6.75C16.5 7.1625 16.1625 7.5 15.75 7.5H6.75C6.3375 7.5 6 7.1625 6 6.75ZM6.75 9H15.75C16.1625 9 16.5 9.3375 16.5 9.75C16.5 10.1625 16.1625 10.5 15.75 10.5H6.75C6.3375 10.5 6 10.1625 6 9.75C6 9.3375 6.3375 9 6.75 9Z"
+			d="M4.5 -0.000976562C2.01562 -0.000976562 0 2.01465 0 4.49902V19.499C0 21.9834 2.01562 23.999 4.5 23.999H18H19.5C20.3297 23.999 21 23.3287 21 22.499C21 21.6693 20.3297 20.999 19.5 20.999V17.999C20.3297 17.999 21 17.3287 21 16.499V1.49902C21 0.669336 20.3297 -0.000976562 19.5 -0.000976562H18H4.5ZM4.5 17.999H16.5V20.999H4.5C3.67031 20.999 3 20.3287 3 19.499C3 18.6693 3.67031 17.999 4.5 17.999ZM6 6.74902C6 6.33652 6.3375 5.99902 6.75 5.99902H15.75C16.1625 5.99902 16.5 6.33652 16.5 6.74902C16.5 7.16152 16.1625 7.49902 15.75 7.49902H6.75C6.3375 7.49902 6 7.16152 6 6.74902ZM6.75 8.99902H15.75C16.1625 8.99902 16.5 9.33652 16.5 9.74902C16.5 10.1615 16.1625 10.499 15.75 10.499H6.75C6.3375 10.499 6 10.1615 6 9.74902C6 9.33652 6.3375 8.99902 6.75 8.99902Z"
 			fill="currentColor"
 		/>
 	</svg>
diff --git a/src/components/sidebar-bar/history/history-entry.tsx b/src/components/sidebar-bar/history/history-entry.tsx
index 27c61d8..6d8f79a 100644
--- a/src/components/sidebar-bar/history/history-entry.tsx
+++ b/src/components/sidebar-bar/history/history-entry.tsx
@@ -22,7 +22,7 @@ export const HistoryEntry: React.FC<HistoryEntryProps> = ({ name, id }) => {
 	return (
 		<div className="flex items-center justify-start gap-1">
 			<button
-				className={`h-11 w-[70%] truncate rounded-sm ml-5 px-2.5 text-start hover:bg-ber-light-grey ${isSelected ? "bg-ber-light-grey" : ""}`}
+				className={`h-[30px] w-full truncate rounded-sm px-4 text-start hover:bg-ber-light-grey ${isSelected ? "bg-ber-light-grey" : ""}`}
 				onClick={() => setCurrentChatId(id)}
 			>
 				{removeMarkdownStyling(name)}
@@ -31,9 +31,9 @@ export const HistoryEntry: React.FC<HistoryEntryProps> = ({ name, id }) => {
 				icon={<BucketIcon />}
 				onClick={() => deleteChat(id)}
 				isOutlineVisible={false}
-				className="text-ber-darker-grey"
 				ariaLabel="Löschen"
 				title="Löschen"
+				className="text-ber-light-grey"
 			/>
 		</div>
 	);
diff --git a/src/components/sidebar-bar/history/history-group.tsx b/src/components/sidebar-bar/history/history-group.tsx
index d2899d1..d3f96a7 100644
--- a/src/components/sidebar-bar/history/history-group.tsx
+++ b/src/components/sidebar-bar/history/history-group.tsx
@@ -9,8 +9,8 @@ interface HistoryGroupProps {
 
 export const HistoryGroup: React.FC<HistoryGroupProps> = ({ label, chats }) => {
 	return (
-		<div className="flex flex-col">
-			<div key={label} className="px-5 pb-1 font-semibold text-ber-darker-grey">
+		<div className="flex flex-col gap-1">
+			<div key={label} className="px-4 font-semibold text-ber-darker-grey">
 				{label}
 			</div>
 			{chats.map((chat) => (
diff --git a/src/components/sidebar-bar/history/history.tsx b/src/components/sidebar-bar/history/history.tsx
index 7e1c683..55a1dd5 100644
--- a/src/components/sidebar-bar/history/history.tsx
+++ b/src/components/sidebar-bar/history/history.tsx
@@ -59,12 +59,18 @@ export const History: React.FC = () => {
 	}, [chatsToday, chatsLastSevenDays, chatsOlderThanSevenDays]);
 
 	return (
-		<div>
-			<div className={`flex flex-col gap-4`}>
+		<>
+			<div className={`flex flex-col gap-8 px-5 mb-5 text-sm`}>
 				{chatGroups.map(({ label, chats }) => (
 					<HistoryGroup key={label} label={label} chats={chats} />
 				))}
 			</div>
-		</div>
+			{chatGroups.length > 0 && (
+				<div className={`px-9 text-xs text-ber-mid-grey`}>
+					Der Chat-Verlauf wird nur lokal gespeichert und ist somit nicht für
+					andere Personen sichtbar.
+				</div>
+			)}
+		</>
 	);
 };
diff --git a/src/components/sidebar-bar/navigation.tsx b/src/components/sidebar-bar/navigation.tsx
index 1e3f92a..8a0bd14 100644
--- a/src/components/sidebar-bar/navigation.tsx
+++ b/src/components/sidebar-bar/navigation.tsx
@@ -42,7 +42,7 @@ export const Navigation: React.FC = () => {
 					{navLinks.map((item) => (
 						<li key={item.label} className="w-full">
 							<a
-								className={`text-ber-darker-grey flex-row flex gap-3 w-full rounded-sm px-4 py-2.5 hover:underline ${item.backgroundColor} ${
+								className={`text-ber-darker-grey text-md flex-row flex gap-3 w-full items-center rounded-sm px-4 py-2 hover:underline ${item.backgroundColor} ${
 									location === item.href ? "underline" : "no-underline"
 								}`}
 								href={item.href}
@@ -53,7 +53,7 @@ export const Navigation: React.FC = () => {
 									})
 								}
 							>
-								<div className="flex size-4">{item.icon}</div>
+								<div className="flex">{item.icon}</div>
 								{item.label}
 							</a>
 						</li>
diff --git a/src/components/sidebar-bar/side-bar.tsx b/src/components/sidebar-bar/side-bar.tsx
index 8f67096..bbceea7 100644
--- a/src/components/sidebar-bar/side-bar.tsx
+++ b/src/components/sidebar-bar/side-bar.tsx
@@ -6,6 +6,7 @@ import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
 import { FaqIcon } from "../icons/faq-icon";
 import { Navigation } from "./navigation";
 import { History } from "./history/history";
+import { SettingsIcon } from "../icons/settings-icon";
 
 const mdWidth = 768;
 
@@ -57,59 +58,63 @@ export const SideBar: React.FC = () => {
 		>
 			<aside
 				ref={sidebarRef}
-				className={`flex flex-col z-30 justify-between overflow-hidden gap-2 overflow-x-hidden ${
+				className={`flex flex-col z-30 justify-between overflow-hidden gap-10 overflow-x-hidden ${
 					isOpen
 						? "bg-ber-lighter-grey min-w-72 w-72 h-full pb-4"
 						: "min-w-24 w-28 h-fit"
 				}`}
 				aria-label="Sidebar"
 			>
-				<div className={`flex justify-between px-5 pt-2 flex-row gap-2`}>
+				<div className={`flex justify-between px-5 mt-6 flex-row gap-2`}>
 					<IconButton
-						isOutlineVisible={!isOpen}
 						icon={<SidebarIcon />}
 						ariaLabel={toggleIsSidebarOpenLabel}
 						title={toggleIsSidebarOpenLabel}
 						onClick={() => setIsOpen(!isOpen)}
 					/>
 					<IconButton
-						isOutlineVisible={!isOpen}
 						icon={<NewChatIcon />}
 						ariaLabel="Neuen Chat starten"
 						title="Neuen Chat starten"
 						onClick={() => setCurrentChatId(null)}
 					/>
 				</div>
-				<div
-					className={`flex-col gap-8 pb-8 h-full overflow-y-auto ${isOpen ? "flex" : "hidden"}`}
-				>
-					<a
-						className={`flex-col px-5 text-[22px] ${isOpen ? "flex" : "hidden"}`}
-						href="/"
-					>
-						<h1 className="font-bold">BärGPT</h1>
-						<h2>KI-Testumgebung</h2>
+				<div className={`flex-col flex gap-5 ${isOpen ? "flex" : "hidden"}`}>
+					<a className={`flex-col font-bold px-5 text-xl`} href="/">
+						BärGPT
 					</a>
 
 					<Navigation />
-
+				</div>
+				<div
+					className={`flex-col pb-8 h-full overflow-y-auto ${isOpen ? "flex" : "hidden"}`}
+				>
 					<History />
-
-					<div className={`px-5 text-sm text-ber-darker-grey`}>
-						Der Chat-Verlauf wird nur lokal gespeichert und ist somit nicht für
-						andere Personen sichtbar.
-					</div>
 				</div>
-				<button
-					className={`px-5 w-fit text-ber-darker-grey hover:text-ber-dark-grey ${isOpen ? "flex" : "hidden"}`}
-					onClick={() =>
-						(
-							document.getElementById("faq-dialog") as HTMLDialogElement
-						).showModal()
-					}
+				<div
+					className={`flex justify-start flex-row px-5 gap-2.5 ${isOpen ? "flex" : "hidden"}`}
 				>
-					<FaqIcon className="h-6 w-6" />
-				</button>
+					<IconButton
+						icon={<FaqIcon />}
+						ariaLabel="FAQ"
+						title="FAQ"
+						onClick={() =>
+							(
+								document.getElementById("faq-dialog") as HTMLDialogElement
+							)?.showModal()
+						}
+					/>
+					<IconButton
+						icon={<SettingsIcon />}
+						ariaLabel="Einstellungen"
+						title="Einstellungen"
+						onClick={() =>
+							(
+								document.getElementById("settings-dialog") as HTMLDialogElement
+							)?.showModal()
+						}
+					/>
+				</div>
 			</aside>
 		</div>
 	);

From 5f4c861e2c9b2e8e9d0f033e9ed18467a0451de8 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Fri, 23 Aug 2024 13:21:14 +0200
Subject: [PATCH 02/33] Feat:single prompt mail (#53)

* feat: add single prompt component

* feat: hide email buttons

* feat: add custom system prompts

* fix: linting error

* feat: change toggle naming

* fix: typo

* feat: add new mail get started message

* feat: adjust system prompt

* feat: refactor email chat into new route

* feat: add toggle for email chat

* feat: update email chat prompt

* feat: add text editing chat and prompt

* feat: switch mail UI fields

* feat: improve email chat prompting

* feat: remove bracketed content

* feat: add knowledge about other apps to system prompt

* feat: add placeholder for summary again

* feat: refactoring
---
 src/components/buttons/tag-button.tsx         |   7 +-
 src/components/email-chat/email-chat-form.tsx |  72 +++++++++
 .../email-chat/email-chat-messages.tsx        |  85 +++++++++++
 src/components/email-chat/email-chat.tsx      |  38 +++++
 .../email-chat/get-started-email-chat.tsx     |  61 ++++++++
 .../email/email-form/email-form.tsx           |   4 +-
 .../email/email-form/radio-groups.tsx         |   2 +-
 src/components/email/email.tsx                |  17 ++-
 src/components/messages/text-message.tsx      |   8 +-
 src/index.css                                 |   4 +
 src/main.tsx                                  |   5 +
 src/routes/email-chat.tsx                     |  11 ++
 src/routes/email.tsx                          |   4 +-
 src/store/api.ts                              |  25 +++-
 src/system-prompts.ts                         | 138 ++++++++++++++++++
 15 files changed, 464 insertions(+), 17 deletions(-)
 create mode 100644 src/components/email-chat/email-chat-form.tsx
 create mode 100644 src/components/email-chat/email-chat-messages.tsx
 create mode 100644 src/components/email-chat/email-chat.tsx
 create mode 100644 src/components/email-chat/get-started-email-chat.tsx
 create mode 100644 src/routes/email-chat.tsx
 create mode 100644 src/system-prompts.ts

diff --git a/src/components/buttons/tag-button.tsx b/src/components/buttons/tag-button.tsx
index aa0e5ee..5345e86 100644
--- a/src/components/buttons/tag-button.tsx
+++ b/src/components/buttons/tag-button.tsx
@@ -8,13 +8,14 @@ export const TagButton: React.FC<ButtonProps> = ({
 	type = "button",
 	ariaLabel,
 	title,
+	className = "",
 }) => {
 	return (
 		<button
 			className={`
-            rounded-full border border-ber-darker-grey py-2 px-2.5 cursor-pointer
-            hover:text-ber-dark-grey hover:border-ber-dark-grey text-sm
-            active:bg-ber-darker-grey active:text-white
+            rounded-full border border-ber-darker-grey py-1 px-2.5 cursor-pointer
+            hover:bg-ber-darker-grey hover:text-white active:text-white
+			${className}
            `}
 			disabled={disabled}
 			onClick={onClick}
diff --git a/src/components/email-chat/email-chat-form.tsx b/src/components/email-chat/email-chat-form.tsx
new file mode 100644
index 0000000..e51c2a0
--- /dev/null
+++ b/src/components/email-chat/email-chat-form.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { SendIcon } from "../icons/send-icon";
+import { useIsLoadingStore } from "../../store/is-loading-store";
+import { streamChatResponse } from "../../store/api";
+import { useChatHistoryStore } from "../../store/chat-history-store";
+import { useHasUserScrolledStore } from "../../store/has-user-scrolled-store";
+
+const { setIsLoading } = useIsLoadingStore.getState();
+const { saveMessage } = useChatHistoryStore.getState();
+
+export const EmailChatForm: React.FC = () => {
+	const { isLoading } = useIsLoadingStore();
+	const { setHasUserScrolled } = useHasUserScrolledStore();
+
+	const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		setIsLoading(true);
+		setHasUserScrolled(false);
+
+		const formData = new FormData(e.currentTarget);
+		e.currentTarget.reset();
+
+		const message = formData.get("message");
+		if (!message) {
+			console.error("The input 'message' from the form is missing.");
+			setIsLoading(false);
+			return;
+		}
+
+		saveMessage(message.toString());
+
+		await streamChatResponse().catch(console.error);
+
+		setIsLoading(false);
+	};
+
+	return (
+		<>
+			<div className="px-5 w-full flex justify-center">
+				<div className="md:w-[640px] lg:w-[768px] w-full z-10 flex flex-col bg-ber-lighter-grey">
+					<form
+						className={`flex items-center gap-4 px-6 py-3 has-[:focus]:border-blue-500`}
+						onSubmit={onSubmit}
+					>
+						<textarea
+							className="w-full h-6 bg-ber-lighter-grey focus:outline-none max-h-72 resize-y"
+							name="message"
+							required
+							placeholder="Was für eine E-Mail möchten Sie formulieren?"
+							onKeyDown={(e) => {
+								if (e.key === "Enter" && !e.shiftKey) {
+									e.preventDefault();
+									e.currentTarget.form?.dispatchEvent(
+										new Event("submit", { bubbles: true }),
+									);
+								}
+							}}
+						/>
+
+						<button
+							type="submit"
+							disabled={isLoading}
+							className="text-ber-darker-grey hover:text-ber-dark-grey disabled:text-light-grey"
+						>
+							<SendIcon className="w-8 h-8" />
+						</button>
+					</form>
+				</div>
+			</div>
+		</>
+	);
+};
diff --git a/src/components/email-chat/email-chat-messages.tsx b/src/components/email-chat/email-chat-messages.tsx
new file mode 100644
index 0000000..db1a1ca
--- /dev/null
+++ b/src/components/email-chat/email-chat-messages.tsx
@@ -0,0 +1,85 @@
+import React, { useEffect, useRef } from "react";
+import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
+import { Message } from "../../store/types";
+import { TextMessage } from "../messages/text-message";
+import { useChatHistoryStore } from "../../store/chat-history-store";
+import { useHasUserScrolledStore } from "../../store/has-user-scrolled-store";
+
+export const EmailChatMessages: React.FC = () => {
+	const { getChat } = useChatHistoryStore();
+	const { currentChatId } = useCurrentChatIdStore();
+	const { setHasUserScrolled } = useHasUserScrolledStore();
+
+	const messages: Message[] = getChat(currentChatId)?.messages || [];
+
+	const messageContainerRef = useRef<null | HTMLDivElement>(null);
+
+	const scrollToBottom = () => {
+		const messagesContainer = messageContainerRef.current;
+
+		if (
+			messagesContainer &&
+			!useHasUserScrolledStore.getState().hasUserScrolled
+		) {
+			messagesContainer.scrollTo({
+				top: messagesContainer.scrollHeight,
+				behavior: "smooth",
+			});
+		}
+	};
+
+	const handleScroll = () => {
+		const messagesContainer = messageContainerRef.current;
+
+		if (!messagesContainer) {
+			return;
+		}
+
+		const isScrollPositionCloseToEnd =
+			messagesContainer.scrollTop + messagesContainer.clientHeight >=
+			messagesContainer.scrollHeight - 10;
+
+		if (isScrollPositionCloseToEnd) {
+			setHasUserScrolled(false);
+			return;
+		}
+
+		setHasUserScrolled(true);
+	};
+
+	useEffect(() => {
+		const messagesContainer = messageContainerRef.current;
+
+		if (!messagesContainer) {
+			return () => {};
+		}
+
+		messagesContainer.addEventListener("scroll", handleScroll);
+
+		return () => {
+			messagesContainer.removeEventListener("scroll", handleScroll);
+		};
+	}, []);
+
+	useEffect(() => {
+		scrollToBottom();
+	}, [messages]);
+
+	return (
+		<div
+			ref={messageContainerRef}
+			className="flex w-full justify-center overflow-auto pb-2 px-5"
+		>
+			<div className="md:w-[640px] lg:w-[768px] flex flex-col gap-y-4">
+				{messages.map((message) => (
+					<TextMessage
+						key={message.id}
+						role={message.role}
+						content={message.content}
+						messageId={message.id}
+					/>
+				))}
+			</div>
+		</div>
+	);
+};
diff --git a/src/components/email-chat/email-chat.tsx b/src/components/email-chat/email-chat.tsx
new file mode 100644
index 0000000..6b39a40
--- /dev/null
+++ b/src/components/email-chat/email-chat.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
+import { EmailChatForm } from "./email-chat-form";
+import { GetStartedEmailChat } from "./get-started-email-chat";
+import { EmailChatMessages } from "./email-chat-messages";
+import { useChatHistoryStore } from "../../store/chat-history-store";
+
+export const EmailChat: React.FC = () => {
+	const { getChat } = useChatHistoryStore();
+	const { currentChatId } = useCurrentChatIdStore();
+	const messages = getChat(currentChatId)?.messages || [];
+
+	return (
+		<div className="flex h-full flex-col items-center justify-between pt-16 md:py-5 relative">
+			{messages.length === 0 && <GetStartedEmailChat />}
+
+			<EmailChatMessages />
+
+			<EmailChatForm />
+
+			<label className="inline-flex items-center cursor-pointer absolute top-5 left-5">
+				<input
+					type="checkbox"
+					value=""
+					checked={true}
+					className="sr-only peer"
+					onChange={() => {
+						window.location.href = "/email";
+					}}
+				/>
+				<div className="relative w-9 h-5 bg-ber-light-grey rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-ber-light-grey after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-ber-darker-grey"></div>
+				<span className="ms-2 text-xs font-medium text-ber-darker-grey">
+					E-Mail Chat
+				</span>
+			</label>
+		</div>
+	);
+};
diff --git a/src/components/email-chat/get-started-email-chat.tsx b/src/components/email-chat/get-started-email-chat.tsx
new file mode 100644
index 0000000..3917bfc
--- /dev/null
+++ b/src/components/email-chat/get-started-email-chat.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { BaerIcon } from "../icons/bear-icon";
+import { TagButton } from "../buttons/tag-button";
+import { useIsLoadingStore } from "../../store/is-loading-store";
+import { useHasUserScrolledStore } from "../../store/has-user-scrolled-store";
+import { useChatHistoryStore } from "../../store/chat-history-store";
+import { streamChatResponse } from "../../store/api";
+
+const mailStartPrompts = [
+	{
+		label: "Neue E-Mail schreiben",
+		value: "Ich möchte eine neue E-Mail schreiben.",
+	},
+	{
+		label: "Auf E-Mail antworten",
+		value: "Ich möchte auf eine E-Mail antworten.",
+	},
+	{
+		label: "Wie kann BärGPT mir helfen E-Mails zu schreiben",
+		value: "Wie kann BärGPT mir helfen E-Mails zu schreiben?",
+	},
+];
+
+async function onClick(value: string) {
+	useIsLoadingStore.getState().setIsLoading(true);
+	useHasUserScrolledStore.getState().setHasUserScrolled(false);
+
+	useChatHistoryStore.getState().saveMessage(value);
+
+	await streamChatResponse().catch(console.error);
+
+	useIsLoadingStore.getState().setIsLoading(false);
+}
+
+export const GetStartedEmailChat: React.FC = () => {
+	return (
+		<div className="flex md:w-[640px] lg:w-[768px] max-w-full flex-row overflow-auto px-5">
+			<div className="mt-1 flex size-[35px] min-w-[35px] items-center justify-center border border-black bg-white">
+				<BaerIcon className="h-[21px] w-[21px]" />
+			</div>
+			<div className="flex flex-col gap-4 px-3">
+				<p>
+					Hallo, ich bin Bär GPT und helfe Ihnen gerne bei der Formulierung von
+					E-Mails. Gemeinsam erarbeiten wir Schritt für Schritt eine passende
+					E-Mail. Was möchten Sie tun?
+				</p>
+				<div className="flex flex-wrap gap-4">
+					{mailStartPrompts.map(({ label, value }) => (
+						<TagButton
+							key={label}
+							label={label}
+							onClick={() => onClick(value)}
+							ariaLabel={label}
+							title={label}
+						/>
+					))}
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/src/components/email/email-form/email-form.tsx b/src/components/email/email-form/email-form.tsx
index 616d9fb..b4fe519 100644
--- a/src/components/email/email-form/email-form.tsx
+++ b/src/components/email/email-form/email-form.tsx
@@ -91,10 +91,10 @@ export const EmailForm: React.FC = () => {
 						{isEmailFormExpanded && (
 							<div className="flex flex-col gap-y-3 sm:flex-row sm:gap-x-5">
 								<div className="flex flex-col bg-ber-lighter-grey w-full py-6 px-6 gap-y-5">
-									<RadioGroups />
+									<PreviousEmail />
 								</div>
 								<div className="flex flex-col bg-ber-lighter-grey w-full py-6 px-6 gap-y-5">
-									<PreviousEmail />
+									<RadioGroups />
 								</div>
 							</div>
 						)}
diff --git a/src/components/email/email-form/radio-groups.tsx b/src/components/email/email-form/radio-groups.tsx
index 4ee72ac..6f1d5be 100644
--- a/src/components/email/email-form/radio-groups.tsx
+++ b/src/components/email/email-form/radio-groups.tsx
@@ -35,7 +35,7 @@ export const RadioGroups: React.FC = () => {
 								<label
 									htmlFor={option}
 									className={`
-									rounded-full border border-ber-darker-grey py-2 px-2.5 cursor-pointer
+									rounded-full border border-ber-darker-grey py-1 px-2.5 cursor-pointer
 									hover:text-ber-dark-grey hover:border-ber-dark-grey
 									has-[:checked]:hover:bg-ber-dark-grey has-[:checked]:hover:text-white has-[:checked]:hover:border-ber-dark-grey
 								  has-[:checked]:bg-ber-darker-grey has-[:checked]:text-white`}
diff --git a/src/components/email/email.tsx b/src/components/email/email.tsx
index 448863d..7b12808 100644
--- a/src/components/email/email.tsx
+++ b/src/components/email/email.tsx
@@ -11,12 +11,27 @@ export const Email: React.FC = () => {
 	const messages = getChat(currentChatId)?.messages || [];
 
 	return (
-		<div className="flex h-full flex-col items-center justify-between pt-16 md:py-5">
+		<div className="flex h-full flex-col items-center justify-between pt-16 md:py-5 relative">
 			{messages.length === 0 && <GetStartedMail />}
 
 			<EmailMessages />
 
 			<EmailForm />
+
+			<label className="inline-flex items-center cursor-pointer absolute top-5 left-5">
+				<input
+					type="checkbox"
+					value=""
+					className="sr-only peer"
+					onChange={() => {
+						window.location.href = "/email-chat";
+					}}
+				/>
+				<div className="relative w-9 h-5 bg-ber-light-grey rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-ber-light-grey after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-ber-darker-grey"></div>
+				<span className="ms-2 text-xs font-medium text-ber-darker-grey">
+					E-Mail Chat
+				</span>
+			</label>
 		</div>
 	);
 };
diff --git a/src/components/messages/text-message.tsx b/src/components/messages/text-message.tsx
index a2dacbb..21a6715 100644
--- a/src/components/messages/text-message.tsx
+++ b/src/components/messages/text-message.tsx
@@ -5,8 +5,8 @@ import { RefreshIcon } from "../icons/refresh-icon";
 import { CopyToClipboardButton } from "../buttons/copy-to-clipboard-button";
 import { streamChatResponse } from "../../store/api";
 import { useChatHistoryStore } from "../../store/chat-history-store";
-import { EmailChatButtons } from "../email/email-chat-buttons";
-import { getStorageKey } from "../../store/storage";
+// import { EmailChatButtons } from "../email/email-chat-buttons";
+// import { getStorageKey } from "../../store/storage";
 import { useIsLoadingStore } from "../../store/is-loading-store";
 import { useHasUserScrolledStore } from "../../store/has-user-scrolled-store";
 import { PreformattedTextElement } from "./preformatted-text-element";
@@ -75,9 +75,9 @@ export const TextMessage: React.FC<TextMessageProps> = ({
 				</div>
 			</div>
 
-			{isLastMessageOfChat(messageId) &&
+			{/* {isLastMessageOfChat(messageId) &&
 				role === "assistant" &&
-				getStorageKey() === "email-history" && <EmailChatButtons />}
+				getStorageKey() === "email-history" && <EmailChatButtons />} */}
 		</div>
 	);
 };
diff --git a/src/index.css b/src/index.css
index 0b87e91..d3bb490 100644
--- a/src/index.css
+++ b/src/index.css
@@ -31,4 +31,8 @@
 	h6 {
 		@apply text-xl;
 	}
+
+	.markdown-container a {
+		@apply text-ber-mid-grey underline hover:text-ber-darker-grey;
+	}
 }
diff --git a/src/main.tsx b/src/main.tsx
index fcea221..8722ce6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,6 +6,7 @@ import { Note } from "./routes/note";
 import { Summary } from "./routes/summary";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "./index.css";
+import { EmailChat } from "./routes/email-chat";
 
 const router = createBrowserRouter([
 	{
@@ -16,6 +17,10 @@ const router = createBrowserRouter([
 		path: "/email",
 		element: <Email />,
 	},
+	{
+		path: "/email-chat",
+		element: <EmailChat />,
+	},
 	{
 		path: "/summary",
 		element: <Summary />,
diff --git a/src/routes/email-chat.tsx b/src/routes/email-chat.tsx
new file mode 100644
index 0000000..a671d26
--- /dev/null
+++ b/src/routes/email-chat.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { Layout } from "../layout/layout";
+import { EmailChat as EmailChatUI } from "../components/email-chat/email-chat";
+
+export const EmailChat: React.FC = () => {
+	return (
+		<Layout>
+			<EmailChatUI />
+		</Layout>
+	);
+};
diff --git a/src/routes/email.tsx b/src/routes/email.tsx
index 6cbb1e0..85b7b78 100644
--- a/src/routes/email.tsx
+++ b/src/routes/email.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { Layout } from "../layout/layout";
-import { Email as EmailChat } from "../components/email/email";
+import { Email as EmailUI } from "../components/email/email";
 
 export const Email: React.FC = () => {
 	return (
 		<Layout>
-			<EmailChat />
+			<EmailUI />
 		</Layout>
 	);
 };
diff --git a/src/store/api.ts b/src/store/api.ts
index 5e84596..22a5b1b 100644
--- a/src/store/api.ts
+++ b/src/store/api.ts
@@ -2,6 +2,14 @@ import { useCurrentChatIdStore } from "./current-chat-id-store";
 import { useChatHistoryStore } from "./chat-history-store";
 import { File as ExtractedFile } from "./types";
 import { useErrorStore } from "./error-store";
+import { SYSTEM_PROMPTS } from "../system-prompts";
+
+const systemPrompts: { [key: string]: string } = {
+	"/email": SYSTEM_PROMPTS.CHAT_SYSTEM_PROMPT,
+	"/email-chat": SYSTEM_PROMPTS.EMAIL_SYSTEM_PROMPT,
+	"/note": SYSTEM_PROMPTS.NOTE_SYSTEM_PROMPT,
+	"/summary": SYSTEM_PROMPTS.SUMMARY_SYSTEM_PROMPT,
+};
 
 export async function streamChatResponse() {
 	const chatId = useCurrentChatIdStore.getState().currentChatId;
@@ -20,6 +28,8 @@ export async function streamChatResponse() {
 		return;
 	}
 
+	const location = window.location.pathname;
+
 	const url = `${import.meta.env.VITE_API_URL}/chat`;
 
 	try {
@@ -31,10 +41,17 @@ export async function streamChatResponse() {
 				llm: "openai",
 			},
 			body: JSON.stringify({
-				messages: previousMessages.map(({ role, content }) => ({
-					role,
-					content,
-				})),
+				messages: [
+					{
+						role: "system",
+						content:
+							systemPrompts[location] || SYSTEM_PROMPTS.CHAT_SYSTEM_PROMPT,
+					},
+					...previousMessages.map(({ role, content }) => ({
+						role,
+						content,
+					})),
+				],
 			}),
 		});
 
diff --git a/src/system-prompts.ts b/src/system-prompts.ts
new file mode 100644
index 0000000..d564926
--- /dev/null
+++ b/src/system-prompts.ts
@@ -0,0 +1,138 @@
+export const SYSTEM_PROMPTS = {
+	CHAT_SYSTEM_PROMPT: `Sie sind BärGPT, ein virtueller Assistent für die öffentliche Verwaltung in Berlin. Ihre Hauptaufgabe besteht darin, Verwaltungsmitarbeitern präzise und hilfreiche Informationen zu liefern. Beachten Sie die folgenden Richtlinien, um Missbrauch und falsche Antworten zu vermeiden:
+1. **Zweck und Zielgruppe**:
+  - Sie helfen Verwaltungsmitarbeitern dabei, alltägliche Aufgaben zu erfüllen, etwa das Beantworten von E-Mails, das Zusammenfassen von Dokumenten oder das Erstellen von Vermerken.
+2. **Antworten**:
+  - Geben Sie immer klare, präzise und korrekte Informationen.
+  - Wenn Sie die Antwort nicht kennen, geben Sie dies offen zu und verweisen Sie auf offizielle Quellen oder Kontaktstellen.
+  - Verwenden Sie eine formelle, aber freundliche Sprache.
+3. **Faktenprüfung und Quellen**:
+  - Überprüfen Sie alle Informationen auf ihre Richtigkeit.
+  - Verweisen Sie auf offizielle und vertrauenswürdige Quellen, wenn dies möglich ist.
+  - Geben Sie keine Spekulationen oder unbestätigte Informationen weiter.
+- Vermeiden Sie den Verweis auf zu konkrete Gesetze oder Vorschriften, wenn Sie nicht sicher sind, ob diese korrekt sind
+4. **Datenschutz und Sicherheit**:
+  - Fordern Sie keine persönlichen oder sensiblen Daten von Nutzern an.
+  - Geben Sie keine Informationen weiter, die gegen Datenschutzrichtlinien verstoßen könnten.
+5. **Neutralität und Unparteilichkeit**:
+  - Bleiben Sie in allen Antworten neutral und unparteiisch.
+  - Vermeiden Sie persönliche Meinungen oder wertende Aussagen.
+- Wenn themenfremde Aufgaben verlangt werden
+6. **Struktur und Format**:
+  - Antworten Sie in klaren Absätzen und nutzen Sie bei Bedarf Aufzählungspunkte.
+  - Geben Sie relevante Links zu offiziellen Webseiten an, wenn weitere Informationen erforderlich sind.
+WICHTIG: Antworte immer auf Deutsch, außer die Anfrage erfolgt in einer anderen Sprache.
+
+**Hinweis auf andere Apps:** Wenn der Benutzer Anfragen stellt, die nicht in den freien Chat-Bereich fallen, weise ihn freundlich auf die passenden Apps hin:
+
+   Beispiel:  
+   - *"Es scheint, dass Ihre Anfrage möglicherweise besser von einer anderen App unterstützt wird. Hier sind die verfügbaren Apps:"*  
+     1. **[Chat](/)**  
+        - *Nutzen Sie den freien Chat, um in Echtzeit Fragen zu stellen, Ideen zu diskutieren oder Unterstützung bei verschiedenen Themen zu erhalten.*  
+     2. **[E-Mail](/email)**  
+        - *Diese Funktion unterstützt Sie beim Verfassen professioneller E-Mails, egal ob formell, informativ oder freundlich.*
+     3. **[Vermerk erstellen](/note)**  
+        - *Der Vermerk-Assistent unterstützt Sie, aussagekräftige und leicht verständliche Sachverhalte, Entscheidungen und Hinweise zu formulieren..*  
+     4. **[Text zusammenfassen](/summary)**  
+        - *Mit der Funktion "Zusammenfassen" können Sie längere Texte einfach auf das Wesentliche reduzieren. So schaffen Sie sich einen schnellen Überblick über die Inhalte oder geben Kolleg:innen einen schnellen Einblick in das Dokument, welches Sie z.B. per E-Mail versenden.*  
+`,
+	EMAIL_SYSTEM_PROMPT: `Du bist BärGPT, ein intelligenter Assistent, der Verwaltungsmitarbeitern hilft, passende E-Mails zu verfassen. Dein Ziel ist es, den Prozess so effizient und klar wie möglich zu gestalten. Zusätzlich unterstützt du den Benutzer, indem du ihn auf andere geeignete Apps hinweist, wenn seine Anfragen außerhalb der E-Mail-Funktion liegen.
+
+Befolge dabei stets die folgenden Schritte:
+
+1. **Einleitung und Hilfe anbieten:** Beginne jede Interaktion mit einer kurzen Begrüßung. Wenn der Benutzer explizit nach Hilfe fragt, wie er eine E-Mail verfassen kann, erkläre den Ablauf:
+
+   Beispiel:  
+   - *"Hallo! Ich kann Ihnen helfen, eine E-Mail zu verfassen. Sie können entweder auf eine E-Mail antworten oder eine neue E-Mail erstellen. Wenn Sie mir sagen, was Sie tun möchten, stelle ich Ihnen die nötigen Fragen, um den Inhalt zu erfassen und Ihnen einen passenden Entwurf zu erstellen."*  
+   - *"Möchten Sie auf eine E-Mail antworten oder eine neue E-Mail verfassen?"*
+
+2. **Antwort auf eine E-Mail:** Wenn der Benutzer antworten möchte, frage nach den Details der E-Mail, auf die er antworten möchte:
+
+   - Bitte den Benutzer, die vorherige E-Mail in den Chat zu kopieren oder lade weitere Informationen hoch.
+   - Falls die vorherige E-Mail nicht verfügbar ist, frage nach dem Hauptanliegen der vorherigen E-Mail?
+   - Falls etwas unklar ist, frage nach weiteren Details.
+   - Gehe anschließend zu Schritt 5 **Formulierung und Anpassung** über.
+
+3. **Neue E-Mail:** Wenn der Benutzer eine neue E-Mail verfassen möchte, gehe folgendermaßen vor:
+
+   - Frage zunächst: Um was soll es in der E-Mail gehen?
+   - Versuche, mit den ersten Informationen so früh wie möglich einen E-Mail-Entwurf zu erstellen. Unklare Punkte können zunächst übersprungen oder mit einem Platzhalter gefüllt werden.
+   - Frage danach, ob die E-Mail formell oder informell sein soll und ob noch weitere Anforderungen bestehen.
+
+4. **Formulierung und Anpassung:** Nachdem du alle Informationen gesammelt hast, formuliere die E-Mail in einem Entwurf und frage, ob noch Anpassungen vorgenommen werden sollen.
+
+   - Zeige dem Benutzer den Entwurf und bitte um Feedback.
+   - Biete an, den Text nach den Wünschen des Benutzers anzupassen, bis er zufrieden ist.
+
+5. **Abschluss:** Zum Schluss biete an, die E-Mail zu speichern oder direkt zu versenden, wenn dies gewünscht wird.
+
+6. **Hinweis auf andere Apps:** Wenn der Benutzer Anfragen stellt, die nicht in den E-Mail-Bereich fallen, weise ihn freundlich auf die passenden Apps hin:
+
+   Beispiel:  
+   - *"Es scheint, dass Ihre Anfrage möglicherweise besser von einer anderen App unterstützt wird. Hier sind die verfügbaren Apps:"*  
+     1. **[Chat](/)**  
+        - *Nutzen Sie den freien Chat, um in Echtzeit Fragen zu stellen, Ideen zu diskutieren oder Unterstützung bei verschiedenen Themen zu erhalten.*  
+     2. **[E-Mail](/email)**  
+        - *Diese Funktion unterstützt Sie beim Verfassen professioneller E-Mails, egal ob formell, informativ oder freundlich.*
+     3. **[Vermerk erstellen](/note)**  
+        - *Der Vermerk-Assistent unterstützt Sie, aussagekräftige und leicht verständliche Sachverhalte, Entscheidungen und Hinweise zu formulieren..*  
+     4. **[Text zusammenfassen](/summary)**  
+        - *Mit der Funktion "Zusammenfassen" können Sie längere Texte einfach auf das Wesentliche reduzieren. So schaffen Sie sich einen schnellen Überblick über die Inhalte oder geben Kolleg:innen einen schnellen Einblick in das Dokument, welches Sie z.B. per E-Mail versenden.*  
+     
+
+**Wichtiger Hinweis:**  
+Wenn der Benutzer explizit nach Hilfe fragt, wie er eine E-Mail verfassen kann, stelle sicher, dass du eine Erklärung des gesamten Prozesses anbietest, anstatt nur die standardmäßige Frage "Möchten Sie auf eine E-Mail antworten oder eine neue E-Mail verfassen?" zu stellen. Wenn der Benutzer Anfragen außerhalb der E-Mail-Funktion stellt, weise ihn auf die passende App hin, die seinen Bedürfnissen entspricht.
+ `,
+	NOTE_SYSTEM_PROMPT: `Du bist BärGPT, ein intelligenter Assistent, der Verwaltungsmitarbeitern hilft, passende Notizen zu verfassen. Dein Ziel ist es, den Prozess so effizient und klar wie möglich zu gestalten. Befolge dabei stets die folgenden Schritte:
+
+1. **Einleitung:** Beginne jede Interaktion mit einer kurzen Begrüßung und frage, was der Benutzer notieren möchte.
+
+     Beispiel: *"Hallo! Was möchtest du notieren?"*
+
+2. **Details erfragen:** Frage nach den Details der Notiz, die der Benutzer verfassen möchte:
+
+     - Was ist das Thema der Notiz?
+     - Welche Informationen sollen in der Notiz enthalten sein?
+     - Gibt es spezielle Anforderungen oder Formatierungen?
+
+3. **Formulierung und Anpassung:** Nachdem du alle Informationen gesammelt hast, formuliere die Notiz in einem Entwurf und frage, ob noch Anpassungen vorgenommen werden sollen.
+
+Dein Ziel ist es, immer präzise und freundlich zu sein, um den Verwaltungsmitarbeitern bestmöglich zu helfen, ihre Notizen effizient und klar zu formulieren.
+
+`,
+	SUMMARY_SYSTEM_PROMPT: `
+  Du bist BärGPT, ein intelligenter Assistent, der Verwaltungsmitarbeitern hilft, jegliche Art von Texten zu bearbeiten. 
+  Dein Ziel ist es, den Prozess so effizient und klar wie möglich zu gestalten. Befolge dabei stets die folgenden Schritte:
+
+1. **Einleitung:** Beginne jede Interaktion mit einer kurzen Begrüßung und sage dem Benutzer, dass er den Text, der bearbeitet werden soll, entweder als Datei hochladen oder ins Chatfenster kopieren soll.
+
+    Beispiel: *"Hallo! Laden Sie den Text, der bearbeitet werden soll, entweder als PDF-Datei hoch oder fügen Sie ihn im Chatfenster ein."*
+
+2. **Antwort auf bereitgestellten Text:** Frage nun, wie der Benutzer den Text bearbeiten möchte:
+
+- **Zusammenfassen:** Möchten Sie den Text in Stichpunkte zusammenfassen?
+- **Übersetzen:** Soll der Text in eine andere Sprache übersetzt werden?
+- **Rechtschreibung und Grammatik:** Soll die Rechtschreibung und Grammatik korrigiert werden?
+- **Stil:** Soll der Text in einem besonderen Stil verfasst werden? Z.B. akademisch, Amtsdeutsch, locker, einfache Sprache.
+- **Suche:** Soll der Text nach einem bestimmten Inhalt/Wort durchsucht werden?
+
+3. **Zusammenfassung und Anpassung:** Nachdem dir Informationen geliefert wurden, passe den Text an und frage, ob noch weitere Anpassungen vorgenommen werden sollen.
+
+4. **Abschluss:** Sage zum Schluss, dass der Text kopiert und in anderen Programmen weiterverarbeitet werden kann.
+
+Dein Ziel ist es, immer präzise und freundlich zu sein, um den Verwaltungsmitarbeitern bestmöglich zu helfen, ihre E-Mails effizient und klar zu formulieren.
+
+**Hinweis auf andere Apps:** Wenn der Benutzer Anfragen stellt, die nicht in den freien Texte Zusammenfassen Bereich fallen, weise ihn freundlich auf die passenden Apps hin:
+
+   Beispiel:  
+   - *"Es scheint, dass Ihre Anfrage möglicherweise besser von einer anderen App unterstützt wird. Hier sind die verfügbaren Apps:"*  
+     1. **[Chat](/)**  
+        - *Nutzen Sie den freien Chat, um in Echtzeit Fragen zu stellen, Ideen zu diskutieren oder Unterstützung bei verschiedenen Themen zu erhalten.*  
+     2. **[E-Mail](/email)**  
+        - *Diese Funktion unterstützt Sie beim Verfassen professioneller E-Mails, egal ob formell, informativ oder freundlich.*
+     3. **[Vermerk erstellen](/note)**  
+        - *Der Vermerk-Assistent unterstützt Sie, aussagekräftige und leicht verständliche Sachverhalte, Entscheidungen und Hinweise zu formulieren..*  
+     4. **[Text zusammenfassen](/summary)**  
+        - *Mit der Funktion "Zusammenfassen" können Sie längere Texte einfach auf das Wesentliche reduzieren. So schaffen Sie sich einen schnellen Überblick über die Inhalte oder geben Kolleg:innen einen schnellen Einblick in das Dokument, welches Sie z.B. per E-Mail versenden.*  
+`,
+};

From 0454407cd3864d7d661b15f0b77e752ee2698755 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Fri, 23 Aug 2024 15:19:36 +0200
Subject: [PATCH 03/33] feat: make toggle responsive (#54)

---
 src/components/email-chat/email-chat.tsx | 4 ++--
 src/components/email/email.tsx           | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/email-chat/email-chat.tsx b/src/components/email-chat/email-chat.tsx
index 6b39a40..b9e6ede 100644
--- a/src/components/email-chat/email-chat.tsx
+++ b/src/components/email-chat/email-chat.tsx
@@ -11,14 +11,14 @@ export const EmailChat: React.FC = () => {
 	const messages = getChat(currentChatId)?.messages || [];
 
 	return (
-		<div className="flex h-full flex-col items-center justify-between pt-16 md:py-5 relative">
+		<div className="flex h-full flex-col items-center justify-between pt-16 pb-5 relative">
 			{messages.length === 0 && <GetStartedEmailChat />}
 
 			<EmailChatMessages />
 
 			<EmailChatForm />
 
-			<label className="inline-flex items-center cursor-pointer absolute top-5 left-5">
+			<label className="inline-flex items-center cursor-pointer absolute top-7 md:left-5 right-5">
 				<input
 					type="checkbox"
 					value=""
diff --git a/src/components/email/email.tsx b/src/components/email/email.tsx
index 7b12808..97b43b5 100644
--- a/src/components/email/email.tsx
+++ b/src/components/email/email.tsx
@@ -11,14 +11,14 @@ export const Email: React.FC = () => {
 	const messages = getChat(currentChatId)?.messages || [];
 
 	return (
-		<div className="flex h-full flex-col items-center justify-between pt-16 md:py-5 relative">
+		<div className="flex h-full flex-col items-center justify-between pt-16 md:pb-5 relative">
 			{messages.length === 0 && <GetStartedMail />}
 
 			<EmailMessages />
 
 			<EmailForm />
 
-			<label className="inline-flex items-center cursor-pointer absolute top-5 left-5">
+			<label className="inline-flex items-center cursor-pointer absolute top-7 md:left-5 right-5">
 				<input
 					type="checkbox"
 					value=""

From 4f0afd3b38b656035243e67f121cb71dbade6f47 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Mon, 26 Aug 2024 15:55:27 +0200
Subject: [PATCH 04/33] feat: add selector for model in chat function (#50)

* feat: add selector for model in chat function

* feat: update available LLMs

* feat: add model select to email function

* feat: parse chunks for openai and ollama style

* refactor: add and use a default dialog for other dialogs, and added settings dialog (still wip)

Signed-off-by: Raphael Arce <raphael.arce@ts.berlin>

* feat: add styling to settings dialog

* feat: decrease spacing

* feat: update dialog styling

* feat: add logos as FAQ footer

* feat: add hover and selected effect for model

---------

Signed-off-by: Raphael Arce <raphael.arce@ts.berlin>
Co-authored-by: Jonas Jaszkowic <jonas.jaszkowic@ts.berlin>
Co-authored-by: Raphael Arce <raphael.arce@ts.berlin>
---
 src/components/dialogs/default-dialog.tsx     | 65 ++++++++++++++
 .../dialogs/faq-dialog/faq-dialog.tsx         | 76 ++++++++++++++++
 .../{faq => dialogs/faq-dialog}/qas.tsx       |  0
 .../faq-dialog}/question-answer.tsx           |  4 +-
 .../password-dialog.tsx}                      | 11 ++-
 .../settings-dialog/settings-dialog.tsx       | 38 ++++++++
 .../settings-dialog/settings-option.tsx       | 77 +++++++++++++++++
 .../splash-screen-dialog.tsx}                 | 50 ++++-------
 src/components/faq/faq.tsx                    | 81 -----------------
 src/components/icons/check-icon.tsx           | 10 +--
 src/components/icons/check-solid-icon.tsx     | 30 +++++++
 src/components/icons/unavailable-icon.tsx     | 18 ++++
 src/components/icons/uncheck-icon.tsx         | 15 ++++
 src/components/sidebar-bar/side-bar.tsx       |  6 +-
 src/layout/layout.tsx                         | 21 ++---
 src/store/api.ts                              |  8 +-
 src/store/current-llm-store.ts                | 86 +++++++++++++++++++
 tailwind.config.js                            |  1 +
 18 files changed, 452 insertions(+), 145 deletions(-)
 create mode 100644 src/components/dialogs/default-dialog.tsx
 create mode 100644 src/components/dialogs/faq-dialog/faq-dialog.tsx
 rename src/components/{faq => dialogs/faq-dialog}/qas.tsx (100%)
 rename src/components/{faq => dialogs/faq-dialog}/question-answer.tsx (83%)
 rename src/components/{password-modal.tsx => dialogs/password-dialog.tsx} (82%)
 create mode 100644 src/components/dialogs/settings-dialog/settings-dialog.tsx
 create mode 100644 src/components/dialogs/settings-dialog/settings-option.tsx
 rename src/components/{splash-screen.tsx => dialogs/splash-screen-dialog.tsx} (68%)
 delete mode 100644 src/components/faq/faq.tsx
 create mode 100644 src/components/icons/check-solid-icon.tsx
 create mode 100644 src/components/icons/unavailable-icon.tsx
 create mode 100644 src/components/icons/uncheck-icon.tsx
 create mode 100644 src/store/current-llm-store.ts

diff --git a/src/components/dialogs/default-dialog.tsx b/src/components/dialogs/default-dialog.tsx
new file mode 100644
index 0000000..d1820d1
--- /dev/null
+++ b/src/components/dialogs/default-dialog.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect, useRef } from "react";
+import { XIcon } from "../icons/x-icon";
+
+interface DefaultDialogProps {
+	children?: React.ReactNode;
+	className?: string;
+	id?: string;
+	afterClose?: () => void;
+	isOpen?: boolean;
+}
+
+export const DefaultDialog: React.FC<DefaultDialogProps> = ({
+	children,
+	className,
+	id,
+	afterClose,
+	isOpen,
+}) => {
+	const dialogRef = useRef<HTMLDialogElement | null>(null);
+
+	useEffect(() => {
+		document.addEventListener("mousedown", handleClickListener);
+
+		return () => {
+			document.removeEventListener("mousedown", handleClickListener);
+		};
+	}, []);
+
+	const handleClickListener = (event: MouseEvent) => {
+		if (!dialogRef.current) {
+			return;
+		}
+
+		/**
+		 * This is confusing, yet correct. The dialog element spreads over the whole screen.
+		 * If the user clicks on something inside the dialog, the event target won't be the dialog itself.
+		 */
+		const isClickOnDialogBackground = event.target === dialogRef.current;
+
+		if (!isClickOnDialogBackground) {
+			return;
+		}
+
+		closeDialog();
+	};
+
+	const closeDialog = () => {
+		dialogRef.current?.close();
+		afterClose?.();
+	};
+
+	return (
+		<>
+			<dialog open={isOpen} ref={dialogRef} id={id} className={className}>
+				{children}
+				<button
+					className="text-ber-darker-grey absolute right-5 top-5 pb-2 hover:text-ber-dark-grey"
+					onClick={closeDialog}
+				>
+					<XIcon className="size-6" />
+				</button>
+			</dialog>
+		</>
+	);
+};
diff --git a/src/components/dialogs/faq-dialog/faq-dialog.tsx b/src/components/dialogs/faq-dialog/faq-dialog.tsx
new file mode 100644
index 0000000..69b389d
--- /dev/null
+++ b/src/components/dialogs/faq-dialog/faq-dialog.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { QuestionAnswer } from "./question-answer";
+import { qas } from "./qas";
+import { logoLinks } from "../../logo-links";
+import { DefaultDialog } from "../default-dialog";
+
+export const faqDialogId = "faq-dialog";
+
+export const FaqDialog: React.FC = () => {
+	return (
+		<DefaultDialog
+			id={faqDialogId}
+			className="z-50 max-w-[1080px] rounded-sm w-11/12 max-h-[90%] h-[90%] md:w-5/6 p-5 pt-8 md:p-12 md:pb-8 shadow-lg bg-white backdrop:backdrop-blur-sm overflow-y-auto"
+		>
+			<div className="w-full h-full flex justify-center">
+				<div className="flex flex-col justify-between gap-7 max-w-[600px]">
+					<div className="flex flex-col gap-7">
+						<h1 className="text-[22px] font-bold leading-6">Über BärGPT</h1>
+						<p>
+							BärGPT ist eine produktiv nutzbare KI-Testumgebung für
+							Beschäftigte der Berliner Landesverwaltung, bereitgestellt vom{" "}
+							<a
+								className="text-ber-mid-grey underline hover:text-ber-darker-grey"
+								href="https://www.citylab-berlin.org"
+							>
+								CityLAB Berlin
+							</a>
+							. BärGPT soll dabei helfen, die Anwendungsmöglichkeiten von
+							Künstlicher Intelligenz für die Verwaltungsarbeit in der Praxis zu
+							erproben. Neben einer Chat-Funktion enthält BärGPT eine Reihe
+							erster kleinerer Anwendungen (KI-Apps) für spezifische Aufgaben
+							aus dem Verwaltungskontext. Die Liste an Anwendungen soll im
+							Dialog mit Beschäftigten der Berliner Verwaltung kontinuierlich
+							erweitert werden. Hierzu werden wir in Zukunft regelmäßige
+							Workshop-Formate anbieten und freuen uns über Ideen und{" "}
+							<a
+								className="text-ber-mid-grey underline hover:text-ber-darker-grey"
+								href="https://citylabberlin.typeform.com/to/kCdnCgvC#product_id=baergpt"
+							>
+								Feedback
+							</a>
+							.
+						</p>
+						<h1 className="text-[22px] font-bold leading-6">
+							Häufig gestellte Fragen
+						</h1>
+						{qas.map((qa) => (
+							<QuestionAnswer
+								key={qa.question}
+								question={qa.question}
+								answer={qa.answer}
+							/>
+						))}
+					</div>
+					<div className="flex flex-row flex-wrap justify-start gap-10 border-t border-ber-light-grey py-6">
+						{logoLinks.map((link) => (
+							<a
+								key={link.href}
+								href={link.href}
+								target="_blank"
+								rel="noreferrer"
+							>
+								<img
+									alt={link.alt}
+									src={link.src}
+									width={link.width}
+									height={link.height}
+								/>
+							</a>
+						))}
+					</div>
+				</div>
+			</div>
+		</DefaultDialog>
+	);
+};
diff --git a/src/components/faq/qas.tsx b/src/components/dialogs/faq-dialog/qas.tsx
similarity index 100%
rename from src/components/faq/qas.tsx
rename to src/components/dialogs/faq-dialog/qas.tsx
diff --git a/src/components/faq/question-answer.tsx b/src/components/dialogs/faq-dialog/question-answer.tsx
similarity index 83%
rename from src/components/faq/question-answer.tsx
rename to src/components/dialogs/faq-dialog/question-answer.tsx
index c191f0c..7b67df3 100644
--- a/src/components/faq/question-answer.tsx
+++ b/src/components/dialogs/faq-dialog/question-answer.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { ArrowIcon } from "../icons/arrow-icon";
+import { ArrowIcon } from "../../icons/arrow-icon";
 
 interface QuestionAnswerProps {
 	question: string;
@@ -14,7 +14,7 @@ export const QuestionAnswer: React.FC<QuestionAnswerProps> = ({
 
 	return (
 		<div
-			className={`flex flex-col rounded-sm border-2 p-2 py-2 transition-all duration-200 ease-in-out border-transparent`}
+			className={`flex flex-col rounded-sm border-2 transition-all duration-200 ease-in-out border-transparent`}
 		>
 			<div className="flex flex-row justify-between">
 				<button
diff --git a/src/components/password-modal.tsx b/src/components/dialogs/password-dialog.tsx
similarity index 82%
rename from src/components/password-modal.tsx
rename to src/components/dialogs/password-dialog.tsx
index 0af4606..28b2ef4 100644
--- a/src/components/password-modal.tsx
+++ b/src/components/dialogs/password-dialog.tsx
@@ -1,11 +1,10 @@
 import React from "react";
+import { useIsLockedStore } from "../../store/is-locked-store";
+import { PrimaryButton } from "../buttons/primary-button";
+import { useErrorStore } from "../../store/error-store";
+import { BaerIcon } from "../icons/bear-icon";
 
-import { useIsLockedStore } from "../store/is-locked-store";
-import { PrimaryButton } from "./buttons/primary-button";
-import { useErrorStore } from "../store/error-store";
-import { BaerIcon } from "./icons/bear-icon";
-
-export const PasswordModal: React.FC = () => {
+export const PasswordDialog: React.FC = () => {
 	const { isLocked, unlock } = useIsLockedStore();
 	const { handleError } = useErrorStore();
 
diff --git a/src/components/dialogs/settings-dialog/settings-dialog.tsx b/src/components/dialogs/settings-dialog/settings-dialog.tsx
new file mode 100644
index 0000000..326ec9a
--- /dev/null
+++ b/src/components/dialogs/settings-dialog/settings-dialog.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { DefaultDialog } from "../default-dialog";
+import { useCurrentLLMStore } from "../../../store/current-llm-store";
+import { SettingsOption } from "./settings-option";
+
+export const settingsDialogId = "settings-dialog";
+
+export const SettingsDialog: React.FC = () => {
+	const { availableLLMs } = useCurrentLLMStore();
+
+	return (
+		<DefaultDialog
+			id={settingsDialogId}
+			className="z-50 max-w-[1080px] rounded-sm w-11/12 max-h-[90%] h-[90%] md:w-5/6 p-5 pt-8 md:p-12 md:pb-8 shadow-lg bg-white backdrop:backdrop-blur-sm overflow-y-auto"
+		>
+			<div className="w-full flex justify-center">
+				<div className="flex flex-col max-w-[600px] gap-y-5 md:gap-y-5">
+					<h2 className="text-2xl font-bold">Einstellungen</h2>
+					<div className="text-lg flex flex-col gap-3">
+						<h3 className="font-bold">Modellauswahl</h3>
+						<p>
+							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+							nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+							erat, sed diam voluptua. At vero eos et accusam et justo duo
+							dolores et ea rebum
+						</p>
+					</div>
+
+					<div className="flex flex-col gap-x-2">
+						{availableLLMs.map((option) => (
+							<SettingsOption key={option.identifier} option={option} />
+						))}
+					</div>
+				</div>
+			</div>
+		</DefaultDialog>
+	);
+};
diff --git a/src/components/dialogs/settings-dialog/settings-option.tsx b/src/components/dialogs/settings-dialog/settings-option.tsx
new file mode 100644
index 0000000..525bec3
--- /dev/null
+++ b/src/components/dialogs/settings-dialog/settings-option.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import {
+	availableLLM,
+	defaultModelIdentifier,
+	useCurrentLLMStore,
+} from "../../../store/current-llm-store";
+import { CheckSolidIcon } from "../../icons/check-solid-icon";
+import { UncheckIcon } from "../../icons/uncheck-icon";
+import { CheckIcon } from "../../icons/check-icon";
+import { UnavailableIcon } from "../../icons/unavailable-icon";
+
+interface SettingsOptionProps {
+	option: availableLLM;
+}
+
+export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
+	const { currentLLM, setCurrentLLM } = useCurrentLLMStore();
+
+	const isChecked = option.identifier === currentLLM;
+
+	return (
+		<label
+			htmlFor={option.identifier}
+			className={`flex flex-row p-3 md:p-[18px] cursor-pointer gap-5 hover:bg-ber-lighter-grey  ${isChecked && "bg-ber-lighter-grey"}`}
+		>
+			<div className="mt-1">
+				{isChecked && <CheckSolidIcon />}
+				{!isChecked && <UncheckIcon />}
+			</div>
+
+			<div className="flex flex-col gap-2">
+				<div className="flex flex-wrap gap-y-2 gap-x-5 mb-2">
+					<h3 className="font-bold text-lg">{option.identifier}</h3>
+					{option.provider === "Azure" && (
+						<div className="text-white bg-ber-green-darker rounded-full px-2 text-sm flex items-center">
+							empfohlen
+						</div>
+					)}
+				</div>
+
+				<p className="text-sm">
+					Beschreibung für welche Anwendungsfälle das Modell am besten geeignet
+					ist, eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+					sed diam
+				</p>
+
+				<div className="flex-wrap flex gap-x-5 gap-y-1 text-sm">
+					<div className="flex flex-row gap-2 items-center">
+						<p className="font-bold">Datenschutzkonform</p>
+						{option.isGdprCompliant ? <CheckIcon /> : <UnavailableIcon />}
+					</div>
+					<div className="flex flex-row gap-2 items-center">
+						<p className="font-bold">Open Source</p>
+						{option.provider === "Ollama" ? <CheckIcon /> : <UnavailableIcon />}
+					</div>
+					<div className="flex flex-row gap-2 items-center">
+						<p className="font-bold">Serverstandort</p>
+						{option.provider === "Azure" && <p>Schweden</p>}
+						{option.provider === "Ollama" && <p>Berlin</p>}
+						{option.provider === "OpenAI" && <p>USA</p>}
+					</div>
+				</div>
+
+				<input
+					type="radio"
+					id={option.identifier}
+					name={"model"}
+					value={option.identifier}
+					className="appearance-none"
+					defaultChecked={option.identifier === defaultModelIdentifier}
+					checked={option.identifier === currentLLM}
+					onChange={(e) => setCurrentLLM(e.target.value)}
+				/>
+			</div>
+		</label>
+	);
+};
diff --git a/src/components/splash-screen.tsx b/src/components/dialogs/splash-screen-dialog.tsx
similarity index 68%
rename from src/components/splash-screen.tsx
rename to src/components/dialogs/splash-screen-dialog.tsx
index 2290a97..ebb5b74 100644
--- a/src/components/splash-screen.tsx
+++ b/src/components/dialogs/splash-screen-dialog.tsx
@@ -1,33 +1,21 @@
-import React, { useEffect, useRef } from "react";
-import { useSplashStore } from "../store/splash-store";
-import { BaerIcon } from "./icons/bear-icon";
-import { XIcon } from "./icons/x-icon";
-import { logoLinks } from "./logo-links";
+import React, { useEffect } from "react";
+import { useSplashStore } from "../../store/splash-store";
+import { BaerIcon } from "../icons/bear-icon";
+import { logoLinks } from "../logo-links";
+import { DefaultDialog } from "./default-dialog";
 
-export const SplashScreen: React.FC = () => {
-	const { hideSplashScreen } = useSplashStore();
+const dialogId = "splash-screen-dialog";
 
-	const splashContainer = useRef<HTMLDivElement | null>(null);
+export const SplashScreenDialog: React.FC = () => {
+	const { hideSplashScreen, isSplashScreenVisible } = useSplashStore();
 
 	useEffect(() => {
-		document.addEventListener("mousedown", handleClickListener);
-
-		return () => {
-			document.removeEventListener("mousedown", handleClickListener);
-		};
-	}, []);
-
-	const handleClickListener = (event: MouseEvent) => {
-		const clickedInside =
-			splashContainer &&
-			splashContainer.current?.contains(event.target as Node);
-
-		if (clickedInside) {
+		if (!isSplashScreenVisible()) {
 			return;
 		}
 
-		hideSplashScreen();
-	};
+		(document.getElementById(dialogId) as HTMLDialogElement).showModal();
+	}, []);
 
 	const links = [
 		{
@@ -43,9 +31,10 @@ export const SplashScreen: React.FC = () => {
 	];
 
 	return (
-		<div
-			ref={splashContainer}
-			className={`pointer-events-auto relative z-50 m-1 flex h-fit w-fit rounded-sm bg-white border border-ber-lighter-grey shadow-lg sm:mx-auto sm:my-10 sm:h-fit sm:w-[540px] text-ber-darker-grey`}
+		<DefaultDialog
+			id={dialogId}
+			afterClose={hideSplashScreen}
+			className={`h-fit w-fit rounded-sm bg-white shadow-lg sm:h-fit sm:w-[540px] text-ber-darker-grey`}
 		>
 			<div className="relative flex flex-col gap-6 rounded-sm p-8">
 				<div className="flex min-h-[63px] w-[63px] items-center justify-center bg-white border-black border">
@@ -105,13 +94,6 @@ export const SplashScreen: React.FC = () => {
 					))}
 				</div>
 			</div>
-
-			<button
-				className="absolute right-4 top-4 pb-2 text-ber-darker-grey hover:text-ber-darker-grey"
-				onClick={hideSplashScreen}
-			>
-				<XIcon className="h-6 w-6" />
-			</button>
-		</div>
+		</DefaultDialog>
 	);
 };
diff --git a/src/components/faq/faq.tsx b/src/components/faq/faq.tsx
deleted file mode 100644
index ada589e..0000000
--- a/src/components/faq/faq.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from "react";
-import { XIcon } from "../icons/x-icon";
-import { QuestionAnswer } from "./question-answer";
-import { qas } from "./qas";
-import { logoLinks } from "../logo-links";
-
-export const Faq: React.FC = () => {
-	return (
-		<dialog
-			id="faq-dialog"
-			className="z-50 w-11/12 max-w-[1000px] gap-4 overflow-y-auto rounded-sm border border-ber-light-grey bg-white px-8 py-10 shadow-lg backdrop:backdrop-blur-sm md:max-h-[90%] md:w-5/6"
-		>
-			<div className="flex flex-col gap-4">
-				<h1 className="px-2 text-[22px] font-bold leading-6">Über BärGPT</h1>
-				<p className="p-2">
-					BärGPT ist eine produktiv nutzbare KI-Testumgebung für Beschäftigte
-					der Berliner Landesverwaltung, bereitgestellt vom{" "}
-					<a
-						className="text-ber-mid-grey underline hover:text-ber-darker-grey"
-						href="https://www.citylab-berlin.org"
-					>
-						CityLAB Berlin
-					</a>
-					. BärGPT soll dabei helfen, die Anwendungsmöglichkeiten von
-					Künstlicher Intelligenz für die Verwaltungsarbeit in der Praxis zu
-					erproben. Neben einer Chat-Funktion enthält BärGPT eine Reihe erster
-					kleinerer Anwendungen (KI-Apps) für spezifische Aufgaben aus dem
-					Verwaltungskontext. Die Liste an Anwendungen soll im Dialog mit
-					Beschäftigten der Berliner Verwaltung kontinuierlich erweitert werden.
-					Hierzu werden wir in Zukunft regelmäßige Workshop-Formate anbieten und
-					freuen uns über Ideen und{" "}
-					<a
-						className="text-ber-mid-grey underline hover:text-ber-darker-grey"
-						href="https://citylabberlin.typeform.com/to/kCdnCgvC#product_id=baergpt"
-					>
-						Feedback
-					</a>
-					.
-				</p>
-				<h1 className="px-2 pt-2 text-[22px] font-bold leading-6">
-					Häufig gestellte Fragen
-				</h1>
-				{qas.map((qa) => (
-					<QuestionAnswer
-						key={qa.question}
-						question={qa.question}
-						answer={qa.answer}
-					/>
-				))}
-				<div className="flex flex-row flex-wrap justify-start gap-10 border-t border-ber-light-grey p-2 pt-6">
-					{logoLinks.map((link) => (
-						<a
-							key={link.href}
-							href={link.href}
-							target="_blank"
-							rel="noreferrer"
-						>
-							<img
-								alt={link.alt}
-								src={link.src}
-								width={link.width}
-								height={link.height}
-							/>
-						</a>
-					))}
-				</div>
-
-				<button
-					className="text-darker-blue absolute right-4 top-4 pb-2 hover:text-ber-darker-grey"
-					onClick={() => {
-						(
-							document.getElementById("faq-dialog") as HTMLDialogElement
-						).close();
-					}}
-				>
-					<XIcon className="size-5" />
-				</button>
-			</div>
-		</dialog>
-	);
-};
diff --git a/src/components/icons/check-icon.tsx b/src/components/icons/check-icon.tsx
index 5238798..ff90a07 100644
--- a/src/components/icons/check-icon.tsx
+++ b/src/components/icons/check-icon.tsx
@@ -4,14 +4,14 @@ export const CheckIcon: React.FC = () => {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
-			width="17"
-			height="20"
-			viewBox="0 0 17 20"
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
 			fill="none"
 		>
 			<path
-				d="M16.6443 4.35561C17.1186 4.82975 17.1186 5.59976 16.6443 6.07391L6.93109 15.7844C6.45681 16.2585 5.68659 16.2585 5.21231 15.7844L0.355708 10.9292C-0.118569 10.455 -0.118569 9.68499 0.355708 9.21085C0.829985 8.7367 1.60021 8.7367 2.07449 9.21085L6.0736 13.205L14.9293 4.35561C15.4036 3.88146 16.1738 3.88146 16.6481 4.35561H16.6443Z"
-				fill="currentColor"
+				d="M5.56701 10.0333L10.6587 4.94167L9.64757 3.93056L5.56701 8.01111L3.50868 5.95278L2.49757 6.96389L5.56701 10.0333ZM1.52257 13.5C1.12535 13.5 0.785301 13.3586 0.502431 13.0757C0.21956 12.7928 0.078125 12.4528 0.078125 12.0556V1.94444C0.078125 1.54722 0.21956 1.20718 0.502431 0.924306C0.785301 0.641435 1.12535 0.5 1.52257 0.5H11.6337C12.0309 0.5 12.3709 0.641435 12.6538 0.924306C12.9367 1.20718 13.0781 1.54722 13.0781 1.94444V12.0556C13.0781 12.4528 12.9367 12.7928 12.6538 13.0757C12.3709 13.3586 12.0309 13.5 11.6337 13.5H1.52257ZM1.52257 12.0556H11.6337V1.94444H1.52257V12.0556Z"
+				fill="#69B585"
 			/>
 		</svg>
 	);
diff --git a/src/components/icons/check-solid-icon.tsx b/src/components/icons/check-solid-icon.tsx
new file mode 100644
index 0000000..8c0d71a
--- /dev/null
+++ b/src/components/icons/check-solid-icon.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+export const CheckSolidIcon: React.FC = () => {
+	return (
+		<svg
+			width="23"
+			height="22"
+			viewBox="0 0 23 22"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<g clipPath="url(#clip0_903_702)">
+				<path
+					d="M11.0781 22C13.9955 22 16.7934 20.8411 18.8563 18.7782C20.9192 16.7153 22.0781 13.9174 22.0781 11C22.0781 8.08262 20.9192 5.28473 18.8563 3.22183C16.7934 1.15893 13.9955 0 11.0781 0C8.16074 0 5.36285 1.15893 3.29995 3.22183C1.23705 5.28473 0.078125 8.08262 0.078125 11C0.078125 13.9174 1.23705 16.7153 3.29995 18.7782C5.36285 20.8411 8.16074 22 11.0781 22ZM15.9336 8.98047L10.4336 14.4805C10.0297 14.8844 9.37656 14.8844 8.97695 14.4805L6.22695 11.7305C5.82305 11.3266 5.82305 10.6734 6.22695 10.2738C6.63086 9.87422 7.28398 9.86992 7.68359 10.2738L9.70312 12.2934L14.4727 7.51953C14.8766 7.11562 15.5297 7.11562 15.9293 7.51953C16.3289 7.92344 16.3332 8.57656 15.9293 8.97617L15.9336 8.98047Z"
+					fill="#333333"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_903_702">
+					<rect
+						width="22"
+						height="22"
+						fill="white"
+						transform="translate(0.078125)"
+					/>
+				</clipPath>
+			</defs>
+		</svg>
+	);
+};
diff --git a/src/components/icons/unavailable-icon.tsx b/src/components/icons/unavailable-icon.tsx
new file mode 100644
index 0000000..36b4bba
--- /dev/null
+++ b/src/components/icons/unavailable-icon.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+export const UnavailableIcon: React.FC = () => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+		>
+			<path
+				d="M3.86979 13.5L0.078125 9.70833V4.29167L3.86979 0.5H9.28646L13.0781 4.29167V9.70833L9.28646 13.5H3.86979ZM4.51979 10.0694L6.57813 8.01111L8.63646 10.0694L9.64757 9.05833L7.58924 7L9.64757 4.94167L8.63646 3.93056L6.57813 5.98889L4.51979 3.93056L3.50868 4.94167L5.56701 7L3.50868 9.05833L4.51979 10.0694ZM4.48368 12.0556H8.67257L11.6337 9.09445V4.90556L8.67257 1.94444H4.48368L1.52257 4.90556V9.09445L4.48368 12.0556Z"
+				fill="#FF4949"
+			/>
+		</svg>
+	);
+};
diff --git a/src/components/icons/uncheck-icon.tsx b/src/components/icons/uncheck-icon.tsx
new file mode 100644
index 0000000..0e49d05
--- /dev/null
+++ b/src/components/icons/uncheck-icon.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+export const UncheckIcon: React.FC = () => {
+	return (
+		<svg
+			width="23"
+			height="22"
+			viewBox="0 0 23 22"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<circle cx="11.0781" cy="11" r="10" stroke="#333333" strokeWidth="2" />
+		</svg>
+	);
+};
diff --git a/src/components/sidebar-bar/side-bar.tsx b/src/components/sidebar-bar/side-bar.tsx
index bbceea7..b76a9f7 100644
--- a/src/components/sidebar-bar/side-bar.tsx
+++ b/src/components/sidebar-bar/side-bar.tsx
@@ -7,6 +7,8 @@ import { FaqIcon } from "../icons/faq-icon";
 import { Navigation } from "./navigation";
 import { History } from "./history/history";
 import { SettingsIcon } from "../icons/settings-icon";
+import { faqDialogId } from "../dialogs/faq-dialog/faq-dialog";
+import { settingsDialogId } from "../dialogs/settings-dialog/settings-dialog";
 
 const mdWidth = 768;
 
@@ -100,7 +102,7 @@ export const SideBar: React.FC = () => {
 						title="FAQ"
 						onClick={() =>
 							(
-								document.getElementById("faq-dialog") as HTMLDialogElement
+								document.getElementById(faqDialogId) as HTMLDialogElement
 							)?.showModal()
 						}
 					/>
@@ -110,7 +112,7 @@ export const SideBar: React.FC = () => {
 						title="Einstellungen"
 						onClick={() =>
 							(
-								document.getElementById("settings-dialog") as HTMLDialogElement
+								document.getElementById(settingsDialogId) as HTMLDialogElement
 							)?.showModal()
 						}
 					/>
diff --git a/src/layout/layout.tsx b/src/layout/layout.tsx
index 93f36fb..4b18645 100644
--- a/src/layout/layout.tsx
+++ b/src/layout/layout.tsx
@@ -1,26 +1,25 @@
 import React from "react";
 import { Header } from "../components/header";
 import { Main } from "../components/main";
-import { SplashScreen } from "../components/splash-screen";
-import { useSplashStore } from "../store/splash-store";
+import { SplashScreenDialog } from "../components/dialogs/splash-screen-dialog";
 import { useErrorStore } from "../store/error-store";
 import { ErrorToast } from "../components/error-toast";
-import { Faq } from "../components/faq/faq";
+import { FaqDialog } from "../components/dialogs/faq-dialog/faq-dialog";
 import { useIsLockedStore } from "../store/is-locked-store";
-import { PasswordModal } from "../components/password-modal";
+import { PasswordDialog } from "../components/dialogs/password-dialog";
+import { SettingsDialog } from "../components/dialogs/settings-dialog/settings-dialog";
 
 interface LayoutProps {
 	children: React.ReactNode;
 }
 
 export const Layout: React.FC<LayoutProps> = ({ children }) => {
-	const { isSplashScreenVisible } = useSplashStore();
 	const error = useErrorStore().error;
 	const { isLocked } = useIsLockedStore();
 
 	return (
 		<div className="flex font-arial">
-			{isLocked && <PasswordModal />}
+			{isLocked && <PasswordDialog />}
 
 			{!isLocked && (
 				<>
@@ -30,16 +29,12 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
 						<Main>{children}</Main>
 					</div>
 
-					{isSplashScreenVisible() && (
-						<div className="absolute z-50 h-full w-full flex items-center backdrop-blur-sm">
-							<SplashScreen />
-						</div>
-					)}
+					<SplashScreenDialog />
+					<FaqDialog />
+					<SettingsDialog />
 				</>
 			)}
 
-			<Faq />
-
 			{error && <ErrorToast error={error} />}
 		</div>
 	);
diff --git a/src/store/api.ts b/src/store/api.ts
index 22a5b1b..632f91d 100644
--- a/src/store/api.ts
+++ b/src/store/api.ts
@@ -2,6 +2,7 @@ import { useCurrentChatIdStore } from "./current-chat-id-store";
 import { useChatHistoryStore } from "./chat-history-store";
 import { File as ExtractedFile } from "./types";
 import { useErrorStore } from "./error-store";
+import { useCurrentLLMStore } from "./current-llm-store";
 import { SYSTEM_PROMPTS } from "../system-prompts";
 
 const systemPrompts: { [key: string]: string } = {
@@ -13,6 +14,7 @@ const systemPrompts: { [key: string]: string } = {
 
 export async function streamChatResponse() {
 	const chatId = useCurrentChatIdStore.getState().currentChatId;
+	const { currentLLM } = useCurrentLLMStore.getState();
 	const { handleError } = useErrorStore.getState();
 
 	if (!chatId) {
@@ -38,7 +40,7 @@ export async function streamChatResponse() {
 			headers: {
 				"Content-Type": "application/json",
 				"x-api-key": import.meta.env.VITE_X_API_KEY,
-				llm: "openai",
+				llm: currentLLM,
 			},
 			body: JSON.stringify({
 				messages: [
@@ -97,7 +99,9 @@ export async function streamChatResponse() {
 			for (const chunk of allChunks.split("\n")) {
 				try {
 					const parsedChunk = JSON.parse(chunk);
-					const contentChunk = parsedChunk?.choices?.[0]?.delta?.content;
+					const contentChunk =
+						parsedChunk?.choices?.[0]?.delta?.content ?? // This is for chunks in the OpenAI Style
+						parsedChunk?.message.content; // This is for chunks in the Ollama Style
 
 					// eslint-disable-next-line max-depth
 					if (!contentChunk) {
diff --git a/src/store/current-llm-store.ts b/src/store/current-llm-store.ts
new file mode 100644
index 0000000..94e8691
--- /dev/null
+++ b/src/store/current-llm-store.ts
@@ -0,0 +1,86 @@
+import { create } from "zustand";
+import { useErrorStore } from "./error-store";
+
+export interface availableLLM {
+	identifier: string;
+	baseModelName: string;
+	provider: string;
+	isGdprCompliant: boolean;
+}
+
+interface CurrentLLMStore {
+	currentLLM: string;
+	setCurrentLLM: (model: string) => void;
+	availableLLMs: availableLLM[];
+}
+
+export const defaultModelIdentifier = "azure-gpt-4o-mini";
+
+export const useCurrentLLMStore = create<CurrentLLMStore>()((set) => {
+	getAvailableLLMs().catch(console.error);
+
+	return {
+		currentLLM: "",
+		setCurrentLLM: (model) => set({ currentLLM: model }),
+		availableLLMs: [],
+	};
+});
+
+async function getAvailableLLMs() {
+	const { handleError } = useErrorStore.getState();
+	const url = `${import.meta.env.VITE_API_URL}/models`;
+
+	try {
+		const response = await fetch(url, {
+			method: "GET",
+			headers: {
+				"x-api-key": import.meta.env.VITE_X_API_KEY,
+			},
+		});
+
+		if (!response.body) {
+			console.error("Response body from API is empty");
+			return;
+		}
+
+		if (!response.ok) {
+			const errorResponse = await response.json();
+			handleError(new Error(errorResponse.code));
+			return;
+		}
+
+		const { models } = (await response.json()) as { models: availableLLM[] };
+
+		const sortedAvailableLLMs = sortByDefaultModel(models);
+
+		useCurrentLLMStore.setState({ availableLLMs: sortedAvailableLLMs });
+
+		const defaultModel = models.find(
+			(model) => model.identifier === defaultModelIdentifier,
+		);
+
+		if (!defaultModel) {
+			return;
+		}
+
+		useCurrentLLMStore.setState({ currentLLM: models[0].identifier });
+	} catch (error) {
+		handleError(error);
+	}
+}
+
+function sortByDefaultModel(models: availableLLM[]) {
+	const index = models.findIndex(
+		(model) => model.identifier === defaultModelIdentifier,
+	);
+	const itemToMove = models[index];
+
+	if (index === -1) {
+		return models;
+	}
+
+	models.splice(index, 1);
+	models.unshift(itemToMove);
+
+	return models;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 521933c..908c687 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,6 +19,7 @@ export default {
 				"ber-pink": "#F5B3CB",
 				"ber-pink-darker": "#EF81A9",
 				"ber-orange": "#F29301",
+				"ber-red": "#FF4949",
 			},
 			fontFamily: {
 				arial: ["Arial"],

From ce592c18a71c18c3f0f4f5506ca6e7a8f8e313b5 Mon Sep 17 00:00:00 2001
From: aeschi <anna.eschenbacher@icloud.com>
Date: Tue, 27 Aug 2024 10:05:50 +0200
Subject: [PATCH 05/33] feat: add varying model description

---
 .../settings-dialog/settings-option.tsx       | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/dialogs/settings-dialog/settings-option.tsx b/src/components/dialogs/settings-dialog/settings-option.tsx
index 525bec3..811d06e 100644
--- a/src/components/dialogs/settings-dialog/settings-option.tsx
+++ b/src/components/dialogs/settings-dialog/settings-option.tsx
@@ -18,6 +18,32 @@ export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
 
 	const isChecked = option.identifier === currentLLM;
 
+	const descriptionText = (() => {
+		switch (option.provider) {
+			case "Azure":
+				return "Beschreibung für welche Anwendungsfälle das Modell am besten geeignet ist. Azure";
+			case "Ollama":
+				return "Beschreibung für welche Anwendungsfälle das Modell am besten geeignet ist Ollama";
+			case "OpenAI":
+				return "Beschreibung für welche Anwendungsfälle das Modell am besten geeignet ist OPENAI";
+			default:
+				return "";
+		}
+	})();
+
+	const serverLocation = (() => {
+		switch (option.provider) {
+			case "Azure":
+				return "Schweden";
+			case "Ollama":
+				return "Berlin";
+			case "OpenAI":
+				return "USA";
+			default:
+				return "";
+		}
+	})();
+
 	return (
 		<label
 			htmlFor={option.identifier}
@@ -38,11 +64,7 @@ export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
 					)}
 				</div>
 
-				<p className="text-sm">
-					Beschreibung für welche Anwendungsfälle das Modell am besten geeignet
-					ist, eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
-					sed diam
-				</p>
+				<p className="text-sm">{descriptionText}</p>
 
 				<div className="flex-wrap flex gap-x-5 gap-y-1 text-sm">
 					<div className="flex flex-row gap-2 items-center">
@@ -55,16 +77,14 @@ export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
 					</div>
 					<div className="flex flex-row gap-2 items-center">
 						<p className="font-bold">Serverstandort</p>
-						{option.provider === "Azure" && <p>Schweden</p>}
-						{option.provider === "Ollama" && <p>Berlin</p>}
-						{option.provider === "OpenAI" && <p>USA</p>}
+						{option.provider && <p>{serverLocation}</p>}
 					</div>
 				</div>
 
 				<input
 					type="radio"
 					id={option.identifier}
-					name={"model"}
+					name="model"
 					value={option.identifier}
 					className="appearance-none"
 					defaultChecked={option.identifier === defaultModelIdentifier}

From f4e8247ea074108f959ad0e79c1b5724c748cb25 Mon Sep 17 00:00:00 2001
From: Esshahn <ingo@hinterding.de>
Date: Tue, 27 Aug 2024 10:32:50 +0200
Subject: [PATCH 06/33] settings intro text

---
 src/components/dialogs/settings-dialog/settings-dialog.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/dialogs/settings-dialog/settings-dialog.tsx b/src/components/dialogs/settings-dialog/settings-dialog.tsx
index 326ec9a..6dfdedf 100644
--- a/src/components/dialogs/settings-dialog/settings-dialog.tsx
+++ b/src/components/dialogs/settings-dialog/settings-dialog.tsx
@@ -19,10 +19,7 @@ export const SettingsDialog: React.FC = () => {
 					<div className="text-lg flex flex-col gap-3">
 						<h3 className="font-bold">Modellauswahl</h3>
 						<p>
-							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-							nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
-							erat, sed diam voluptua. At vero eos et accusam et justo duo
-							dolores et ea rebum
+							Für den Test von BärGPT stehen verschiedene Large Language Modelle zur Auswahl. Bitte beachten Sie die Angaben zu Datenschutz und Serverstandort. Wir empfehlen aktuell das Modell azure-gpt-4o-mini, welches den Anforderungen an die DSGVO entspricht.
 						</p>
 					</div>
 

From 4787f04f05f7dfd55b0f4a76843e365c54bb9ff9 Mon Sep 17 00:00:00 2001
From: Esshahn <ingo@hinterding.de>
Date: Tue, 27 Aug 2024 10:34:53 +0200
Subject: [PATCH 07/33] prettier check

---
 src/components/dialogs/settings-dialog/settings-dialog.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/dialogs/settings-dialog/settings-dialog.tsx b/src/components/dialogs/settings-dialog/settings-dialog.tsx
index 6dfdedf..bfd0571 100644
--- a/src/components/dialogs/settings-dialog/settings-dialog.tsx
+++ b/src/components/dialogs/settings-dialog/settings-dialog.tsx
@@ -19,7 +19,11 @@ export const SettingsDialog: React.FC = () => {
 					<div className="text-lg flex flex-col gap-3">
 						<h3 className="font-bold">Modellauswahl</h3>
 						<p>
-							Für den Test von BärGPT stehen verschiedene Large Language Modelle zur Auswahl. Bitte beachten Sie die Angaben zu Datenschutz und Serverstandort. Wir empfehlen aktuell das Modell azure-gpt-4o-mini, welches den Anforderungen an die DSGVO entspricht.
+							Für den Test von BärGPT stehen verschiedene Large Language Modelle
+							zur Auswahl. Bitte beachten Sie die Angaben zu Datenschutz und
+							Serverstandort. Wir empfehlen aktuell das Modell
+							azure-gpt-4o-mini, welches den Anforderungen an die DSGVO
+							entspricht.
 						</p>
 					</div>
 

From 9e67d242e3f8bcba5cd948f23d6b9a7a1d6a20a0 Mon Sep 17 00:00:00 2001
From: Esshahn <ingo@hinterding.de>
Date: Tue, 27 Aug 2024 10:49:49 +0200
Subject: [PATCH 08/33] add default text to model description

---
 .../dialogs/settings-dialog/settings-option.tsx           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/dialogs/settings-dialog/settings-option.tsx b/src/components/dialogs/settings-dialog/settings-option.tsx
index 811d06e..4aa2911 100644
--- a/src/components/dialogs/settings-dialog/settings-option.tsx
+++ b/src/components/dialogs/settings-dialog/settings-option.tsx
@@ -21,11 +21,11 @@ export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
 	const descriptionText = (() => {
 		switch (option.provider) {
 			case "Azure":
-				return "Beschreibung für welche Anwendungsfälle das Modell am besten geeignet ist. Azure";
-			case "Ollama":
-				return "Beschreibung für welche Anwendungsfälle das Modell am besten geeignet ist Ollama";
+				return "Aktuelles Modell von Open AI, datenschutzkonform gehostet von Microsoft Azure.";
 			case "OpenAI":
-				return "Beschreibung für welche Anwendungsfälle das Modell am besten geeignet ist OPENAI";
+				return "Aktuelles Modell von Open AI, gehostet von Open AI.";
+			case "Ollama":
+				return "Open Source-Modell von Meta, datenschutzkonform gehostet im CityLAB Berlin.";
 			default:
 				return "";
 		}

From de3a4db79e6ed05b28b8ed6d01c66af3f1fb39d6 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Tue, 27 Aug 2024 16:57:05 +0200
Subject: [PATCH 09/33] feat: switch order of navigation (#59)

* feat: switch order of navigation

* feat: change wording

* fix: button width
---
 .../chat/get-started/get-started-nav-links.tsx   | 16 ++++++++--------
 src/components/sidebar-bar/navigation.tsx        | 12 ++++++------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/chat/get-started/get-started-nav-links.tsx b/src/components/chat/get-started/get-started-nav-links.tsx
index c9485a3..f7304b8 100644
--- a/src/components/chat/get-started/get-started-nav-links.tsx
+++ b/src/components/chat/get-started/get-started-nav-links.tsx
@@ -19,17 +19,17 @@ const appLinks = [
 		backgroundColor: "bg-ber-blue hover:bg-ber-blue-darker",
 	},
 	{
-		label: "Hilf mir einen Vermerk zu erstellen",
-		icon: <VermerkIcon />,
-		href: "/note",
-		backgroundColor: "bg-ber-yellow hover:bg-ber-yellow-darker",
-	},
-	{
-		label: "Hilf mir Texte zusammenzufassen",
+		label: "Hilf mir, einen Text zu bearbeiten",
 		icon: <PDFIcon />,
 		href: "/summary",
 		backgroundColor: "bg-ber-pink hover:bg-ber-pink-darker",
 	},
+	{
+		label: "Hilf mir, einen Vermerk zu erstellen",
+		icon: <VermerkIcon />,
+		href: "/note",
+		backgroundColor: "bg-ber-yellow hover:bg-ber-yellow-darker",
+	},
 ];
 
 export const GetStartedNavLinks: React.FC = () => {
@@ -40,7 +40,7 @@ export const GetStartedNavLinks: React.FC = () => {
 					{appLinks.map((item) => (
 						<li
 							key={item.label}
-							className={`flex flex-row items-center w-[304px] gap-3 rounded-sm px-4 py-2 hover:underline ${item.backgroundColor} `}
+							className={`flex flex-row items-center w-[308px] gap-3 rounded-sm px-4 py-2 hover:underline ${item.backgroundColor} `}
 						>
 							<div className="flex">{item.icon}</div>
 							<a
diff --git a/src/components/sidebar-bar/navigation.tsx b/src/components/sidebar-bar/navigation.tsx
index 8a0bd14..31997bd 100644
--- a/src/components/sidebar-bar/navigation.tsx
+++ b/src/components/sidebar-bar/navigation.tsx
@@ -18,18 +18,18 @@ const navLinks = [
 		href: "/email",
 		backgroundColor: "bg-ber-blue hover:bg-ber-blue-darker",
 	},
+	{
+		label: "Text bearbeiten",
+		icon: <PDFIcon />,
+		href: "/summary",
+		backgroundColor: "bg-ber-pink hover:bg-ber-pink-darker",
+	},
 	{
 		label: "Vermerk erstellen",
 		icon: <VermerkIcon />,
 		href: "/note",
 		backgroundColor: "bg-ber-yellow hover:bg-ber-yellow-darker",
 	},
-	{
-		label: "Text zusammenfassen",
-		icon: <PDFIcon />,
-		href: "/summary",
-		backgroundColor: "bg-ber-pink hover:bg-ber-pink-darker",
-	},
 ];
 
 const location = window.location.pathname;

From c394f95519e6840cf2ab4862b15be864dd6c8c62 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Tue, 27 Aug 2024 17:00:50 +0200
Subject: [PATCH 10/33] Feat: email prompt improvement (#55)

* feat: always show getting started message

* feat: add styling to returned mail

* feat: adjust system prompt and add mail chat buttons

* fix: chat button visibility

* feat: improve prompt

* feat: resize textinput automatically

* feat: adjust get started message and prompt

* fix: history bar markdown filter

* feat: adjust starting system prompt
---
 src/components/email-chat/email-chat-form.tsx |  7 +-
 .../email-chat/email-chat-messages.tsx        |  4 +
 src/components/email-chat/email-chat.tsx      |  9 --
 .../email-chat/get-started-email-chat.tsx     | 17 ++--
 src/components/email/email-chat-buttons.tsx   |  2 +-
 .../messages/preformatted-text-element.tsx    |  4 +-
 src/components/messages/text-message.tsx      | 15 ++--
 .../sidebar-bar/history/history-entry.tsx     |  2 +-
 src/index.css                                 | 30 ++++++-
 src/store/storage.ts                          |  2 +
 src/system-prompts.ts                         | 83 ++++++++-----------
 11 files changed, 96 insertions(+), 79 deletions(-)

diff --git a/src/components/email-chat/email-chat-form.tsx b/src/components/email-chat/email-chat-form.tsx
index e51c2a0..1541d0d 100644
--- a/src/components/email-chat/email-chat-form.tsx
+++ b/src/components/email-chat/email-chat-form.tsx
@@ -43,10 +43,14 @@ export const EmailChatForm: React.FC = () => {
 						onSubmit={onSubmit}
 					>
 						<textarea
-							className="w-full h-6 bg-ber-lighter-grey focus:outline-none max-h-72 resize-y"
+							className="w-full bg-ber-lighter-grey focus:outline-none max-h-52 resize-y"
 							name="message"
 							required
 							placeholder="Was für eine E-Mail möchten Sie formulieren?"
+							onInput={(e) => {
+								e.currentTarget.style.height = "auto";
+								e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`;
+							}}
 							onKeyDown={(e) => {
 								if (e.key === "Enter" && !e.shiftKey) {
 									e.preventDefault();
@@ -55,6 +59,7 @@ export const EmailChatForm: React.FC = () => {
 									);
 								}
 							}}
+							rows={1}
 						/>
 
 						<button
diff --git a/src/components/email-chat/email-chat-messages.tsx b/src/components/email-chat/email-chat-messages.tsx
index db1a1ca..3030736 100644
--- a/src/components/email-chat/email-chat-messages.tsx
+++ b/src/components/email-chat/email-chat-messages.tsx
@@ -4,6 +4,7 @@ import { Message } from "../../store/types";
 import { TextMessage } from "../messages/text-message";
 import { useChatHistoryStore } from "../../store/chat-history-store";
 import { useHasUserScrolledStore } from "../../store/has-user-scrolled-store";
+import { GetStartedEmailChat } from "./get-started-email-chat";
 
 export const EmailChatMessages: React.FC = () => {
 	const { getChat } = useChatHistoryStore();
@@ -71,6 +72,9 @@ export const EmailChatMessages: React.FC = () => {
 			className="flex w-full justify-center overflow-auto pb-2 px-5"
 		>
 			<div className="md:w-[640px] lg:w-[768px] flex flex-col gap-y-4">
+				<div className="flex">
+					<GetStartedEmailChat />
+				</div>
 				{messages.map((message) => (
 					<TextMessage
 						key={message.id}
diff --git a/src/components/email-chat/email-chat.tsx b/src/components/email-chat/email-chat.tsx
index b9e6ede..548624a 100644
--- a/src/components/email-chat/email-chat.tsx
+++ b/src/components/email-chat/email-chat.tsx
@@ -1,19 +1,10 @@
 import React from "react";
-import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
 import { EmailChatForm } from "./email-chat-form";
-import { GetStartedEmailChat } from "./get-started-email-chat";
 import { EmailChatMessages } from "./email-chat-messages";
-import { useChatHistoryStore } from "../../store/chat-history-store";
 
 export const EmailChat: React.FC = () => {
-	const { getChat } = useChatHistoryStore();
-	const { currentChatId } = useCurrentChatIdStore();
-	const messages = getChat(currentChatId)?.messages || [];
-
 	return (
 		<div className="flex h-full flex-col items-center justify-between pt-16 pb-5 relative">
-			{messages.length === 0 && <GetStartedEmailChat />}
-
 			<EmailChatMessages />
 
 			<EmailChatForm />
diff --git a/src/components/email-chat/get-started-email-chat.tsx b/src/components/email-chat/get-started-email-chat.tsx
index 3917bfc..9abc05c 100644
--- a/src/components/email-chat/get-started-email-chat.tsx
+++ b/src/components/email-chat/get-started-email-chat.tsx
@@ -15,10 +15,6 @@ const mailStartPrompts = [
 		label: "Auf E-Mail antworten",
 		value: "Ich möchte auf eine E-Mail antworten.",
 	},
-	{
-		label: "Wie kann BärGPT mir helfen E-Mails zu schreiben",
-		value: "Wie kann BärGPT mir helfen E-Mails zu schreiben?",
-	},
 ];
 
 async function onClick(value: string) {
@@ -34,17 +30,14 @@ async function onClick(value: string) {
 
 export const GetStartedEmailChat: React.FC = () => {
 	return (
-		<div className="flex md:w-[640px] lg:w-[768px] max-w-full flex-row overflow-auto px-5">
+		<div className="flex md:w-[640px] lg:w-[768px] max-w-full flex-row overflow-auto  pt-[30%]">
 			<div className="mt-1 flex size-[35px] min-w-[35px] items-center justify-center border border-black bg-white">
 				<BaerIcon className="h-[21px] w-[21px]" />
 			</div>
-			<div className="flex flex-col gap-4 px-3">
-				<p>
-					Hallo, ich bin Bär GPT und helfe Ihnen gerne bei der Formulierung von
-					E-Mails. Gemeinsam erarbeiten wir Schritt für Schritt eine passende
-					E-Mail. Was möchten Sie tun?
-				</p>
-				<div className="flex flex-wrap gap-4">
+			<div className="flex flex-col gap-1 px-3">
+				<p>Hallo, gemeinsam formulieren wir Schritt für Schritt eine E-Mail.</p>
+				<h1 className="text-3xl font-bold">Was möchten Sie tun?</h1>
+				<div className="flex flex-wrap gap-4 pt-3">
 					{mailStartPrompts.map(({ label, value }) => (
 						<TagButton
 							key={label}
diff --git a/src/components/email/email-chat-buttons.tsx b/src/components/email/email-chat-buttons.tsx
index 86b1acc..aa2841c 100644
--- a/src/components/email/email-chat-buttons.tsx
+++ b/src/components/email/email-chat-buttons.tsx
@@ -35,7 +35,7 @@ async function onClick(value: string) {
 export const EmailChatButtons: React.FC = () => {
 	return (
 		<div
-			className={`flex w-fit gap-2 border-t border-ber-light-grey ml-11 mt-2 pt-4 md:gap-4 
+			className={`flex w-fit gap-2 ml-2 text-sm
 		${useIsLoadingStore.getState().isLoading ? "opacity-0" : "opacity-100"}`}
 		>
 			{formatButtons.map(({ label, value }) => (
diff --git a/src/components/messages/preformatted-text-element.tsx b/src/components/messages/preformatted-text-element.tsx
index 58e2bce..c0343d8 100644
--- a/src/components/messages/preformatted-text-element.tsx
+++ b/src/components/messages/preformatted-text-element.tsx
@@ -7,5 +7,7 @@ interface PreformattedTextElementProps {
 export const PreformattedTextElement: React.FC<
 	PreformattedTextElementProps
 > = ({ children }) => {
-	return <pre className="ml-3 whitespace-pre-wrap w-full my-4">{children}</pre>;
+	return (
+		<pre className="ml-10 whitespace-pre-wrap w-10/11 my-10">{children}</pre>
+	);
 };
diff --git a/src/components/messages/text-message.tsx b/src/components/messages/text-message.tsx
index 21a6715..dd95d84 100644
--- a/src/components/messages/text-message.tsx
+++ b/src/components/messages/text-message.tsx
@@ -5,8 +5,8 @@ import { RefreshIcon } from "../icons/refresh-icon";
 import { CopyToClipboardButton } from "../buttons/copy-to-clipboard-button";
 import { streamChatResponse } from "../../store/api";
 import { useChatHistoryStore } from "../../store/chat-history-store";
-// import { EmailChatButtons } from "../email/email-chat-buttons";
-// import { getStorageKey } from "../../store/storage";
+import { EmailChatButtons } from "../email/email-chat-buttons";
+import { getStorageKey } from "../../store/storage";
 import { useIsLoadingStore } from "../../store/is-loading-store";
 import { useHasUserScrolledStore } from "../../store/has-user-scrolled-store";
 import { PreformattedTextElement } from "./preformatted-text-element";
@@ -35,6 +35,10 @@ export const TextMessage: React.FC<TextMessageProps> = ({
 		setIsLoading(false);
 	};
 
+	const showEmailChatButtons =
+		getStorageKey() === "email-history" ||
+		(getStorageKey() === "email-chat-history" && content.includes("```"));
+
 	return (
 		<div
 			className={`flex flex-col ${role === "user" ? "self-end max-w-[85%] lg:max-w-[80%]" : "self-start pb-4"}`}
@@ -71,13 +75,12 @@ export const TextMessage: React.FC<TextMessageProps> = ({
 							</button>
 						)}
 						<CopyToClipboardButton generatedAnswer={content} />
+						{isLastMessageOfChat(messageId) &&
+							role === "assistant" &&
+							showEmailChatButtons && <EmailChatButtons />}
 					</div>
 				</div>
 			</div>
-
-			{/* {isLastMessageOfChat(messageId) &&
-				role === "assistant" &&
-				getStorageKey() === "email-history" && <EmailChatButtons />} */}
 		</div>
 	);
 };
diff --git a/src/components/sidebar-bar/history/history-entry.tsx b/src/components/sidebar-bar/history/history-entry.tsx
index 6d8f79a..76e600d 100644
--- a/src/components/sidebar-bar/history/history-entry.tsx
+++ b/src/components/sidebar-bar/history/history-entry.tsx
@@ -5,7 +5,7 @@ import { BucketIcon } from "../../icons/bucket-icon";
 import { useChatHistoryStore } from "../../../store/chat-history-store";
 
 const removeMarkdownStyling = (name: string): string => {
-	return name.replace(/[-#`>*]/g, "");
+	return name.replace(/[#`>*]/g, "");
 };
 
 interface HistoryEntryProps {
diff --git a/src/index.css b/src/index.css
index d3bb490..0b4e16e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -29,10 +29,38 @@
 	h4,
 	h5,
 	h6 {
-		@apply text-xl;
+		@apply font-bold pl-3 pt-2 text-ber-darker-grey;
+	}
+
+	.markdown-container h1 {
+		@apply text-[22px] pb-4;
+	}
+
+	.markdown-container h2 {
+		@apply text-[20px];
+	}
+
+	.markdown-container h3 {
+		@apply text-[18px];
+	}
+
+	.markdown-container h4 {
+		@apply text-[16px];
+	}
+
+	.markdown-container h5 {
+		@apply text-[14px];
+	}
+
+	.markdown-container h6 {
+		@apply text-[12px];
 	}
 
 	.markdown-container a {
 		@apply text-ber-mid-grey underline hover:text-ber-darker-grey;
 	}
+
+	.markdown-container code {
+		@apply font-arial;
+	}
 }
diff --git a/src/store/storage.ts b/src/store/storage.ts
index d2bfac1..8f3ed62 100644
--- a/src/store/storage.ts
+++ b/src/store/storage.ts
@@ -1,6 +1,7 @@
 const storageKeys: Record<string, string> = {
 	"/": "chat-history",
 	"/email": "email-history",
+	"/email-chat": "email-chat-history",
 	"/note": "note-history",
 	"/summary": "summary-history",
 };
@@ -19,6 +20,7 @@ export function getStorageKey(): string {
 const storageKeyNames: Record<string, string> = {
 	"/": "Chat Funktion",
 	"/email": "E-Mail Funktion",
+	"/email-chat": "E-Mail Chat Funktion",
 	"/note": "Vermerk Funktion",
 	"/summary": "Zusammenfassung",
 };
diff --git a/src/system-prompts.ts b/src/system-prompts.ts
index d564926..b57f81c 100644
--- a/src/system-prompts.ts
+++ b/src/system-prompts.ts
@@ -36,53 +36,43 @@ WICHTIG: Antworte immer auf Deutsch, außer die Anfrage erfolgt in einer anderen
      4. **[Text zusammenfassen](/summary)**  
         - *Mit der Funktion "Zusammenfassen" können Sie längere Texte einfach auf das Wesentliche reduzieren. So schaffen Sie sich einen schnellen Überblick über die Inhalte oder geben Kolleg:innen einen schnellen Einblick in das Dokument, welches Sie z.B. per E-Mail versenden.*  
 `,
-	EMAIL_SYSTEM_PROMPT: `Du bist BärGPT, ein intelligenter Assistent, der Verwaltungsmitarbeitern hilft, passende E-Mails zu verfassen. Dein Ziel ist es, den Prozess so effizient und klar wie möglich zu gestalten. Zusätzlich unterstützt du den Benutzer, indem du ihn auf andere geeignete Apps hinweist, wenn seine Anfragen außerhalb der E-Mail-Funktion liegen.
+	EMAIL_SYSTEM_PROMPT: `
+### BärGPT - Der intelligente E-Mail-Assistent für Verwaltungsmitarbeiter
+
+**Ziel:** Du bist BärGPT, ein intelligenter Assistent, der Verwaltungsmitarbeitern hilft, effiziente und klare E-Mails zu verfassen. Deine Antworten sind immer kurz und prägnant. Zusätzlich unterstützt du den Benutzer, indem du auf geeignete Apps hinweist, wenn Anfragen außerhalb der E-Mail-Funktion liegen.
+
+#### Schritte zur Unterstützung des Benutzers:
+
+1. **Einleitung:**
+   - Frage, ob auf eine E-Mail geantwortet oder eine neue E-Mail verfasst werden soll.
+     - Beispiel: *"Möchten Sie auf eine E-Mail antworten oder eine neue E-Mail verfassen?"*
+
+   2. **Antwort auf eine E-Mail:**
+   - Bitte den Benutzer, die vorherige E-Mail zu kopieren oder Details zu nennen.
+     - Beispiel: *"Bitte kopieren Sie die vorherige E-Mail hier ein oder geben Sie die wichtigsten Informationen an."*
+   - Frage kurz nach dem gewünschten Inhalt der Antwort.
+     - Beispiel: *"Worauf möchten Sie in der E-Mail antworten?"*
+   - Nur bei Unklarheiten nach weiteren Details fragen.
+
+3. **Neue E-Mail verfassen:**
+   - Frage kurz nach den Details der neuen E-Mail.
+     - Beispiel: *"Was soll der Inhalt der E-Mail sein?"*
+   - Erstelle so früh wie möglich einen Entwurf. Unklare Punkte können mit Platzhaltern gefüllt werden.
+
+4. **Formulierung und Anpassung:**
+   - Zeige den Entwurf und frage, ob Anpassungen gewünscht sind.
+     - Beispiel: *"Möchten Sie noch etwas hinzufügen oder ändern?"*
+   - Gebe den Entwurf IMMER als Markdown-Codeblock zurück.
+
+5. **Hinweis auf andere Apps:**
+   - Wenn die Anfrage außerhalb des E-Mail-Bereichs liegt, verweise auf passende Apps.
+     - Beispiel: *"Für Ihre Anfrage ist möglicherweise eine andere App besser geeignet. Hier sind einige Optionen:"*
+       1. **[Chat](/)** - Nutzen Sie den freien Chat, um in Echtzeit Fragen zu stellen, Ideen zu diskutieren oder Unterstützung bei verschiedenen Themen zu erhalten.
+       2. **[E-Mail](/email)** - Diese Funktion unterstützt Sie beim Verfassen professioneller E-Mails, egal ob formell, informativ oder freundlich.
+       3. **[Vermerk erstellen](/note)** - Der Vermerk-Assistent unterstützt Sie, aussagekräftige und leicht verständliche Sachverhalte, Entscheidungen und Hinweise zu formulieren
+       4. **[Text zusammenfassen](/summary)** - Mit der Funktion "Zusammenfassen" können Sie längere Texte einfach auf das Wesentliche reduzieren. So schaffen Sie sich einen schnellen Überblick über die Inhalte oder geben Kolleg:innen einen schnellen Einblick in das Dokument, welches Sie z.B. per E-Mail versenden.
+"`,
 
-Befolge dabei stets die folgenden Schritte:
-
-1. **Einleitung und Hilfe anbieten:** Beginne jede Interaktion mit einer kurzen Begrüßung. Wenn der Benutzer explizit nach Hilfe fragt, wie er eine E-Mail verfassen kann, erkläre den Ablauf:
-
-   Beispiel:  
-   - *"Hallo! Ich kann Ihnen helfen, eine E-Mail zu verfassen. Sie können entweder auf eine E-Mail antworten oder eine neue E-Mail erstellen. Wenn Sie mir sagen, was Sie tun möchten, stelle ich Ihnen die nötigen Fragen, um den Inhalt zu erfassen und Ihnen einen passenden Entwurf zu erstellen."*  
-   - *"Möchten Sie auf eine E-Mail antworten oder eine neue E-Mail verfassen?"*
-
-2. **Antwort auf eine E-Mail:** Wenn der Benutzer antworten möchte, frage nach den Details der E-Mail, auf die er antworten möchte:
-
-   - Bitte den Benutzer, die vorherige E-Mail in den Chat zu kopieren oder lade weitere Informationen hoch.
-   - Falls die vorherige E-Mail nicht verfügbar ist, frage nach dem Hauptanliegen der vorherigen E-Mail?
-   - Falls etwas unklar ist, frage nach weiteren Details.
-   - Gehe anschließend zu Schritt 5 **Formulierung und Anpassung** über.
-
-3. **Neue E-Mail:** Wenn der Benutzer eine neue E-Mail verfassen möchte, gehe folgendermaßen vor:
-
-   - Frage zunächst: Um was soll es in der E-Mail gehen?
-   - Versuche, mit den ersten Informationen so früh wie möglich einen E-Mail-Entwurf zu erstellen. Unklare Punkte können zunächst übersprungen oder mit einem Platzhalter gefüllt werden.
-   - Frage danach, ob die E-Mail formell oder informell sein soll und ob noch weitere Anforderungen bestehen.
-
-4. **Formulierung und Anpassung:** Nachdem du alle Informationen gesammelt hast, formuliere die E-Mail in einem Entwurf und frage, ob noch Anpassungen vorgenommen werden sollen.
-
-   - Zeige dem Benutzer den Entwurf und bitte um Feedback.
-   - Biete an, den Text nach den Wünschen des Benutzers anzupassen, bis er zufrieden ist.
-
-5. **Abschluss:** Zum Schluss biete an, die E-Mail zu speichern oder direkt zu versenden, wenn dies gewünscht wird.
-
-6. **Hinweis auf andere Apps:** Wenn der Benutzer Anfragen stellt, die nicht in den E-Mail-Bereich fallen, weise ihn freundlich auf die passenden Apps hin:
-
-   Beispiel:  
-   - *"Es scheint, dass Ihre Anfrage möglicherweise besser von einer anderen App unterstützt wird. Hier sind die verfügbaren Apps:"*  
-     1. **[Chat](/)**  
-        - *Nutzen Sie den freien Chat, um in Echtzeit Fragen zu stellen, Ideen zu diskutieren oder Unterstützung bei verschiedenen Themen zu erhalten.*  
-     2. **[E-Mail](/email)**  
-        - *Diese Funktion unterstützt Sie beim Verfassen professioneller E-Mails, egal ob formell, informativ oder freundlich.*
-     3. **[Vermerk erstellen](/note)**  
-        - *Der Vermerk-Assistent unterstützt Sie, aussagekräftige und leicht verständliche Sachverhalte, Entscheidungen und Hinweise zu formulieren..*  
-     4. **[Text zusammenfassen](/summary)**  
-        - *Mit der Funktion "Zusammenfassen" können Sie längere Texte einfach auf das Wesentliche reduzieren. So schaffen Sie sich einen schnellen Überblick über die Inhalte oder geben Kolleg:innen einen schnellen Einblick in das Dokument, welches Sie z.B. per E-Mail versenden.*  
-     
-
-**Wichtiger Hinweis:**  
-Wenn der Benutzer explizit nach Hilfe fragt, wie er eine E-Mail verfassen kann, stelle sicher, dass du eine Erklärung des gesamten Prozesses anbietest, anstatt nur die standardmäßige Frage "Möchten Sie auf eine E-Mail antworten oder eine neue E-Mail verfassen?" zu stellen. Wenn der Benutzer Anfragen außerhalb der E-Mail-Funktion stellt, weise ihn auf die passende App hin, die seinen Bedürfnissen entspricht.
- `,
 	NOTE_SYSTEM_PROMPT: `Du bist BärGPT, ein intelligenter Assistent, der Verwaltungsmitarbeitern hilft, passende Notizen zu verfassen. Dein Ziel ist es, den Prozess so effizient und klar wie möglich zu gestalten. Befolge dabei stets die folgenden Schritte:
 
 1. **Einleitung:** Beginne jede Interaktion mit einer kurzen Begrüßung und frage, was der Benutzer notieren möchte.
@@ -98,7 +88,6 @@ Wenn der Benutzer explizit nach Hilfe fragt, wie er eine E-Mail verfassen kann,
 3. **Formulierung und Anpassung:** Nachdem du alle Informationen gesammelt hast, formuliere die Notiz in einem Entwurf und frage, ob noch Anpassungen vorgenommen werden sollen.
 
 Dein Ziel ist es, immer präzise und freundlich zu sein, um den Verwaltungsmitarbeitern bestmöglich zu helfen, ihre Notizen effizient und klar zu formulieren.
-
 `,
 	SUMMARY_SYSTEM_PROMPT: `
   Du bist BärGPT, ein intelligenter Assistent, der Verwaltungsmitarbeitern hilft, jegliche Art von Texten zu bearbeiten. 

From be351ad4f1d6a73e1380aaeb6a1beca8d072e630 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:01:58 +0200
Subject: [PATCH 11/33] feat: add text summary feature (#58)

* feat: add text summary feature

* feat: style getting started text

* feat: adapt system prompt

* feat: improve system prompt

* feat: adapt prompt

* feat: streamline markdown styling

* feat: rename summary to edit

* feat: streamline help app prompt

* feat: adjust prompt and styling

* feat: allow for pdf as only chat input

* feat: remve unused code
---
 .../get-started/get-started-nav-links.tsx     |   2 +-
 .../edit/edit-chat-form/edit-chat-form.tsx    |  83 ++++++++++++
 .../edit-chat-form/file-upload-button.tsx     |  27 ++++
 src/components/edit/edit-chat-messages.tsx    |  97 ++++++++++++++
 src/components/edit/edit-get-started.tsx      |  18 +++
 src/components/edit/edit.tsx                  |  20 +++
 src/components/edit/uploaded-files.tsx        |  46 +++++++
 src/components/main.tsx                       |   2 +-
 .../messages/preformatted-text-element.tsx    |  13 --
 src/components/messages/text-message.tsx      |   4 -
 src/components/sidebar-bar/navigation.tsx     |   2 +-
 src/index.css                                 |  12 +-
 src/main.tsx                                  |   6 +-
 src/routes/edit.tsx                           |  11 ++
 src/routes/summary.tsx                        |  29 ----
 src/store/api.ts                              |   2 +-
 src/store/storage.ts                          |  21 +--
 src/system-prompts.ts                         | 126 ++++++++++--------
 18 files changed, 392 insertions(+), 129 deletions(-)
 create mode 100644 src/components/edit/edit-chat-form/edit-chat-form.tsx
 create mode 100644 src/components/edit/edit-chat-form/file-upload-button.tsx
 create mode 100644 src/components/edit/edit-chat-messages.tsx
 create mode 100644 src/components/edit/edit-get-started.tsx
 create mode 100644 src/components/edit/edit.tsx
 create mode 100644 src/components/edit/uploaded-files.tsx
 delete mode 100644 src/components/messages/preformatted-text-element.tsx
 create mode 100644 src/routes/edit.tsx
 delete mode 100644 src/routes/summary.tsx

diff --git a/src/components/chat/get-started/get-started-nav-links.tsx b/src/components/chat/get-started/get-started-nav-links.tsx
index f7304b8..98086e2 100644
--- a/src/components/chat/get-started/get-started-nav-links.tsx
+++ b/src/components/chat/get-started/get-started-nav-links.tsx
@@ -21,7 +21,7 @@ const appLinks = [
 	{
 		label: "Hilf mir, einen Text zu bearbeiten",
 		icon: <PDFIcon />,
-		href: "/summary",
+		href: "/edit",
 		backgroundColor: "bg-ber-pink hover:bg-ber-pink-darker",
 	},
 	{
diff --git a/src/components/edit/edit-chat-form/edit-chat-form.tsx b/src/components/edit/edit-chat-form/edit-chat-form.tsx
new file mode 100644
index 0000000..4633a4c
--- /dev/null
+++ b/src/components/edit/edit-chat-form/edit-chat-form.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import { FileUploadButton } from "./file-upload-button";
+import { SendIcon } from "../../icons/send-icon";
+import { useIsLoadingStore } from "../../../store/is-loading-store";
+import { useInputFileStore } from "../../../store/input-file-store";
+import { useChatHistoryStore } from "../../../store/chat-history-store";
+import { streamChatResponse } from "../../../store/api";
+import { useHasUserScrolledStore } from "../../../store/has-user-scrolled-store";
+
+const { setIsLoading } = useIsLoadingStore.getState();
+const { reset: resetFiles, saveFilesAsMessages } = useInputFileStore.getState();
+const { saveMessage } = useChatHistoryStore.getState();
+const { setHasUserScrolled } = useHasUserScrolledStore.getState();
+
+async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+	event.preventDefault();
+	setIsLoading(true);
+	setHasUserScrolled(false);
+
+	const { files } = useInputFileStore.getState();
+
+	const formData = new FormData(event.currentTarget);
+	event.currentTarget.reset();
+
+	const message = formData.get("message");
+	if (!message && files.length === 0) {
+		console.error("The input 'message' from the form is missing.");
+		setIsLoading(false);
+		return;
+	}
+
+	saveFilesAsMessages();
+	resetFiles();
+
+	if (message) {
+		saveMessage(message.toString());
+	}
+
+	await streamChatResponse().catch(console.error);
+
+	setIsLoading(false);
+}
+
+export const EditChatForm: React.FC = () => {
+	const { isLoading: isGPTResponseLoading } = useIsLoadingStore();
+	const { files } = useInputFileStore();
+
+	const isLoading =
+		isGPTResponseLoading ||
+		files.some(({ extractionStatus }) => extractionStatus === "pending");
+
+	return (
+		<form
+			className={`flex items-end gap-4 px-6 py-3 has-[:focus]:border-blue-500`}
+			onSubmit={onSubmit}
+		>
+			<FileUploadButton />
+
+			<textarea
+				className="w-full h-28 bg-ber-lighter-grey focus:outline-none max-h-72 resize-y"
+				name="message"
+				placeholder="Text hier eingeben"
+				required={files.length === 0}
+				onKeyDown={(e) => {
+					if (e.key === "Enter" && !e.shiftKey) {
+						e.preventDefault();
+						e.currentTarget.form?.dispatchEvent(
+							new Event("submit", { bubbles: true }),
+						);
+					}
+				}}
+			/>
+
+			<button
+				type="submit"
+				disabled={isLoading}
+				className="text-ber-darker-grey hover:text-ber-dark-grey disabled:text-light-grey"
+			>
+				<SendIcon className="w-8 h-8" />
+			</button>
+		</form>
+	);
+};
diff --git a/src/components/edit/edit-chat-form/file-upload-button.tsx b/src/components/edit/edit-chat-form/file-upload-button.tsx
new file mode 100644
index 0000000..de3c986
--- /dev/null
+++ b/src/components/edit/edit-chat-form/file-upload-button.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { useInputFileStore } from "../../../store/input-file-store";
+import { UploadIcon } from "../../icons/upload-icon";
+
+export const FileUploadButton: React.FC = () => {
+	const { setFiles } = useInputFileStore();
+
+	return (
+		<label
+			htmlFor={"file-upload"}
+			className="cursor-pointer"
+			aria-label={"Datei hochladen"}
+			title={"Datei hochladen"}
+		>
+			<UploadIcon className="text-ber-darker-grey hover:text-ber-dark-grey" />
+
+			<input
+				onInput={(e) => setFiles(e.currentTarget.files)}
+				className="hidden"
+				accept={".pdf"}
+				type="file"
+				multiple
+				id={"file-upload"}
+			/>
+		</label>
+	);
+};
diff --git a/src/components/edit/edit-chat-messages.tsx b/src/components/edit/edit-chat-messages.tsx
new file mode 100644
index 0000000..22e76ef
--- /dev/null
+++ b/src/components/edit/edit-chat-messages.tsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useRef } from "react";
+import { useChatHistoryStore } from "../../store/chat-history-store";
+import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
+import { FileMessage } from "../messages/file-message";
+import { TextMessage } from "../messages/text-message";
+import { Message } from "../../store/types";
+import { useHasUserScrolledStore } from "../../store/has-user-scrolled-store";
+import { EditGetStarted } from "./edit-get-started";
+
+export const EditChatMessages: React.FC = () => {
+	const { getChat } = useChatHistoryStore();
+	const { currentChatId } = useCurrentChatIdStore();
+	const { setHasUserScrolled } = useHasUserScrolledStore();
+
+	const messages: Message[] = getChat(currentChatId)?.messages || [];
+
+	const messageContainerRef = useRef<null | HTMLDivElement>(null);
+
+	const scrollToBottom = () => {
+		const messagesContainer = messageContainerRef.current;
+
+		if (
+			messagesContainer &&
+			!useHasUserScrolledStore.getState().hasUserScrolled
+		) {
+			messagesContainer.scrollTo({
+				top: messagesContainer.scrollHeight,
+				behavior: "smooth",
+			});
+		}
+	};
+
+	const handleScroll = () => {
+		const messagesContainer = messageContainerRef.current;
+
+		if (!messagesContainer) {
+			return;
+		}
+
+		const isScrollPositionCloseToEnd =
+			messagesContainer.scrollTop + messagesContainer.clientHeight >=
+			messagesContainer.scrollHeight - 10;
+
+		if (isScrollPositionCloseToEnd) {
+			setHasUserScrolled(false);
+			return;
+		}
+
+		setHasUserScrolled(true);
+	};
+
+	useEffect(() => {
+		const messagesContainer = messageContainerRef.current;
+
+		if (!messagesContainer) {
+			return () => {};
+		}
+
+		messagesContainer.addEventListener("scroll", handleScroll);
+
+		return () => {
+			messagesContainer.removeEventListener("scroll", handleScroll);
+		};
+	}, []);
+
+	useEffect(() => {
+		scrollToBottom();
+	}, [messages]);
+
+	return (
+		<div
+			ref={messageContainerRef}
+			className="flex w-full justify-center overflow-y-auto overflow-x-hidden scroll-smooth mb-2"
+		>
+			<div className="md:w-[640px] lg:w-[768px] w-full h-full flex flex-col gap-y-4 px-5 md:pr-0 md:pl-2 ">
+				<div className="flex">
+					<EditGetStarted />
+				</div>
+				{messages.map((message) => (
+					<React.Fragment key={message.id}>
+						{message.type === "file" && (
+							<FileMessage fileName={message.fileName} />
+						)}
+
+						{message.type === "text" && (
+							<TextMessage
+								role={message.role}
+								content={message.content}
+								messageId={message.id}
+							/>
+						)}
+					</React.Fragment>
+				))}
+			</div>
+		</div>
+	);
+};
diff --git a/src/components/edit/edit-get-started.tsx b/src/components/edit/edit-get-started.tsx
new file mode 100644
index 0000000..afccc8f
--- /dev/null
+++ b/src/components/edit/edit-get-started.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { BaerIcon } from "../icons/bear-icon";
+
+export const EditGetStarted: React.FC = () => {
+	return (
+		<div className="flex md:w-[640px] lg:w-[768px] max-w-full flex-row overflow-auto px-5 pt-[30%]">
+			<div className="mt-1 flex size-[35px] min-w-[35px] items-center justify-center border border-black bg-white">
+				<BaerIcon className="h-[21px] w-[21px]" />
+			</div>
+			<div className="flex flex-col gap-1 px-3 w-5/6">
+				<p>Hallo, gemeinsam bearbeiten wir Schritt für Schritt Ihren Text.</p>
+				<h1 className="text-3xl font-bold">
+					Bitte fügen Sie den Text unten in das Eingabefeld ein.
+				</h1>
+			</div>
+		</div>
+	);
+};
diff --git a/src/components/edit/edit.tsx b/src/components/edit/edit.tsx
new file mode 100644
index 0000000..abbf231
--- /dev/null
+++ b/src/components/edit/edit.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { UploadedFiles } from "./uploaded-files";
+import { EditChatMessages } from "./edit-chat-messages";
+import { EditChatForm } from "./edit-chat-form/edit-chat-form";
+
+export const Edit: React.FC = () => {
+	return (
+		<div className="flex h-full flex-col items-center justify-between pt-14 py-5">
+			<EditChatMessages />
+
+			<div className="px-5 w-full flex justify-center">
+				<div className="md:w-[640px] lg:w-[768px] w-full z-10 flex flex-col bg-ber-lighter-grey">
+					<UploadedFiles />
+
+					<EditChatForm />
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/src/components/edit/uploaded-files.tsx b/src/components/edit/uploaded-files.tsx
new file mode 100644
index 0000000..9a58f05
--- /dev/null
+++ b/src/components/edit/uploaded-files.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { useInputFileStore } from "../../store/input-file-store";
+import { SpinnerIcon } from "../icons/spinner-icon";
+import { PDFLargeIcon } from "../icons/pdf-large-icon";
+import { XIcon } from "../icons/x-icon";
+
+export const UploadedFiles: React.FC = () => {
+	const { files, removeFile } = useInputFileStore();
+
+	return (
+		<>
+			{files.length > 0 && (
+				<div className="flex gap-5 p-4">
+					{files.map(({ id, name, extractionStatus }) => (
+						<div
+							key={id}
+							className="flex items-center gap-4 rounded-sm border border-ber-light-grey bg-white px-4 py-3"
+						>
+							{extractionStatus === "pending" && <SpinnerIcon />}
+							{extractionStatus === "error" && "❌"}
+							{extractionStatus === "success" && (
+								<PDFLargeIcon className="text-ber-darker-grey" />
+							)}
+
+							<div className="flex flex-col">
+								<span>{name.replace(".pdf", "")}</span>
+								<span className="font-light text-ber-light-grey">PDF</span>
+							</div>
+
+							{extractionStatus !== "pending" && (
+								<div className="relative">
+									<button
+										onClick={() => removeFile(id)}
+										className="absolute -right-7 -top-11 flex h-6 w-6 items-center justify-center rounded-full border border-ber-dark-grey bg-gray-100 hover:bg-gray-200"
+									>
+										<XIcon className="h-2.5 w-2.5 text-ber-dark-grey" />
+									</button>
+								</div>
+							)}
+						</div>
+					))}
+				</div>
+			)}
+		</>
+	);
+};
diff --git a/src/components/main.tsx b/src/components/main.tsx
index 7511a30..775acc4 100644
--- a/src/components/main.tsx
+++ b/src/components/main.tsx
@@ -7,7 +7,7 @@ interface MainProps {
 
 export const Main: React.FC<MainProps> = ({ children }) => {
 	return (
-		<main className="flex flex-1 overflow-hidden">
+		<main className="flex flex-1 overflow-hidden text-ber-darker-grey">
 			<div className="flex w-full flex-row">
 				<SideBar />
 				<section className="w-full overflow-hidden">{children}</section>
diff --git a/src/components/messages/preformatted-text-element.tsx b/src/components/messages/preformatted-text-element.tsx
deleted file mode 100644
index c0343d8..0000000
--- a/src/components/messages/preformatted-text-element.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-
-interface PreformattedTextElementProps {
-	children?: React.ReactNode;
-}
-
-export const PreformattedTextElement: React.FC<
-	PreformattedTextElementProps
-> = ({ children }) => {
-	return (
-		<pre className="ml-10 whitespace-pre-wrap w-10/11 my-10">{children}</pre>
-	);
-};
diff --git a/src/components/messages/text-message.tsx b/src/components/messages/text-message.tsx
index dd95d84..fa94d28 100644
--- a/src/components/messages/text-message.tsx
+++ b/src/components/messages/text-message.tsx
@@ -9,8 +9,6 @@ import { EmailChatButtons } from "../email/email-chat-buttons";
 import { getStorageKey } from "../../store/storage";
 import { useIsLoadingStore } from "../../store/is-loading-store";
 import { useHasUserScrolledStore } from "../../store/has-user-scrolled-store";
-import { PreformattedTextElement } from "./preformatted-text-element";
-
 interface TextMessageProps {
 	role: string;
 	content: string;
@@ -51,8 +49,6 @@ export const TextMessage: React.FC<TextMessageProps> = ({
 				</div>
 				<div className="flex flex-col">
 					<ReactMarkdown
-						// @ts-expect-error typing too complex
-						components={{ pre: PreformattedTextElement }}
 						className={`markdown-container ${role === "user" ? "bg-ber-lighter-grey py-2" : ""}`}
 					>
 						{content === "" ? "..." : content}
diff --git a/src/components/sidebar-bar/navigation.tsx b/src/components/sidebar-bar/navigation.tsx
index 31997bd..9c23a1c 100644
--- a/src/components/sidebar-bar/navigation.tsx
+++ b/src/components/sidebar-bar/navigation.tsx
@@ -21,7 +21,7 @@ const navLinks = [
 	{
 		label: "Text bearbeiten",
 		icon: <PDFIcon />,
-		href: "/summary",
+		href: "/edit",
 		backgroundColor: "bg-ber-pink hover:bg-ber-pink-darker",
 	},
 	{
diff --git a/src/index.css b/src/index.css
index 0b4e16e..e982ef3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,13 +8,13 @@
 	}
 
 	.markdown-container ol {
-		@apply my-4 list-none space-y-2;
+		@apply my-4 list-none;
 		list-style: decimal;
 		padding-left: 2rem;
 	}
 
 	.markdown-container ul {
-		@apply my-4 list-none space-y-2;
+		@apply my-4 list-none;
 		list-style: disc;
 		padding-left: 2rem;
 	}
@@ -63,4 +63,12 @@
 	.markdown-container code {
 		@apply font-arial;
 	}
+
+	.markdown-container pre {
+		@apply ml-10 whitespace-pre-wrap w-[90%] my-10;
+	}
+
+	.markdown-container hr {
+		@apply m-3;
+	}
 }
diff --git a/src/main.tsx b/src/main.tsx
index 8722ce6..c360ba1 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import { Index } from "./routes";
 import { Email } from "./routes/email";
 import { Note } from "./routes/note";
-import { Summary } from "./routes/summary";
+import { Edit } from "./routes/edit";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "./index.css";
 import { EmailChat } from "./routes/email-chat";
@@ -22,8 +22,8 @@ const router = createBrowserRouter([
 		element: <EmailChat />,
 	},
 	{
-		path: "/summary",
-		element: <Summary />,
+		path: "/edit",
+		element: <Edit />,
 	},
 	{
 		path: "/note",
diff --git a/src/routes/edit.tsx b/src/routes/edit.tsx
new file mode 100644
index 0000000..d9eb189
--- /dev/null
+++ b/src/routes/edit.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { Edit as EditUI } from "../components/edit/edit";
+import { Layout } from "../layout/layout";
+
+export const Edit: React.FC = () => {
+	return (
+		<Layout>
+			<EditUI />
+		</Layout>
+	);
+};
diff --git a/src/routes/summary.tsx b/src/routes/summary.tsx
deleted file mode 100644
index c9167e0..0000000
--- a/src/routes/summary.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { Layout } from "../layout/layout";
-import { InfoIcon } from "../components/icons/info-icon";
-
-export const Summary: React.FC = () => {
-	return (
-		<Layout>
-			<div className="flex h-full w-full items-center justify-center">
-				<div className=" md:w-[640px] lg:w-[768px] px-5 text-center items-center flex flex-col gap-2">
-					<div
-						className={`flex flex-row gap-3 w-fit text-xs border border-black rounded-full px-3 py-1 `}
-					>
-						<InfoIcon /> Bald verfügbar
-					</div>
-					<h1 className="text-3xl md:text-5xl font-bold text-ber-darker-grey pb-4">
-						Text zusammenfassen
-					</h1>
-					<div className="md:text-xl text-ber-darker-grey">
-						Mit der Funktion &quot;Zusammenfassen&quot; können Sie längere Texte
-						einfach auf das Wesentliche reduzieren. So schaffen Sie sich einen
-						schnellen Überblick über die Inhalte oder geben Kolleg:innen einen
-						schnellen Einblick in das Dokument, welches Sie z.B. per E-Mail
-						versenden.
-					</div>
-				</div>
-			</div>
-		</Layout>
-	);
-};
diff --git a/src/store/api.ts b/src/store/api.ts
index 632f91d..1051857 100644
--- a/src/store/api.ts
+++ b/src/store/api.ts
@@ -9,7 +9,7 @@ const systemPrompts: { [key: string]: string } = {
 	"/email": SYSTEM_PROMPTS.CHAT_SYSTEM_PROMPT,
 	"/email-chat": SYSTEM_PROMPTS.EMAIL_SYSTEM_PROMPT,
 	"/note": SYSTEM_PROMPTS.NOTE_SYSTEM_PROMPT,
-	"/summary": SYSTEM_PROMPTS.SUMMARY_SYSTEM_PROMPT,
+	"/edit": SYSTEM_PROMPTS.EDIT_SYSTEM_PROMPT,
 };
 
 export async function streamChatResponse() {
diff --git a/src/store/storage.ts b/src/store/storage.ts
index 8f3ed62..d6e3368 100644
--- a/src/store/storage.ts
+++ b/src/store/storage.ts
@@ -3,7 +3,7 @@ const storageKeys: Record<string, string> = {
 	"/email": "email-history",
 	"/email-chat": "email-chat-history",
 	"/note": "note-history",
-	"/summary": "summary-history",
+	"/edit": "edit-history",
 };
 
 export function getStorageKey(): string {
@@ -16,22 +16,3 @@ export function getStorageKey(): string {
 
 	return storageKey;
 }
-
-const storageKeyNames: Record<string, string> = {
-	"/": "Chat Funktion",
-	"/email": "E-Mail Funktion",
-	"/email-chat": "E-Mail Chat Funktion",
-	"/note": "Vermerk Funktion",
-	"/summary": "Zusammenfassung",
-};
-
-export function getStorageKeyName(): string {
-	const storageKey = storageKeyNames[window.location.pathname];
-
-	if (!storageKey) {
-		console.error("No storage key found for", window.location.pathname);
-		return "fallback-storage";
-	}
-
-	return storageKey;
-}
diff --git a/src/system-prompts.ts b/src/system-prompts.ts
index b57f81c..067b08c 100644
--- a/src/system-prompts.ts
+++ b/src/system-prompts.ts
@@ -23,18 +23,14 @@ export const SYSTEM_PROMPTS = {
   - Geben Sie relevante Links zu offiziellen Webseiten an, wenn weitere Informationen erforderlich sind.
 WICHTIG: Antworte immer auf Deutsch, außer die Anfrage erfolgt in einer anderen Sprache.
 
-**Hinweis auf andere Apps:** Wenn der Benutzer Anfragen stellt, die nicht in den freien Chat-Bereich fallen, weise ihn freundlich auf die passenden Apps hin:
-
-   Beispiel:  
-   - *"Es scheint, dass Ihre Anfrage möglicherweise besser von einer anderen App unterstützt wird. Hier sind die verfügbaren Apps:"*  
-     1. **[Chat](/)**  
-        - *Nutzen Sie den freien Chat, um in Echtzeit Fragen zu stellen, Ideen zu diskutieren oder Unterstützung bei verschiedenen Themen zu erhalten.*  
-     2. **[E-Mail](/email)**  
-        - *Diese Funktion unterstützt Sie beim Verfassen professioneller E-Mails, egal ob formell, informativ oder freundlich.*
-     3. **[Vermerk erstellen](/note)**  
-        - *Der Vermerk-Assistent unterstützt Sie, aussagekräftige und leicht verständliche Sachverhalte, Entscheidungen und Hinweise zu formulieren..*  
-     4. **[Text zusammenfassen](/summary)**  
-        - *Mit der Funktion "Zusammenfassen" können Sie längere Texte einfach auf das Wesentliche reduzieren. So schaffen Sie sich einen schnellen Überblick über die Inhalte oder geben Kolleg:innen einen schnellen Einblick in das Dokument, welches Sie z.B. per E-Mail versenden.*  
+Wenn der Benutzer eine Anfrage stellt, die nicht in den Bereich der E-Mail fällt, leite ihn freundlich zu den passenden Apps weiter.
+
+Beispiel:  
+"Ihre Anfrage könnte möglicherweise besser von einer anderen App bearbeitet werden:  
+  - **[Chat](/)**: Stellen Sie Fragen, diskutieren Sie Ideen oder erhalten Sie Unterstützung in Echtzeit.  
+  - **[E-Mail](/email)**: Verfassen Sie professionelle E-Mails, egal ob formell oder freundlich.  
+  - **[Vermerk erstellen](/note)**: Formulieren Sie aussagekräftige Vermerke, Entscheidungen und Hinweise.  
+  - **[Text bearbeiten](/edit)**: Reduzieren Sie längere Texte auf das Wesentliche für einen schnellen Überblick."
 `,
 	EMAIL_SYSTEM_PROMPT: `
 ### BärGPT - Der intelligente E-Mail-Assistent für Verwaltungsmitarbeiter
@@ -64,14 +60,16 @@ WICHTIG: Antworte immer auf Deutsch, außer die Anfrage erfolgt in einer anderen
      - Beispiel: *"Möchten Sie noch etwas hinzufügen oder ändern?"*
    - Gebe den Entwurf IMMER als Markdown-Codeblock zurück.
 
-5. **Hinweis auf andere Apps:**
-   - Wenn die Anfrage außerhalb des E-Mail-Bereichs liegt, verweise auf passende Apps.
-     - Beispiel: *"Für Ihre Anfrage ist möglicherweise eine andere App besser geeignet. Hier sind einige Optionen:"*
-       1. **[Chat](/)** - Nutzen Sie den freien Chat, um in Echtzeit Fragen zu stellen, Ideen zu diskutieren oder Unterstützung bei verschiedenen Themen zu erhalten.
-       2. **[E-Mail](/email)** - Diese Funktion unterstützt Sie beim Verfassen professioneller E-Mails, egal ob formell, informativ oder freundlich.
-       3. **[Vermerk erstellen](/note)** - Der Vermerk-Assistent unterstützt Sie, aussagekräftige und leicht verständliche Sachverhalte, Entscheidungen und Hinweise zu formulieren
-       4. **[Text zusammenfassen](/summary)** - Mit der Funktion "Zusammenfassen" können Sie längere Texte einfach auf das Wesentliche reduzieren. So schaffen Sie sich einen schnellen Überblick über die Inhalte oder geben Kolleg:innen einen schnellen Einblick in das Dokument, welches Sie z.B. per E-Mail versenden.
-"`,
+5. Hinweis auf andere Apps:
+Wenn der Benutzer eine Anfrage stellt, die nicht in den Bereich der E-Mail fällt, leite ihn freundlich zu den passenden Apps weiter.
+
+Beispiel:  
+"Ihre Anfrage könnte möglicherweise besser von einer anderen App bearbeitet werden:  
+  - **[Chat](/)**: Stellen Sie Fragen, diskutieren Sie Ideen oder erhalten Sie Unterstützung in Echtzeit.  
+  - **[E-Mail](/email)**: Verfassen Sie professionelle E-Mails, egal ob formell oder freundlich.  
+  - **[Vermerk erstellen](/note)**: Formulieren Sie aussagekräftige Vermerke, Entscheidungen und Hinweise.  
+  - **[Text bearbeiten](/edit)**: Reduzieren Sie längere Texte auf das Wesentliche für einen schnellen Überblick."
+`,
 
 	NOTE_SYSTEM_PROMPT: `Du bist BärGPT, ein intelligenter Assistent, der Verwaltungsmitarbeitern hilft, passende Notizen zu verfassen. Dein Ziel ist es, den Prozess so effizient und klar wie möglich zu gestalten. Befolge dabei stets die folgenden Schritte:
 
@@ -89,39 +87,59 @@ WICHTIG: Antworte immer auf Deutsch, außer die Anfrage erfolgt in einer anderen
 
 Dein Ziel ist es, immer präzise und freundlich zu sein, um den Verwaltungsmitarbeitern bestmöglich zu helfen, ihre Notizen effizient und klar zu formulieren.
 `,
-	SUMMARY_SYSTEM_PROMPT: `
-  Du bist BärGPT, ein intelligenter Assistent, der Verwaltungsmitarbeitern hilft, jegliche Art von Texten zu bearbeiten. 
-  Dein Ziel ist es, den Prozess so effizient und klar wie möglich zu gestalten. Befolge dabei stets die folgenden Schritte:
-
-1. **Einleitung:** Beginne jede Interaktion mit einer kurzen Begrüßung und sage dem Benutzer, dass er den Text, der bearbeitet werden soll, entweder als Datei hochladen oder ins Chatfenster kopieren soll.
-
-    Beispiel: *"Hallo! Laden Sie den Text, der bearbeitet werden soll, entweder als PDF-Datei hoch oder fügen Sie ihn im Chatfenster ein."*
-
-2. **Antwort auf bereitgestellten Text:** Frage nun, wie der Benutzer den Text bearbeiten möchte:
-
-- **Zusammenfassen:** Möchten Sie den Text in Stichpunkte zusammenfassen?
-- **Übersetzen:** Soll der Text in eine andere Sprache übersetzt werden?
-- **Rechtschreibung und Grammatik:** Soll die Rechtschreibung und Grammatik korrigiert werden?
-- **Stil:** Soll der Text in einem besonderen Stil verfasst werden? Z.B. akademisch, Amtsdeutsch, locker, einfache Sprache.
-- **Suche:** Soll der Text nach einem bestimmten Inhalt/Wort durchsucht werden?
-
-3. **Zusammenfassung und Anpassung:** Nachdem dir Informationen geliefert wurden, passe den Text an und frage, ob noch weitere Anpassungen vorgenommen werden sollen.
-
-4. **Abschluss:** Sage zum Schluss, dass der Text kopiert und in anderen Programmen weiterverarbeitet werden kann.
-
-Dein Ziel ist es, immer präzise und freundlich zu sein, um den Verwaltungsmitarbeitern bestmöglich zu helfen, ihre E-Mails effizient und klar zu formulieren.
-
-**Hinweis auf andere Apps:** Wenn der Benutzer Anfragen stellt, die nicht in den freien Texte Zusammenfassen Bereich fallen, weise ihn freundlich auf die passenden Apps hin:
-
-   Beispiel:  
-   - *"Es scheint, dass Ihre Anfrage möglicherweise besser von einer anderen App unterstützt wird. Hier sind die verfügbaren Apps:"*  
-     1. **[Chat](/)**  
-        - *Nutzen Sie den freien Chat, um in Echtzeit Fragen zu stellen, Ideen zu diskutieren oder Unterstützung bei verschiedenen Themen zu erhalten.*  
-     2. **[E-Mail](/email)**  
-        - *Diese Funktion unterstützt Sie beim Verfassen professioneller E-Mails, egal ob formell, informativ oder freundlich.*
-     3. **[Vermerk erstellen](/note)**  
-        - *Der Vermerk-Assistent unterstützt Sie, aussagekräftige und leicht verständliche Sachverhalte, Entscheidungen und Hinweise zu formulieren..*  
-     4. **[Text zusammenfassen](/summary)**  
-        - *Mit der Funktion "Zusammenfassen" können Sie längere Texte einfach auf das Wesentliche reduzieren. So schaffen Sie sich einen schnellen Überblick über die Inhalte oder geben Kolleg:innen einen schnellen Einblick in das Dokument, welches Sie z.B. per E-Mail versenden.*  
+	EDIT_SYSTEM_PROMPT: `
+Du bist BärGPT, ein intelligenter Assistent, der Verwaltungsmitarbeitern hilft, jegliche Art von Texten effizient und klar zu bearbeiten. Dein Ziel ist es, den Bearbeitungsprozess einfach und benutzerfreundlich zu gestalten. Wenn die Anfragen des Benutzers über die Textbearbeitung hinausgehen, weist du ihn freundlich auf passende Apps hin.
+
+Befolge dabei stets die folgenden Schritte:
+
+### 1. Einleitung und Hilfe anbieten:
+Falls der Benutzer noch keinen Text zum Bearbeiten geschickt hat, gib einen Hinweis:
+
+Beispiel:  
+- *"Hallo! Fügen Sie den Text, den Sie bearbeiten möchten, bitte unten in das Eingabefeld ein."*
+
+Wenn der Benutzer bereits einen Text bereitgestellt hat oder eine Text Datei hochgeladen hat (gekennzeichnet durch "Datei:"), frage direkt nach der gewünschten Bearbeitungsart:
+
+Beispiel:  
+"## Wie möchten Sie den Text bearbeiten?
+Schreiben Sie zutreffende Begriffe in das Eingabefeld.
+Zum Beispiel:
+- Zusammenfassen
+- Rechtschreibung und Grammatik korrigieren
+- Übersetzen
+- Ein Wort suchen
+- Einfache Sprache"
+
+### 2. Textbearbeitung:
+Sobald der Benutzer seine Bearbeitungswünsche geäußert hat, **beziehe dich immer auf den zuletzt generierten Text** und gehe wie folgt vor:
+
+- **Zusammenfassen:** Erstelle eine kompakte und verständliche Zusammenfassung des Textes.
+- **Rechtschreibung und Grammatik korrigieren** Prüfe und korrigiere den Text auf Rechtschreib- und Grammatikfehler.
+- **Übersetzen:** Übersetze den Text in die gewünschte Sprache. Frage immer nach der Zielsprache.
+- **Ein Wort suchen:** Hilf dem Benutzer, bestimmte Wörter oder Ausdrücke im Text zu finden oder zu ersetzen.
+- **Einfache Sprache:** Vereinfache den Text für eine leichtere Verständlichkeit.
+
+Frage nach weiteren Wünschen, wenn nötig.
+
+### 3. Formulierung und Anpassung:
+Stelle nach der Bearbeitung den angepassten Text zur Verfügung und frage, ob noch weitere Änderungen gewünscht sind. Beziehe dich dabei immer auf den zuletzt generierten Text. Zähle **immer** alle möglichen Änderungen auf, auch wenn sie zuvor schon genannt wurden:
+
+Beispiel:  
+"Möchten Sie noch weitere Anpassungen vornehmen? Zum Beispiel:
+- Zusammenfassen
+- Rechtschreibung und Grammatik korrigieren
+- Übersetzen
+- Ein Wort suchen
+- Einfache Sprache"
+
+### 4. Hinweis auf andere Apps:
+Wenn der Benutzer eine Anfrage stellt, die nicht in den Bereich der Textbearbeitung fällt, leite ihn freundlich zu den passenden Apps weiter.
+
+Beispiel:  
+"Ihre Anfrage könnte möglicherweise besser von einer anderen App bearbeitet werden:  
+  - **[Chat](/)**: Stellen Sie Fragen, diskutieren Sie Ideen oder erhalten Sie Unterstützung in Echtzeit.  
+  - **[E-Mail](/email)**: Verfassen Sie professionelle E-Mails, egal ob formell oder freundlich.  
+  - **[Vermerk erstellen](/note)**: Formulieren Sie aussagekräftige Vermerke, Entscheidungen und Hinweise.  
+  - **[Text bearbeiten](/edit)**: Reduzieren Sie längere Texte auf das Wesentliche für einen schnellen Überblick."
 `,
 };

From b7f02e4a78b5510821d2596bcaaa115ce6fd20aa Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Thu, 29 Aug 2024 16:19:28 +0200
Subject: [PATCH 12/33] fix: add correct copied icon again (#62)

---
 .../buttons/copy-to-clipboard-button.tsx       |  4 ++--
 src/components/icons/copied-icon.tsx           | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 src/components/icons/copied-icon.tsx

diff --git a/src/components/buttons/copy-to-clipboard-button.tsx b/src/components/buttons/copy-to-clipboard-button.tsx
index 6afcf94..6607f92 100644
--- a/src/components/buttons/copy-to-clipboard-button.tsx
+++ b/src/components/buttons/copy-to-clipboard-button.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { CheckIcon } from "../icons/check-icon";
 import { CopyIcon } from "../icons/copy-icon";
+import { CopiedIcon } from "../icons/copied-icon";
 
 interface CopyToClipboardButtonProps {
 	generatedAnswer: string;
@@ -32,7 +32,7 @@ export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
 			aria-label={isCopiedToClipboard ? "Kopiert!" : "Kopieren"}
 			title={isCopiedToClipboard ? "Kopiert!" : "Kopieren"}
 		>
-			{isCopiedToClipboard ? <CheckIcon /> : <CopyIcon />}
+			{isCopiedToClipboard ? <CopiedIcon /> : <CopyIcon />}
 		</button>
 	);
 };
diff --git a/src/components/icons/copied-icon.tsx b/src/components/icons/copied-icon.tsx
new file mode 100644
index 0000000..d4f6b85
--- /dev/null
+++ b/src/components/icons/copied-icon.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+export const CopiedIcon: React.FC = () => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="17"
+			height="20"
+			viewBox="0 0 17 20"
+			fill="none"
+		>
+			<path
+				d="M16.6443 4.35561C17.1186 4.82975 17.1186 5.59976 16.6443 6.07391L6.93109 15.7844C6.45681 16.2585 5.68659 16.2585 5.21231 15.7844L0.355708 10.9292C-0.118569 10.455 -0.118569 9.68499 0.355708 9.21085C0.829985 8.7367 1.60021 8.7367 2.07449 9.21085L6.0736 13.205L14.9293 4.35561C15.4036 3.88146 16.1738 3.88146 16.6481 4.35561H16.6443Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+};

From d3fc4c86df471960c6afec9ad6419fb252b30df4 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Thu, 29 Aug 2024 16:19:49 +0200
Subject: [PATCH 13/33] Feat/update file upload design (#60)

* feat: change styling of uploaded pdf thumbnail

* feat: add styling for uploaded pdf

* feat: update file uplaod styling in text edit feature

* feat: update error handling messages

* feat: cleanup error store

* feat: resetFiles on extractionStatus error

* feat: remove error view from uploaded files

* feat: cleanup and refactor code
---
 .../file-upload-button.tsx                    |  4 +-
 .../chat/{chat-form => }/chat-form.tsx        | 24 ++++++----
 src/components/chat/chat.tsx                  |  4 +-
 src/components/chat/uploaded-files.tsx        | 46 -------------------
 .../{edit-chat-form => }/edit-chat-form.tsx   | 14 +++---
 .../edit-chat-form/file-upload-button.tsx     | 27 -----------
 src/components/edit/edit.tsx                  |  4 +-
 src/components/edit/uploaded-files.tsx        | 46 -------------------
 src/components/icons/spinner-icon.tsx         |  2 +-
 src/components/icons/upload-icon.tsx          | 10 ++--
 src/components/icons/uploaded-pdf-icon.tsx    | 16 +++++++
 src/components/messages/file-message.tsx      | 10 ++--
 src/components/uploaded-files.tsx             | 45 ++++++++++++++++++
 src/store/error-store.tsx                     | 10 +---
 src/store/input-file-store.ts                 |  5 ++
 15 files changed, 106 insertions(+), 161 deletions(-)
 rename src/components/{chat/chat-form => buttons}/file-upload-button.tsx (80%)
 rename src/components/chat/{chat-form => }/chat-form.tsx (71%)
 delete mode 100644 src/components/chat/uploaded-files.tsx
 rename src/components/edit/{edit-chat-form => }/edit-chat-form.tsx (81%)
 delete mode 100644 src/components/edit/edit-chat-form/file-upload-button.tsx
 delete mode 100644 src/components/edit/uploaded-files.tsx
 create mode 100644 src/components/icons/uploaded-pdf-icon.tsx
 create mode 100644 src/components/uploaded-files.tsx

diff --git a/src/components/chat/chat-form/file-upload-button.tsx b/src/components/buttons/file-upload-button.tsx
similarity index 80%
rename from src/components/chat/chat-form/file-upload-button.tsx
rename to src/components/buttons/file-upload-button.tsx
index de3c986..922250c 100644
--- a/src/components/chat/chat-form/file-upload-button.tsx
+++ b/src/components/buttons/file-upload-button.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { useInputFileStore } from "../../../store/input-file-store";
-import { UploadIcon } from "../../icons/upload-icon";
+import { useInputFileStore } from "../../store/input-file-store";
+import { UploadIcon } from "../icons/upload-icon";
 
 export const FileUploadButton: React.FC = () => {
 	const { setFiles } = useInputFileStore();
diff --git a/src/components/chat/chat-form/chat-form.tsx b/src/components/chat/chat-form.tsx
similarity index 71%
rename from src/components/chat/chat-form/chat-form.tsx
rename to src/components/chat/chat-form.tsx
index 69c2241..584c51f 100644
--- a/src/components/chat/chat-form/chat-form.tsx
+++ b/src/components/chat/chat-form.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { FileUploadButton } from "./file-upload-button";
-import { SendIcon } from "../../icons/send-icon";
-import { useIsLoadingStore } from "../../../store/is-loading-store";
-import { useInputFileStore } from "../../../store/input-file-store";
-import { useChatHistoryStore } from "../../../store/chat-history-store";
-import { streamChatResponse } from "../../../store/api";
-import { useHasUserScrolledStore } from "../../../store/has-user-scrolled-store";
+import { FileUploadButton } from "../buttons/file-upload-button";
+import { SendIcon } from "../icons/send-icon";
+import { useIsLoadingStore } from "../../store/is-loading-store";
+import { useInputFileStore } from "../../store/input-file-store";
+import { useChatHistoryStore } from "../../store/chat-history-store";
+import { streamChatResponse } from "../../store/api";
+import { useHasUserScrolledStore } from "../../store/has-user-scrolled-store";
 
 const { setIsLoading } = useIsLoadingStore.getState();
 const { reset: resetFiles, saveFilesAsMessages } = useInputFileStore.getState();
@@ -17,11 +17,13 @@ async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
 	setIsLoading(true);
 	setHasUserScrolled(false);
 
+	const { files } = useInputFileStore.getState();
+
 	const formData = new FormData(event.currentTarget);
 	event.currentTarget.reset();
 
 	const message = formData.get("message");
-	if (!message) {
+	if (!message && files.length === 0) {
 		console.error("The input 'message' from the form is missing.");
 		setIsLoading(false);
 		return;
@@ -30,7 +32,9 @@ async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
 	saveFilesAsMessages();
 	resetFiles();
 
-	saveMessage(message.toString());
+	if (message) {
+		saveMessage(message.toString());
+	}
 
 	await streamChatResponse().catch(console.error);
 
@@ -56,7 +60,7 @@ export const ChatForm: React.FC = () => {
 				className="w-full bg-ber-lighter-grey focus:outline-none"
 				name="message"
 				type="text"
-				required
+				required={files.length === 0}
 				placeholder="Wie kann ich Ihnen helfen?"
 			/>
 
diff --git a/src/components/chat/chat.tsx b/src/components/chat/chat.tsx
index e1a44df..d930c35 100644
--- a/src/components/chat/chat.tsx
+++ b/src/components/chat/chat.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import { GetStarted } from "./get-started/get-started";
 import { useChatHistoryStore } from "../../store/chat-history-store";
 import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
-import { UploadedFiles } from "./uploaded-files";
-import { ChatForm } from "./chat-form/chat-form";
+import { UploadedFiles } from "../uploaded-files";
+import { ChatForm } from "./chat-form";
 import { ChatMessages } from "./chat-messages";
 
 export const Chat: React.FC = () => {
diff --git a/src/components/chat/uploaded-files.tsx b/src/components/chat/uploaded-files.tsx
deleted file mode 100644
index 9a58f05..0000000
--- a/src/components/chat/uploaded-files.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import { useInputFileStore } from "../../store/input-file-store";
-import { SpinnerIcon } from "../icons/spinner-icon";
-import { PDFLargeIcon } from "../icons/pdf-large-icon";
-import { XIcon } from "../icons/x-icon";
-
-export const UploadedFiles: React.FC = () => {
-	const { files, removeFile } = useInputFileStore();
-
-	return (
-		<>
-			{files.length > 0 && (
-				<div className="flex gap-5 p-4">
-					{files.map(({ id, name, extractionStatus }) => (
-						<div
-							key={id}
-							className="flex items-center gap-4 rounded-sm border border-ber-light-grey bg-white px-4 py-3"
-						>
-							{extractionStatus === "pending" && <SpinnerIcon />}
-							{extractionStatus === "error" && "❌"}
-							{extractionStatus === "success" && (
-								<PDFLargeIcon className="text-ber-darker-grey" />
-							)}
-
-							<div className="flex flex-col">
-								<span>{name.replace(".pdf", "")}</span>
-								<span className="font-light text-ber-light-grey">PDF</span>
-							</div>
-
-							{extractionStatus !== "pending" && (
-								<div className="relative">
-									<button
-										onClick={() => removeFile(id)}
-										className="absolute -right-7 -top-11 flex h-6 w-6 items-center justify-center rounded-full border border-ber-dark-grey bg-gray-100 hover:bg-gray-200"
-									>
-										<XIcon className="h-2.5 w-2.5 text-ber-dark-grey" />
-									</button>
-								</div>
-							)}
-						</div>
-					))}
-				</div>
-			)}
-		</>
-	);
-};
diff --git a/src/components/edit/edit-chat-form/edit-chat-form.tsx b/src/components/edit/edit-chat-form.tsx
similarity index 81%
rename from src/components/edit/edit-chat-form/edit-chat-form.tsx
rename to src/components/edit/edit-chat-form.tsx
index 4633a4c..0975ebb 100644
--- a/src/components/edit/edit-chat-form/edit-chat-form.tsx
+++ b/src/components/edit/edit-chat-form.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { FileUploadButton } from "./file-upload-button";
-import { SendIcon } from "../../icons/send-icon";
-import { useIsLoadingStore } from "../../../store/is-loading-store";
-import { useInputFileStore } from "../../../store/input-file-store";
-import { useChatHistoryStore } from "../../../store/chat-history-store";
-import { streamChatResponse } from "../../../store/api";
-import { useHasUserScrolledStore } from "../../../store/has-user-scrolled-store";
+import { FileUploadButton } from "../buttons/file-upload-button";
+import { SendIcon } from "../icons/send-icon";
+import { useIsLoadingStore } from "../../store/is-loading-store";
+import { useInputFileStore } from "../../store/input-file-store";
+import { useChatHistoryStore } from "../../store/chat-history-store";
+import { streamChatResponse } from "../../store/api";
+import { useHasUserScrolledStore } from "../../store/has-user-scrolled-store";
 
 const { setIsLoading } = useIsLoadingStore.getState();
 const { reset: resetFiles, saveFilesAsMessages } = useInputFileStore.getState();
diff --git a/src/components/edit/edit-chat-form/file-upload-button.tsx b/src/components/edit/edit-chat-form/file-upload-button.tsx
deleted file mode 100644
index de3c986..0000000
--- a/src/components/edit/edit-chat-form/file-upload-button.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import { useInputFileStore } from "../../../store/input-file-store";
-import { UploadIcon } from "../../icons/upload-icon";
-
-export const FileUploadButton: React.FC = () => {
-	const { setFiles } = useInputFileStore();
-
-	return (
-		<label
-			htmlFor={"file-upload"}
-			className="cursor-pointer"
-			aria-label={"Datei hochladen"}
-			title={"Datei hochladen"}
-		>
-			<UploadIcon className="text-ber-darker-grey hover:text-ber-dark-grey" />
-
-			<input
-				onInput={(e) => setFiles(e.currentTarget.files)}
-				className="hidden"
-				accept={".pdf"}
-				type="file"
-				multiple
-				id={"file-upload"}
-			/>
-		</label>
-	);
-};
diff --git a/src/components/edit/edit.tsx b/src/components/edit/edit.tsx
index abbf231..d80c032 100644
--- a/src/components/edit/edit.tsx
+++ b/src/components/edit/edit.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { UploadedFiles } from "./uploaded-files";
+import { UploadedFiles } from "../uploaded-files";
 import { EditChatMessages } from "./edit-chat-messages";
-import { EditChatForm } from "./edit-chat-form/edit-chat-form";
+import { EditChatForm } from "./edit-chat-form";
 
 export const Edit: React.FC = () => {
 	return (
diff --git a/src/components/edit/uploaded-files.tsx b/src/components/edit/uploaded-files.tsx
deleted file mode 100644
index 9a58f05..0000000
--- a/src/components/edit/uploaded-files.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import { useInputFileStore } from "../../store/input-file-store";
-import { SpinnerIcon } from "../icons/spinner-icon";
-import { PDFLargeIcon } from "../icons/pdf-large-icon";
-import { XIcon } from "../icons/x-icon";
-
-export const UploadedFiles: React.FC = () => {
-	const { files, removeFile } = useInputFileStore();
-
-	return (
-		<>
-			{files.length > 0 && (
-				<div className="flex gap-5 p-4">
-					{files.map(({ id, name, extractionStatus }) => (
-						<div
-							key={id}
-							className="flex items-center gap-4 rounded-sm border border-ber-light-grey bg-white px-4 py-3"
-						>
-							{extractionStatus === "pending" && <SpinnerIcon />}
-							{extractionStatus === "error" && "❌"}
-							{extractionStatus === "success" && (
-								<PDFLargeIcon className="text-ber-darker-grey" />
-							)}
-
-							<div className="flex flex-col">
-								<span>{name.replace(".pdf", "")}</span>
-								<span className="font-light text-ber-light-grey">PDF</span>
-							</div>
-
-							{extractionStatus !== "pending" && (
-								<div className="relative">
-									<button
-										onClick={() => removeFile(id)}
-										className="absolute -right-7 -top-11 flex h-6 w-6 items-center justify-center rounded-full border border-ber-dark-grey bg-gray-100 hover:bg-gray-200"
-									>
-										<XIcon className="h-2.5 w-2.5 text-ber-dark-grey" />
-									</button>
-								</div>
-							)}
-						</div>
-					))}
-				</div>
-			)}
-		</>
-	);
-};
diff --git a/src/components/icons/spinner-icon.tsx b/src/components/icons/spinner-icon.tsx
index 25060a9..bc6a25f 100644
--- a/src/components/icons/spinner-icon.tsx
+++ b/src/components/icons/spinner-icon.tsx
@@ -3,7 +3,7 @@ import React from "react";
 export const SpinnerIcon: React.FC = () => {
 	return (
 		<svg
-			className="h-7 w-7 animate-spin text-black"
+			className="h-4 w-4 animate-spin text-ber-darker-grey"
 			xmlns="http://www.w3.org/2000/svg"
 			fill="none"
 			viewBox="0 0 24 24"
diff --git a/src/components/icons/upload-icon.tsx b/src/components/icons/upload-icon.tsx
index ab265ea..07103fd 100644
--- a/src/components/icons/upload-icon.tsx
+++ b/src/components/icons/upload-icon.tsx
@@ -7,15 +7,15 @@ interface UploadIconProps {
 export const UploadIcon: React.FC<UploadIconProps> = ({ className }) => {
 	return (
 		<svg
-			width="27"
-			height="35"
-			viewBox="0 0 27 35"
-			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="25"
+			viewBox="0 0 20 25"
+			fill="none"
 			className={className}
 		>
 			<path
-				d="M4.5 0C2.01797 0 0 1.96191 0 4.375V30.625C0 33.0381 2.01797 35 4.5 35H22.5C24.982 35 27 33.0381 27 30.625V10.9375H18C16.7555 10.9375 15.75 9.95996 15.75 8.75V0H4.5ZM18 0V8.75H27L18 0ZM15.1875 27.8906C15.1875 28.7998 14.4352 29.5312 13.5 29.5312C12.5648 29.5312 11.8125 28.7998 11.8125 27.8906V20.9111L9.63281 23.0303C8.97188 23.6729 7.90312 23.6729 7.24922 23.0303C6.59531 22.3877 6.58828 21.3486 7.24922 20.7129L12.3117 15.791C12.9727 15.1484 14.0414 15.1484 14.6953 15.791L19.7578 20.7129C20.4188 21.3555 20.4188 22.3945 19.7578 23.0303C19.0969 23.666 18.0281 23.6729 17.3742 23.0303L15.1945 20.9111L15.1875 27.8906Z"
+				d="M8.75 21.25H11.25V16.0312L13.25 18.0312L15 16.25L10 11.25L5 16.25L6.78125 18L8.75 16.0312V21.25ZM2.5 25C1.8125 25 1.22396 24.7552 0.734375 24.2656C0.244792 23.776 0 23.1875 0 22.5V2.5C0 1.8125 0.244792 1.22396 0.734375 0.734375C1.22396 0.244792 1.8125 0 2.5 0H12.5L20 7.5V22.5C20 23.1875 19.7552 23.776 19.2656 24.2656C18.776 24.7552 18.1875 25 17.5 25H2.5ZM11.25 8.75V2.5H2.5V22.5H17.5V8.75H11.25Z"
 				fill="currentColor"
 			/>
 		</svg>
diff --git a/src/components/icons/uploaded-pdf-icon.tsx b/src/components/icons/uploaded-pdf-icon.tsx
new file mode 100644
index 0000000..0cb1144
--- /dev/null
+++ b/src/components/icons/uploaded-pdf-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+export const UploadedPDFIcon: React.FC = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="16"
+		height="20"
+		viewBox="0 0 16 20"
+		fill="none"
+	>
+		<path
+			d="M4 16H12V14H4V16ZM4 12H12V10H4V12ZM2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H10L16 6V18C16 18.55 15.8042 19.0208 15.4125 19.4125C15.0208 19.8042 14.55 20 14 20H2ZM9 7V2H2V18H14V7H9Z"
+			fill="#333333"
+		/>
+	</svg>
+);
diff --git a/src/components/messages/file-message.tsx b/src/components/messages/file-message.tsx
index 18e0c2f..021ee12 100644
--- a/src/components/messages/file-message.tsx
+++ b/src/components/messages/file-message.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { PDFLargeIcon } from "../icons/pdf-large-icon";
+import { UploadedPDFIcon } from "../icons/uploaded-pdf-icon";
 
 interface FileMessageProps {
 	fileName: string;
@@ -7,10 +7,10 @@ interface FileMessageProps {
 
 export const FileMessage: React.FC<FileMessageProps> = ({ fileName }) => {
 	return (
-		<div className="flex w-60 items-center gap-2 self-end rounded-sm bg-ber-lighter-grey px-4 py-3">
-			<PDFLargeIcon className={"text-ber-darker-grey"} />
-			<div className="flex flex-col">
-				<span>{fileName.replace(".pdf", "")}</span>
+		<div className="flex  items-center gap-2 self-end rounded-sm bg-ber-lighter-grey px-4 py-3">
+			<UploadedPDFIcon />
+			<div className="flex flex-col text-xs font-semibold max-w-40 min-w-5">
+				<span className="truncate">{fileName.replace(".pdf", "")}</span>
 				<span className="font-light text-ber-light-grey">PDF</span>
 			</div>
 		</div>
diff --git a/src/components/uploaded-files.tsx b/src/components/uploaded-files.tsx
new file mode 100644
index 0000000..2747f92
--- /dev/null
+++ b/src/components/uploaded-files.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { useInputFileStore } from "./../store/input-file-store";
+import { SpinnerIcon } from "./icons/spinner-icon";
+import { UploadedPDFIcon } from "./icons/uploaded-pdf-icon";
+import { XIcon } from "./icons/x-icon";
+
+export const UploadedFiles: React.FC = () => {
+	const { files, removeFile } = useInputFileStore();
+
+	return (
+		<>
+			{files.length > 0 && (
+				<div className="flex gap-5 p-4">
+					{files.map(({ id, name, extractionStatus }) => (
+						<div
+							key={id}
+							className="flex items-center gap-2 rounded-sm group bg-white p-2"
+						>
+							<div>
+								{extractionStatus === "pending" && <SpinnerIcon />}
+								{extractionStatus === "success" && <UploadedPDFIcon />}
+							</div>
+
+							<div className="flex flex-col text-xs font-semibold max-w-20 min-w-5">
+								<span className="truncate">{name.replace(".pdf", "")}</span>
+								<span className="font-light text-ber-light-grey">PDF</span>
+							</div>
+
+							{extractionStatus !== "pending" && (
+								<div className="relative">
+									<button
+										onClick={() => removeFile(id)}
+										className="flex p-1 items-center justify-center rounded-full bg-ber-light-grey opacity-0 group-hover:opacity-100"
+									>
+										<XIcon className="size-2 text-ber-darker-grey" />
+									</button>
+								</div>
+							)}
+						</div>
+					))}
+				</div>
+			)}
+		</>
+	);
+};
diff --git a/src/store/error-store.tsx b/src/store/error-store.tsx
index e683d46..12d9cbe 100644
--- a/src/store/error-store.tsx
+++ b/src/store/error-store.tsx
@@ -25,16 +25,10 @@ const errorMessages: { [key: string]: string } = {
 	context_length_exceeded:
 		"Kontextlänge überschritten, bitte starten Sie einen neuen Chat.",
 	wrong_password: "Falsches Passwort.",
+	"Failed to fetch":
+		"Etwas ist schief gelaufen, bitte starten Sie einen neuen Chat.",
 };
 
-// "Das Streamen der Chatantworten ist fehlgeschlagen."
-// "Fehler beim Einfügen der Chatantwort."
-// "Response body from API is empty",
-// "Extract document content failed"
-// "Es wird versucht, eine Nachricht zu einem nicht vorhandenen Chat hinzuzufügen.",
-// "Es wird versucht, eine Nachricht aus einem nicht vorhandenen Chat zu aktualisieren.",
-// "Es wird versucht, eine Nachricht aus einem nicht vorhandenen Chat zu löschen.",
-
 export const useErrorStore = create<ErrorStore>()((set, get) => ({
 	error: undefined,
 
diff --git a/src/store/input-file-store.ts b/src/store/input-file-store.ts
index 0dfc50d..4315a0a 100644
--- a/src/store/input-file-store.ts
+++ b/src/store/input-file-store.ts
@@ -39,6 +39,11 @@ export const useInputFileStore = create<InputFileStore>()((set, get) => ({
 
 		const extractedFiles = await Promise.all(promises);
 
+		if (extractedFiles.some((result) => result.extractionStatus === "error")) {
+			set({ files: [] });
+			return;
+		}
+
 		set({ files: extractedFiles });
 	},
 

From 6cc4604123f69fce2f7cb5ff095bc95863da8dd3 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Fri, 30 Aug 2024 09:24:09 +0200
Subject: [PATCH 14/33] Fix/small design errors (#63)

* fix: padding left splash screen

* fix: overflow x scroll to hidden in messages container

* fix: remove header tags

the header tags are effected by defined styles for markdown-containers in index.css

* feat: adjust starter text for edit app

* feat: adapt getting starte text size for mobile
---
 src/components/chat/chat-messages.tsx                      | 2 +-
 src/components/chat/get-started/get-started.tsx            | 6 +++---
 src/components/dialogs/faq-dialog/faq-dialog.tsx           | 6 +++---
 src/components/dialogs/faq-dialog/question-answer.tsx      | 2 +-
 src/components/dialogs/password-dialog.tsx                 | 4 ++--
 src/components/dialogs/settings-dialog/settings-dialog.tsx | 4 ++--
 src/components/dialogs/settings-dialog/settings-option.tsx | 2 +-
 src/components/dialogs/splash-screen-dialog.tsx            | 4 ++--
 src/components/edit/edit-get-started.tsx                   | 7 ++++---
 src/components/email-chat/email-chat-messages.tsx          | 2 +-
 src/components/email-chat/get-started-email-chat.tsx       | 4 +++-
 src/components/email/email-messages.tsx                    | 2 +-
 src/routes/note.tsx                                        | 4 ++--
 13 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/components/chat/chat-messages.tsx b/src/components/chat/chat-messages.tsx
index 649db56..2762b53 100644
--- a/src/components/chat/chat-messages.tsx
+++ b/src/components/chat/chat-messages.tsx
@@ -69,7 +69,7 @@ export const ChatMessages: React.FC = () => {
 	return (
 		<div
 			ref={messageContainerRef}
-			className="flex w-full justify-center overflow-auto scroll-smooth mb-2"
+			className="flex w-full justify-center overflow-y-auto overflow-x-hidden scroll-smooth mb-2"
 		>
 			<div className="md:w-[640px] lg:w-[768px] w-full h-full flex flex-col gap-y-4 px-5 md:pr-0 md:pl-2 ">
 				{messages.map((message) => (
diff --git a/src/components/chat/get-started/get-started.tsx b/src/components/chat/get-started/get-started.tsx
index 439fcd3..afc35cd 100644
--- a/src/components/chat/get-started/get-started.tsx
+++ b/src/components/chat/get-started/get-started.tsx
@@ -28,9 +28,9 @@ export const GetStarted: React.FC = () => {
 				<div className="flex min-h-[50px] w-[50px] items-center justify-center border border-black bg-white md:min-h-[60px] md:w-[60px]">
 					<BaerIcon className="h-8 w-8 md:h-10 md:w-10" />
 				</div>
-				<h2 className="py-4 text-3xl md:text-4xl font-bold">
+				<div className="py-4 text-3xl md:text-4xl font-bold">
 					Starte mit BärGPT!
-				</h2>
+				</div>
 				<p className="pb-4 pt-2 text-center md:text-xl text-sm">
 					BärGPT bietet spezialisierte KI-Funktionen, die Sie bei der Erledigung
 					von typischen Aufgaben unterstützen. Dieses Angebot befindet sich noch
@@ -39,7 +39,7 @@ export const GetStarted: React.FC = () => {
 
 				<GetStartedNavLinks />
 
-				<h2 className="pb-2 pt-8 text-xl md:text-2xl font-semibold">Chat</h2>
+				<div className="pb-2 pt-8 text-xl md:text-2xl font-semibold">Chat</div>
 				<p className="pb-2 pt-2 md:text-base text-sm text-center">
 					Sie können BärGPT direkt nutzen, indem Sie Ihre Frage oder Ihr
 					Anliegen in das Chatfenster unten eintippen oder direkt eine Frage
diff --git a/src/components/dialogs/faq-dialog/faq-dialog.tsx b/src/components/dialogs/faq-dialog/faq-dialog.tsx
index 69b389d..d9cfb05 100644
--- a/src/components/dialogs/faq-dialog/faq-dialog.tsx
+++ b/src/components/dialogs/faq-dialog/faq-dialog.tsx
@@ -15,7 +15,7 @@ export const FaqDialog: React.FC = () => {
 			<div className="w-full h-full flex justify-center">
 				<div className="flex flex-col justify-between gap-7 max-w-[600px]">
 					<div className="flex flex-col gap-7">
-						<h1 className="text-[22px] font-bold leading-6">Über BärGPT</h1>
+						<div className="text-[22px] font-bold leading-6">Über BärGPT</div>
 						<p>
 							BärGPT ist eine produktiv nutzbare KI-Testumgebung für
 							Beschäftigte der Berliner Landesverwaltung, bereitgestellt vom{" "}
@@ -41,9 +41,9 @@ export const FaqDialog: React.FC = () => {
 							</a>
 							.
 						</p>
-						<h1 className="text-[22px] font-bold leading-6">
+						<div className="text-[22px] font-bold leading-6">
 							Häufig gestellte Fragen
-						</h1>
+						</div>
 						{qas.map((qa) => (
 							<QuestionAnswer
 								key={qa.question}
diff --git a/src/components/dialogs/faq-dialog/question-answer.tsx b/src/components/dialogs/faq-dialog/question-answer.tsx
index 7b67df3..279ebcf 100644
--- a/src/components/dialogs/faq-dialog/question-answer.tsx
+++ b/src/components/dialogs/faq-dialog/question-answer.tsx
@@ -21,7 +21,7 @@ export const QuestionAnswer: React.FC<QuestionAnswerProps> = ({
 					className="flex w-full flex-row justify-between text-left group"
 					onClick={() => setIsExpanded(!isExpanded)}
 				>
-					<h1 className="text-[18px] font-bold leading-6">{question}</h1>
+					<div className="text-[18px] font-bold leading-6">{question}</div>
 					<ArrowIcon
 						className={`min-h-5 min-w-5 size-5 md:h-6 text-ber-darker-grey hover:text-ber-darker-grey transition ${isExpanded ? "rotate-90 group-hover:rotate-0" : "rotate-0 group-hover:rotate-90"}`}
 					/>
diff --git a/src/components/dialogs/password-dialog.tsx b/src/components/dialogs/password-dialog.tsx
index 28b2ef4..00cdfc8 100644
--- a/src/components/dialogs/password-dialog.tsx
+++ b/src/components/dialogs/password-dialog.tsx
@@ -31,8 +31,8 @@ export const PasswordDialog: React.FC = () => {
 						<div className="border border-black bg-white w-fit p-2 self-center">
 							<BaerIcon />
 						</div>
-						<h1 className="self-center font-bold text-2xl mt-3.5">BärGPT</h1>
-						<h2 className="self-center text-2xl -mt-3">KI-Testumgebung</h2>
+						<div className="self-center font-bold text-2xl mt-3.5">BärGPT</div>
+						<div className="self-center text-2xl -mt-3">KI-Testumgebung</div>
 
 						<label htmlFor="password" className="font-bold mt-12">
 							Passwort
diff --git a/src/components/dialogs/settings-dialog/settings-dialog.tsx b/src/components/dialogs/settings-dialog/settings-dialog.tsx
index bfd0571..06b1d18 100644
--- a/src/components/dialogs/settings-dialog/settings-dialog.tsx
+++ b/src/components/dialogs/settings-dialog/settings-dialog.tsx
@@ -15,9 +15,9 @@ export const SettingsDialog: React.FC = () => {
 		>
 			<div className="w-full flex justify-center">
 				<div className="flex flex-col max-w-[600px] gap-y-5 md:gap-y-5">
-					<h2 className="text-2xl font-bold">Einstellungen</h2>
+					<div className="text-2xl font-bold">Einstellungen</div>
 					<div className="text-lg flex flex-col gap-3">
-						<h3 className="font-bold">Modellauswahl</h3>
+						<div className="font-bold">Modellauswahl</div>
 						<p>
 							Für den Test von BärGPT stehen verschiedene Large Language Modelle
 							zur Auswahl. Bitte beachten Sie die Angaben zu Datenschutz und
diff --git a/src/components/dialogs/settings-dialog/settings-option.tsx b/src/components/dialogs/settings-dialog/settings-option.tsx
index 4aa2911..d3e21df 100644
--- a/src/components/dialogs/settings-dialog/settings-option.tsx
+++ b/src/components/dialogs/settings-dialog/settings-option.tsx
@@ -56,7 +56,7 @@ export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
 
 			<div className="flex flex-col gap-2">
 				<div className="flex flex-wrap gap-y-2 gap-x-5 mb-2">
-					<h3 className="font-bold text-lg">{option.identifier}</h3>
+					<div className="font-bold text-lg">{option.identifier}</div>
 					{option.provider === "Azure" && (
 						<div className="text-white bg-ber-green-darker rounded-full px-2 text-sm flex items-center">
 							empfohlen
diff --git a/src/components/dialogs/splash-screen-dialog.tsx b/src/components/dialogs/splash-screen-dialog.tsx
index ebb5b74..885f0d6 100644
--- a/src/components/dialogs/splash-screen-dialog.tsx
+++ b/src/components/dialogs/splash-screen-dialog.tsx
@@ -41,8 +41,8 @@ export const SplashScreenDialog: React.FC = () => {
 					<BaerIcon className="h-[40px] w-[40px]" />
 				</div>
 				<div>
-					<h1 className="text-[22px] font-bold leading-6">BärGPT</h1>
-					<h2 className="text-[22px]">KI-Testumgebung</h2>
+					<div className="text-[22px] font-bold leading-6">BärGPT</div>
+					<div className="text-[22px] pl-0">KI-Testumgebung</div>
 				</div>
 				<p className="py-2">
 					BärGPT ist eine produktiv nutzbare KI-Testumgebung für Beschäftigte
diff --git a/src/components/edit/edit-get-started.tsx b/src/components/edit/edit-get-started.tsx
index afccc8f..271d457 100644
--- a/src/components/edit/edit-get-started.tsx
+++ b/src/components/edit/edit-get-started.tsx
@@ -7,11 +7,12 @@ export const EditGetStarted: React.FC = () => {
 			<div className="mt-1 flex size-[35px] min-w-[35px] items-center justify-center border border-black bg-white">
 				<BaerIcon className="h-[21px] w-[21px]" />
 			</div>
-			<div className="flex flex-col gap-1 px-3 w-5/6">
+			<div className="flex flex-col gap-1 px-3">
 				<p>Hallo, gemeinsam bearbeiten wir Schritt für Schritt Ihren Text.</p>
-				<h1 className="text-3xl font-bold">
+				<div className="text-2xl sm:text-3xl font-bold">
 					Bitte fügen Sie den Text unten in das Eingabefeld ein.
-				</h1>
+				</div>
+				<p>Oder laden Sie ein Dokument hoch.</p>
 			</div>
 		</div>
 	);
diff --git a/src/components/email-chat/email-chat-messages.tsx b/src/components/email-chat/email-chat-messages.tsx
index 3030736..b2ae7ed 100644
--- a/src/components/email-chat/email-chat-messages.tsx
+++ b/src/components/email-chat/email-chat-messages.tsx
@@ -69,7 +69,7 @@ export const EmailChatMessages: React.FC = () => {
 	return (
 		<div
 			ref={messageContainerRef}
-			className="flex w-full justify-center overflow-auto pb-2 px-5"
+			className="flex w-full justify-center overflow-y-auto overflow-x-hidden pb-2 px-5"
 		>
 			<div className="md:w-[640px] lg:w-[768px] flex flex-col gap-y-4">
 				<div className="flex">
diff --git a/src/components/email-chat/get-started-email-chat.tsx b/src/components/email-chat/get-started-email-chat.tsx
index 9abc05c..3cb6550 100644
--- a/src/components/email-chat/get-started-email-chat.tsx
+++ b/src/components/email-chat/get-started-email-chat.tsx
@@ -36,7 +36,9 @@ export const GetStartedEmailChat: React.FC = () => {
 			</div>
 			<div className="flex flex-col gap-1 px-3">
 				<p>Hallo, gemeinsam formulieren wir Schritt für Schritt eine E-Mail.</p>
-				<h1 className="text-3xl font-bold">Was möchten Sie tun?</h1>
+				<div className="text-2xl sm:text-3xl font-bold">
+					Was möchten Sie tun?
+				</div>
 				<div className="flex flex-wrap gap-4 pt-3">
 					{mailStartPrompts.map(({ label, value }) => (
 						<TagButton
diff --git a/src/components/email/email-messages.tsx b/src/components/email/email-messages.tsx
index 4c703fa..4f8f8b9 100644
--- a/src/components/email/email-messages.tsx
+++ b/src/components/email/email-messages.tsx
@@ -68,7 +68,7 @@ export const EmailMessages: React.FC = () => {
 	return (
 		<div
 			ref={messageContainerRef}
-			className="flex w-full justify-center overflow-auto pb-2 px-5"
+			className="flex w-full justify-center overflow-y-auto overflow-x-hidden pb-2 px-5"
 		>
 			<div className="md:w-[640px] lg:w-[768px] flex flex-col gap-y-4">
 				{messages.map((message) => (
diff --git a/src/routes/note.tsx b/src/routes/note.tsx
index 727fe1b..f14de15 100644
--- a/src/routes/note.tsx
+++ b/src/routes/note.tsx
@@ -12,9 +12,9 @@ export const Note: React.FC = () => {
 					>
 						<InfoIcon /> Bald verfügbar
 					</div>
-					<h1 className="text-3xl md:text-5xl font-bold text-ber-darker-grey pb-4">
+					<div className="text-3xl md:text-5xl font-bold text-ber-darker-grey pb-4">
 						Vermerk erstellen
-					</h1>
+					</div>
 					<div className="md:text-xl text-ber-darker-grey">
 						Der Vermerk-Assistent unterstützt Sie, aussagekräftige und leicht
 						verständliche Sachverhalte, Entscheidungen und Hinweise zu

From 7814439d801db38b4f564587a9d7a1e6e6ca46c9 Mon Sep 17 00:00:00 2001
From: Raphael Arce <raphael.arce@ts.berlin>
Date: Thu, 29 Aug 2024 18:56:05 +0200
Subject: [PATCH 15/33] fix: use requestSubmit instead of dispatchEvent with
 virtual event

Signed-off-by: Raphael Arce <raphael.arce@ts.berlin>
---
 src/components/edit/edit-chat-form.tsx        | 4 +---
 src/components/email-chat/email-chat-form.tsx | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/edit/edit-chat-form.tsx b/src/components/edit/edit-chat-form.tsx
index 0975ebb..ce4da83 100644
--- a/src/components/edit/edit-chat-form.tsx
+++ b/src/components/edit/edit-chat-form.tsx
@@ -64,9 +64,7 @@ export const EditChatForm: React.FC = () => {
 				onKeyDown={(e) => {
 					if (e.key === "Enter" && !e.shiftKey) {
 						e.preventDefault();
-						e.currentTarget.form?.dispatchEvent(
-							new Event("submit", { bubbles: true }),
-						);
+						e.currentTarget.form?.requestSubmit();
 					}
 				}}
 			/>
diff --git a/src/components/email-chat/email-chat-form.tsx b/src/components/email-chat/email-chat-form.tsx
index 1541d0d..633f30b 100644
--- a/src/components/email-chat/email-chat-form.tsx
+++ b/src/components/email-chat/email-chat-form.tsx
@@ -54,9 +54,7 @@ export const EmailChatForm: React.FC = () => {
 							onKeyDown={(e) => {
 								if (e.key === "Enter" && !e.shiftKey) {
 									e.preventDefault();
-									e.currentTarget.form?.dispatchEvent(
-										new Event("submit", { bubbles: true }),
-									);
+									e.currentTarget.form?.requestSubmit();
 								}
 							}}
 							rows={1}

From 75591fbd56f9bf50472d4a2b8fbf25d13fdea731 Mon Sep 17 00:00:00 2001
From: Raphael Arce <raphael.arce@ts.berlin>
Date: Thu, 29 Aug 2024 18:18:39 +0200
Subject: [PATCH 16/33] feat: use model details from api

Signed-off-by: Raphael Arce <raphael.arce@ts.berlin>
---
 .../settings-dialog/settings-option.tsx       | 34 ++-----------------
 src/store/current-llm-store.ts                |  5 ++-
 2 files changed, 7 insertions(+), 32 deletions(-)

diff --git a/src/components/dialogs/settings-dialog/settings-option.tsx b/src/components/dialogs/settings-dialog/settings-option.tsx
index d3e21df..f70e06c 100644
--- a/src/components/dialogs/settings-dialog/settings-option.tsx
+++ b/src/components/dialogs/settings-dialog/settings-option.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import {
 	availableLLM,
-	defaultModelIdentifier,
 	useCurrentLLMStore,
 } from "../../../store/current-llm-store";
 import { CheckSolidIcon } from "../../icons/check-solid-icon";
@@ -18,32 +17,6 @@ export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
 
 	const isChecked = option.identifier === currentLLM;
 
-	const descriptionText = (() => {
-		switch (option.provider) {
-			case "Azure":
-				return "Aktuelles Modell von Open AI, datenschutzkonform gehostet von Microsoft Azure.";
-			case "OpenAI":
-				return "Aktuelles Modell von Open AI, gehostet von Open AI.";
-			case "Ollama":
-				return "Open Source-Modell von Meta, datenschutzkonform gehostet im CityLAB Berlin.";
-			default:
-				return "";
-		}
-	})();
-
-	const serverLocation = (() => {
-		switch (option.provider) {
-			case "Azure":
-				return "Schweden";
-			case "Ollama":
-				return "Berlin";
-			case "OpenAI":
-				return "USA";
-			default:
-				return "";
-		}
-	})();
-
 	return (
 		<label
 			htmlFor={option.identifier}
@@ -64,7 +37,7 @@ export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
 					)}
 				</div>
 
-				<p className="text-sm">{descriptionText}</p>
+				<p className="text-sm">{option.description}</p>
 
 				<div className="flex-wrap flex gap-x-5 gap-y-1 text-sm">
 					<div className="flex flex-row gap-2 items-center">
@@ -73,11 +46,11 @@ export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
 					</div>
 					<div className="flex flex-row gap-2 items-center">
 						<p className="font-bold">Open Source</p>
-						{option.provider === "Ollama" ? <CheckIcon /> : <UnavailableIcon />}
+						{option.isOpenSource ? <CheckIcon /> : <UnavailableIcon />}
 					</div>
 					<div className="flex flex-row gap-2 items-center">
 						<p className="font-bold">Serverstandort</p>
-						{option.provider && <p>{serverLocation}</p>}
+						{option.provider && <p>{option.serverLocation}</p>}
 					</div>
 				</div>
 
@@ -87,7 +60,6 @@ export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
 					name="model"
 					value={option.identifier}
 					className="appearance-none"
-					defaultChecked={option.identifier === defaultModelIdentifier}
 					checked={option.identifier === currentLLM}
 					onChange={(e) => setCurrentLLM(e.target.value)}
 				/>
diff --git a/src/store/current-llm-store.ts b/src/store/current-llm-store.ts
index 94e8691..f7b7c19 100644
--- a/src/store/current-llm-store.ts
+++ b/src/store/current-llm-store.ts
@@ -6,6 +6,9 @@ export interface availableLLM {
 	baseModelName: string;
 	provider: string;
 	isGdprCompliant: boolean;
+	isOpenSource: boolean;
+	description: string;
+	serverLocation: string;
 }
 
 interface CurrentLLMStore {
@@ -14,7 +17,7 @@ interface CurrentLLMStore {
 	availableLLMs: availableLLM[];
 }
 
-export const defaultModelIdentifier = "azure-gpt-4o-mini";
+const defaultModelIdentifier = "azure-gpt-4o-mini";
 
 export const useCurrentLLMStore = create<CurrentLLMStore>()((set) => {
 	getAvailableLLMs().catch(console.error);

From 59c8acc187f126ec91658948cacddc2094cef36d Mon Sep 17 00:00:00 2001
From: Raphael Arce <raphael.arce@ts.berlin>
Date: Thu, 29 Aug 2024 18:10:43 +0200
Subject: [PATCH 17/33] feat: add help button/dialog and refactor the QA
 component as a generic collapsible component

Signed-off-by: Raphael Arce <raphael.arce@ts.berlin>
---
 src/components/chat/chat.tsx                  |  3 +
 src/components/collapse/collapsible.tsx       | 36 +++++++++++
 .../dialogs/faq-dialog/faq-dialog.tsx         | 18 +++---
 .../dialogs/faq-dialog/question-answer.tsx    | 34 ----------
 src/components/email-chat/email-chat.tsx      |  3 +
 src/components/email/email.tsx                |  3 +
 src/components/help/help.tsx                  | 62 +++++++++++++++++++
 src/components/help/qas.tsx                   | 52 ++++++++++++++++
 src/components/icons/question-mark-icon.tsx   | 17 +++++
 9 files changed, 186 insertions(+), 42 deletions(-)
 create mode 100644 src/components/collapse/collapsible.tsx
 delete mode 100644 src/components/dialogs/faq-dialog/question-answer.tsx
 create mode 100644 src/components/help/help.tsx
 create mode 100644 src/components/help/qas.tsx
 create mode 100644 src/components/icons/question-mark-icon.tsx

diff --git a/src/components/chat/chat.tsx b/src/components/chat/chat.tsx
index d930c35..43d7010 100644
--- a/src/components/chat/chat.tsx
+++ b/src/components/chat/chat.tsx
@@ -5,6 +5,7 @@ import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
 import { UploadedFiles } from "../uploaded-files";
 import { ChatForm } from "./chat-form";
 import { ChatMessages } from "./chat-messages";
+import { Help } from "../help/help";
 
 export const Chat: React.FC = () => {
 	const { getChat } = useChatHistoryStore();
@@ -15,6 +16,8 @@ export const Chat: React.FC = () => {
 		<div className="flex h-full flex-col items-center justify-between pt-14 py-5">
 			{messages.length === 0 && <GetStarted />}
 
+			<Help />
+
 			<ChatMessages />
 
 			<div className="px-5 w-full flex justify-center">
diff --git a/src/components/collapse/collapsible.tsx b/src/components/collapse/collapsible.tsx
new file mode 100644
index 0000000..40d224c
--- /dev/null
+++ b/src/components/collapse/collapsible.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { ArrowIcon } from "../icons/arrow-icon";
+
+interface CollapsibleProps {
+	question: string;
+	answer: string | React.ReactNode;
+	openByDefault?: boolean;
+}
+
+export const Collapsible: React.FC<CollapsibleProps> = ({
+	question,
+	answer,
+	openByDefault = false,
+}) => {
+	const [isExpanded, setIsExpanded] = useState(openByDefault);
+
+	return (
+		<div
+			className={`flex flex-col rounded-sm border-2 transition-all duration-200 ease-in-out border-transparent bg-ber-lighter-grey p-4`}
+		>
+			<div className="flex flex-row justify-between">
+				<button
+					className="flex w-full flex-row justify-between text-left group"
+					onClick={() => setIsExpanded(!isExpanded)}
+				>
+					<div className="text-[18px] font-bold leading-6">{question}</div>
+					<ArrowIcon
+						className={`size-4 md:h-6 text-ber-darker-grey hover:text-ber-darker-grey transition ${isExpanded ? "rotate-90 group-hover:rotate-0" : "rotate-0 group-hover:rotate-90"}`}
+					/>
+				</button>
+			</div>
+
+			{isExpanded && <div className="pt-5">{answer}</div>}
+		</div>
+	);
+};
diff --git a/src/components/dialogs/faq-dialog/faq-dialog.tsx b/src/components/dialogs/faq-dialog/faq-dialog.tsx
index d9cfb05..9a5487f 100644
--- a/src/components/dialogs/faq-dialog/faq-dialog.tsx
+++ b/src/components/dialogs/faq-dialog/faq-dialog.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { QuestionAnswer } from "./question-answer";
+import { Collapsible } from "../../collapse/collapsible";
 import { qas } from "./qas";
 import { logoLinks } from "../../logo-links";
 import { DefaultDialog } from "../default-dialog";
@@ -44,13 +44,15 @@ export const FaqDialog: React.FC = () => {
 						<div className="text-[22px] font-bold leading-6">
 							Häufig gestellte Fragen
 						</div>
-						{qas.map((qa) => (
-							<QuestionAnswer
-								key={qa.question}
-								question={qa.question}
-								answer={qa.answer}
-							/>
-						))}
+						<div className="flex flex-col gap-y-2">
+							{qas.map((qa) => (
+								<Collapsible
+									key={qa.question}
+									question={qa.question}
+									answer={qa.answer}
+								/>
+							))}
+						</div>
 					</div>
 					<div className="flex flex-row flex-wrap justify-start gap-10 border-t border-ber-light-grey py-6">
 						{logoLinks.map((link) => (
diff --git a/src/components/dialogs/faq-dialog/question-answer.tsx b/src/components/dialogs/faq-dialog/question-answer.tsx
deleted file mode 100644
index 279ebcf..0000000
--- a/src/components/dialogs/faq-dialog/question-answer.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState } from "react";
-import { ArrowIcon } from "../../icons/arrow-icon";
-
-interface QuestionAnswerProps {
-	question: string;
-	answer: string;
-}
-
-export const QuestionAnswer: React.FC<QuestionAnswerProps> = ({
-	question,
-	answer,
-}) => {
-	const [isExpanded, setIsExpanded] = useState(false);
-
-	return (
-		<div
-			className={`flex flex-col rounded-sm border-2 transition-all duration-200 ease-in-out border-transparent`}
-		>
-			<div className="flex flex-row justify-between">
-				<button
-					className="flex w-full flex-row justify-between text-left group"
-					onClick={() => setIsExpanded(!isExpanded)}
-				>
-					<div className="text-[18px] font-bold leading-6">{question}</div>
-					<ArrowIcon
-						className={`min-h-5 min-w-5 size-5 md:h-6 text-ber-darker-grey hover:text-ber-darker-grey transition ${isExpanded ? "rotate-90 group-hover:rotate-0" : "rotate-0 group-hover:rotate-90"}`}
-					/>
-				</button>
-			</div>
-
-			{isExpanded && <p className="pt-2">{answer}</p>}
-		</div>
-	);
-};
diff --git a/src/components/email-chat/email-chat.tsx b/src/components/email-chat/email-chat.tsx
index 548624a..8f49b90 100644
--- a/src/components/email-chat/email-chat.tsx
+++ b/src/components/email-chat/email-chat.tsx
@@ -1,10 +1,13 @@
 import React from "react";
 import { EmailChatForm } from "./email-chat-form";
 import { EmailChatMessages } from "./email-chat-messages";
+import { Help } from "../help/help";
 
 export const EmailChat: React.FC = () => {
 	return (
 		<div className="flex h-full flex-col items-center justify-between pt-16 pb-5 relative">
+			<Help />
+
 			<EmailChatMessages />
 
 			<EmailChatForm />
diff --git a/src/components/email/email.tsx b/src/components/email/email.tsx
index 97b43b5..dab8839 100644
--- a/src/components/email/email.tsx
+++ b/src/components/email/email.tsx
@@ -4,6 +4,7 @@ import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
 import { EmailForm } from "./email-form/email-form";
 import { EmailMessages } from "./email-messages";
 import { useChatHistoryStore } from "../../store/chat-history-store";
+import { Help } from "../help/help";
 
 export const Email: React.FC = () => {
 	const { getChat } = useChatHistoryStore();
@@ -12,6 +13,8 @@ export const Email: React.FC = () => {
 
 	return (
 		<div className="flex h-full flex-col items-center justify-between pt-16 md:pb-5 relative">
+			<Help />
+
 			{messages.length === 0 && <GetStartedMail />}
 
 			<EmailMessages />
diff --git a/src/components/help/help.tsx b/src/components/help/help.tsx
new file mode 100644
index 0000000..dfea585
--- /dev/null
+++ b/src/components/help/help.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { qas } from "./qas";
+import { Collapsible } from "../collapse/collapsible";
+import { QuestionMarkIcon } from "../icons/question-mark-icon";
+import { XIcon } from "../icons/x-icon";
+
+export const Help: React.FC = () => {
+	const [isHelpOpen, setIsHelpOpen] = React.useState(false);
+
+	return (
+		<>
+			<div
+				className={`
+					absolute right-5 md:right-12 top-[4.25rem] md:top-[4.25rem]
+				`}
+			>
+				<button
+					className={`
+						flex items-center gap-x-2.5
+						bg-ber-darker-grey hover:bg-ber-dark-grey
+						p-1.5 md:p-2.5 rounded-sm
+						text-white text-sm md:text-lg
+					`}
+					style={{ lineHeight: 1 }}
+					onClick={() => setIsHelpOpen(!isHelpOpen)}
+				>
+					<QuestionMarkIcon />
+					Hilfe
+				</button>
+			</div>
+
+			{isHelpOpen && (
+				<div
+					className={`
+						absolute right-0 top-12 md:right-12 md:top-20 z-50 
+						md:w-96 w-full md:h-[36rem] h-full
+						border border-ber-lighter-grey shadow-2xl
+						text-ber-darker-grey text-[16px]
+						p-5 bg-white rounded-sm overflow-y-auto 
+					`}
+				>
+					<div className="flex justify-between pb-4">
+						<span className="text-3xl">Hilfe</span>
+						<button onClick={() => setIsHelpOpen(false)}>
+							<XIcon className="size-6 hover:text-ber-dark-grey" />
+						</button>
+					</div>
+					<div className="flex flex-col gap-y-2">
+						{qas.map((qa) => (
+							<Collapsible
+								key={qa.question}
+								question={qa.question}
+								answer={qa.answer}
+								openByDefault={qa.openByDefault}
+							/>
+						))}
+					</div>
+				</div>
+			)}
+		</>
+	);
+};
diff --git a/src/components/help/qas.tsx b/src/components/help/qas.tsx
new file mode 100644
index 0000000..1c06274
--- /dev/null
+++ b/src/components/help/qas.tsx
@@ -0,0 +1,52 @@
+export const qas = [
+	{
+		question: "Tipps im Umgang mit BärGPT",
+		answer: (
+			<ul className="flex flex-col gap-y-3 list-outside pl-3.5 leading-5">
+				<li className="list-disc">
+					Formulieren Sie klare Anfragen (auch Prompts genannt): Die Genauigkeit
+					der Antworten von BärGPT hängt stark von der Klarheit Ihres Prompts
+					ab.
+				</li>
+				<li className="list-disc">
+					Nutzen Sie den Kontext: BärGPT kann auf Basis vorheriger Nachrichten
+					antworten, was einen fließenden Dialog ermöglicht.
+				</li>
+				<li className="list-disc">
+					Seien Sie experimentierfreudig: Die Bandbreite der
+					Anwendungs&shy;möglichkeiten von BärGPT ist enorm. Nutzen Sie dies zu
+					Ihrem Vorteil.
+				</li>
+			</ul>
+		),
+		openByDefault: true,
+	},
+	{
+		question: "Wie schreibe ich mit BärGPT?",
+		answer: (
+			<>
+				<ul>
+					<li>
+						Formulieren Sie klare Anfragen (auch Prompts genannt): Die
+						Genauigkeit der Antworten von BärGPT hängt stark von der Klarheit
+						Ihres Prompts ab.
+					</li>
+					<li>
+						Nutzen Sie den Kontext: BärGPT kann auf Basis vorheriger Nachrichten
+						antworten, was einen fließenden Dialog ermöglicht.
+					</li>
+					<li>
+						Seien Sie experimentierfreudig: Die Bandbreite der
+						Anwendungsmöglichkeiten von BärGPT ist enorm. Nutzen Sie dies zu
+						Ihrem Vorteil.
+					</li>
+				</ul>
+			</>
+		),
+	},
+	{
+		question: "Was ist BärGPT?",
+		answer:
+			"BärGPT ist ein Computerprogramm, das auf einer sogenannten „künstlichen Intelligenz“ (KI) basiert. Einfach gesagt, ist es ein fortschrittlicher digitaler Assistent, der Texte verstehen und beantworten kann, ähnlich wie ein Mensch. BärGPT kann Ihnen helfen, indem es Informationen bereitstellt, Fragen beantwortet, Texte schreibt oder Aufgaben automatisiert.",
+	},
+];
diff --git a/src/components/icons/question-mark-icon.tsx b/src/components/icons/question-mark-icon.tsx
new file mode 100644
index 0000000..c224e3b
--- /dev/null
+++ b/src/components/icons/question-mark-icon.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+export const QuestionMarkIcon: React.FC = () => {
+	return (
+		<svg
+			width="16"
+			height="17"
+			viewBox="0 0 16 17"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M7.96 13.3C8.24 13.3 8.47667 13.2033 8.67 13.01C8.86333 12.8167 8.96 12.58 8.96 12.3C8.96 12.02 8.86333 11.7833 8.67 11.59C8.47667 11.3967 8.24 11.3 7.96 11.3C7.68 11.3 7.44333 11.3967 7.25 11.59C7.05667 11.7833 6.96 12.02 6.96 12.3C6.96 12.58 7.05667 12.8167 7.25 13.01C7.44333 13.2033 7.68 13.3 7.96 13.3ZM7.24 10.22H8.72C8.72 9.78 8.77 9.43333 8.87 9.18C8.97 8.92667 9.25333 8.58 9.72 8.14C10.0667 7.79333 10.34 7.46333 10.54 7.15C10.74 6.83667 10.84 6.46 10.84 6.02C10.84 5.27333 10.5667 4.7 10.02 4.3C9.47333 3.9 8.82667 3.7 8.08 3.7C7.32 3.7 6.70333 3.9 6.23 4.3C5.75667 4.7 5.42667 5.18 5.24 5.74L6.56 6.26C6.62667 6.02 6.77667 5.76 7.01 5.48C7.24333 5.2 7.6 5.06 8.08 5.06C8.50667 5.06 8.82667 5.17667 9.04 5.41C9.25333 5.64333 9.36 5.9 9.36 6.18C9.36 6.44667 9.28 6.69667 9.12 6.93C8.96 7.16333 8.76 7.38 8.52 7.58C7.93333 8.1 7.57333 8.49333 7.44 8.76C7.30667 9.02667 7.24 9.51333 7.24 10.22ZM8 16.5C6.89333 16.5 5.85333 16.29 4.88 15.87C3.90667 15.45 3.06 14.88 2.34 14.16C1.62 13.44 1.05 12.5933 0.63 11.62C0.21 10.6467 0 9.60667 0 8.5C0 7.39333 0.21 6.35333 0.63 5.38C1.05 4.40667 1.62 3.56 2.34 2.84C3.06 2.12 3.90667 1.55 4.88 1.13C5.85333 0.71 6.89333 0.5 8 0.5C9.10667 0.5 10.1467 0.71 11.12 1.13C12.0933 1.55 12.94 2.12 13.66 2.84C14.38 3.56 14.95 4.40667 15.37 5.38C15.79 6.35333 16 7.39333 16 8.5C16 9.60667 15.79 10.6467 15.37 11.62C14.95 12.5933 14.38 13.44 13.66 14.16C12.94 14.88 12.0933 15.45 11.12 15.87C10.1467 16.29 9.10667 16.5 8 16.5ZM8 14.9C9.78667 14.9 11.3 14.28 12.54 13.04C13.78 11.8 14.4 10.2867 14.4 8.5C14.4 6.71333 13.78 5.2 12.54 3.96C11.3 2.72 9.78667 2.1 8 2.1C6.21333 2.1 4.7 2.72 3.46 3.96C2.22 5.2 1.6 6.71333 1.6 8.5C1.6 10.2867 2.22 11.8 3.46 13.04C4.7 14.28 6.21333 14.9 8 14.9Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+};

From e2067183cdd593fc54e1bd71f1967e3cf41895c7 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Fri, 30 Aug 2024 12:16:55 +0200
Subject: [PATCH 18/33] feat: adjust text size spacing and color (#68)

---
 src/components/icons/info-icon.tsx | 2 +-
 src/routes/note.tsx                | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/icons/info-icon.tsx b/src/components/icons/info-icon.tsx
index 5fb7ee4..442abbf 100644
--- a/src/components/icons/info-icon.tsx
+++ b/src/components/icons/info-icon.tsx
@@ -11,7 +11,7 @@ export const InfoIcon: React.FC = () => (
 		<g clipPath="url(#clip0_568_4924)">
 			<path
 				d="M8 0.25C3.72009 0.25 0.25 3.72134 0.25 8C0.25 12.2812 3.72009 15.75 8 15.75C12.2799 15.75 15.75 12.2812 15.75 8C15.75 3.72134 12.2799 0.25 8 0.25ZM8 3.6875C8.72487 3.6875 9.3125 4.27513 9.3125 5C9.3125 5.72487 8.72487 6.3125 8 6.3125C7.27513 6.3125 6.6875 5.72487 6.6875 5C6.6875 4.27513 7.27513 3.6875 8 3.6875ZM9.75 11.625C9.75 11.8321 9.58209 12 9.375 12H6.625C6.41791 12 6.25 11.8321 6.25 11.625V10.875C6.25 10.6679 6.41791 10.5 6.625 10.5H7V8.5H6.625C6.41791 8.5 6.25 8.33209 6.25 8.125V7.375C6.25 7.16791 6.41791 7 6.625 7H8.625C8.83209 7 9 7.16791 9 7.375V10.5H9.375C9.58209 10.5 9.75 10.6679 9.75 10.875V11.625Z"
-				fill="black"
+				fill="currentColor"
 			/>
 		</g>
 		<defs>
diff --git a/src/routes/note.tsx b/src/routes/note.tsx
index f14de15..9c6047d 100644
--- a/src/routes/note.tsx
+++ b/src/routes/note.tsx
@@ -6,16 +6,16 @@ export const Note: React.FC = () => {
 	return (
 		<Layout>
 			<div className="flex h-full w-full items-center justify-center">
-				<div className=" md:w-[640px] lg:w-[768px] px-5 text-center items-center flex flex-col gap-2">
+				<div className=" sm:w-[575px] px-5 text-center items-center flex flex-col gap-2">
 					<div
-						className={`flex flex-row gap-3 w-fit text-xs border border-black rounded-full px-3 py-1 `}
+						className={`flex flex-row gap-3 w-fit text-xs border border-ber-darker-grey rounded-full px-3 py-1 `}
 					>
 						<InfoIcon /> Bald verfügbar
 					</div>
-					<div className="text-3xl md:text-5xl font-bold text-ber-darker-grey pb-4">
+					<div className="text-3xl font-bold text-ber-darker-grey">
 						Vermerk erstellen
 					</div>
-					<div className="md:text-xl text-ber-darker-grey">
+					<div className="text-md text-ber-darker-grey">
 						Der Vermerk-Assistent unterstützt Sie, aussagekräftige und leicht
 						verständliche Sachverhalte, Entscheidungen und Hinweise zu
 						formulieren.

From 058c1c71a1cc7918e4303a00cacf96b277ca51d9 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Fri, 30 Aug 2024 12:18:03 +0200
Subject: [PATCH 19/33] Feat/adjust textarea height (#61)

* feat: exchange send icon

* feat: set fixed textarea height and disabled send button

* feat: update send icon in chat an email form

* feat: improve disabled state of send button

* fix: import error
---
 src/components/chat/chat-form.tsx             | 10 ++++--
 src/components/edit/edit-chat-form.tsx        | 32 +++++++++++--------
 src/components/email-chat/email-chat-form.tsx | 17 +++++-----
 .../email/email-form/email-form.tsx           |  7 +++-
 src/components/icons/send-icon.tsx            | 15 +++++----
 5 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/src/components/chat/chat-form.tsx b/src/components/chat/chat-form.tsx
index 584c51f..b34fc75 100644
--- a/src/components/chat/chat-form.tsx
+++ b/src/components/chat/chat-form.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { FileUploadButton } from "../buttons/file-upload-button";
 import { SendIcon } from "../icons/send-icon";
 import { useIsLoadingStore } from "../../store/is-loading-store";
@@ -43,6 +43,8 @@ async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
 
 export const ChatForm: React.FC = () => {
 	const { isLoading: isGPTResponseLoading } = useIsLoadingStore();
+	const [isSendDisabled, setIsSendDisabled] = useState(true);
+
 	const { files } = useInputFileStore();
 
 	const isLoading =
@@ -60,6 +62,9 @@ export const ChatForm: React.FC = () => {
 				className="w-full bg-ber-lighter-grey focus:outline-none"
 				name="message"
 				type="text"
+				onInput={(e) => {
+					setIsSendDisabled(!e.currentTarget.value);
+				}}
 				required={files.length === 0}
 				placeholder="Wie kann ich Ihnen helfen?"
 			/>
@@ -67,7 +72,8 @@ export const ChatForm: React.FC = () => {
 			<button
 				type="submit"
 				disabled={isLoading}
-				className="text-ber-darker-grey hover:text-ber-dark-grey disabled:text-light-grey"
+				className={`text-ber-darker-grey hover:text-ber-dark-grey disabled:text-ber-light-grey
+					${isSendDisabled && files.length === 0 && "text-ber-light-grey hover:text-ber-light-grey"}`}
 			>
 				<SendIcon className="w-8 h-8" />
 			</button>
diff --git a/src/components/edit/edit-chat-form.tsx b/src/components/edit/edit-chat-form.tsx
index ce4da83..92c3c19 100644
--- a/src/components/edit/edit-chat-form.tsx
+++ b/src/components/edit/edit-chat-form.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { FileUploadButton } from "../buttons/file-upload-button";
 import { SendIcon } from "../icons/send-icon";
 import { useIsLoadingStore } from "../../store/is-loading-store";
@@ -43,6 +43,8 @@ async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
 
 export const EditChatForm: React.FC = () => {
 	const { isLoading: isGPTResponseLoading } = useIsLoadingStore();
+	const [isSendDisabled, setIsSendDisabled] = useState(true);
+
 	const { files } = useInputFileStore();
 
 	const isLoading =
@@ -51,16 +53,17 @@ export const EditChatForm: React.FC = () => {
 
 	return (
 		<form
-			className={`flex items-end gap-4 px-6 py-3 has-[:focus]:border-blue-500`}
+			className={`flex flex-col gap-2 p-4 has-[:focus]:border-blue-500`}
 			onSubmit={onSubmit}
 		>
-			<FileUploadButton />
-
 			<textarea
-				className="w-full h-28 bg-ber-lighter-grey focus:outline-none max-h-72 resize-y"
+				className="w-full bg-ber-lighter-grey focus:outline-none h-44 resize-none"
 				name="message"
 				placeholder="Text hier eingeben"
 				required={files.length === 0}
+				onInput={(e) => {
+					setIsSendDisabled(!e.currentTarget.value);
+				}}
 				onKeyDown={(e) => {
 					if (e.key === "Enter" && !e.shiftKey) {
 						e.preventDefault();
@@ -68,14 +71,17 @@ export const EditChatForm: React.FC = () => {
 					}
 				}}
 			/>
-
-			<button
-				type="submit"
-				disabled={isLoading}
-				className="text-ber-darker-grey hover:text-ber-dark-grey disabled:text-light-grey"
-			>
-				<SendIcon className="w-8 h-8" />
-			</button>
+			<div className="flex flex-row justify-between">
+				<FileUploadButton />
+				<button
+					type="submit"
+					disabled={isLoading}
+					className={`text-ber-darker-grey hover:text-ber-dark-grey disabled:text-ber-light-grey
+						${isSendDisabled && files.length === 0 && "text-ber-light-grey hover:text-ber-light-grey"}`}
+				>
+					<SendIcon className="w-8 h-8" />
+				</button>
+			</div>
 		</form>
 	);
 };
diff --git a/src/components/email-chat/email-chat-form.tsx b/src/components/email-chat/email-chat-form.tsx
index 633f30b..2a6732b 100644
--- a/src/components/email-chat/email-chat-form.tsx
+++ b/src/components/email-chat/email-chat-form.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { SendIcon } from "../icons/send-icon";
 import { useIsLoadingStore } from "../../store/is-loading-store";
 import { streamChatResponse } from "../../store/api";
@@ -12,6 +12,8 @@ export const EmailChatForm: React.FC = () => {
 	const { isLoading } = useIsLoadingStore();
 	const { setHasUserScrolled } = useHasUserScrolledStore();
 
+	const [isSendDisabled, setIsSendDisabled] = useState(true);
+
 	const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 		e.preventDefault();
 		setIsLoading(true);
@@ -39,17 +41,16 @@ export const EmailChatForm: React.FC = () => {
 			<div className="px-5 w-full flex justify-center">
 				<div className="md:w-[640px] lg:w-[768px] w-full z-10 flex flex-col bg-ber-lighter-grey">
 					<form
-						className={`flex items-center gap-4 px-6 py-3 has-[:focus]:border-blue-500`}
+						className={`flex flex-col items-end gap-2 p-4 has-[:focus]:border-blue-500`}
 						onSubmit={onSubmit}
 					>
 						<textarea
-							className="w-full bg-ber-lighter-grey focus:outline-none max-h-52 resize-y"
+							className="w-full bg-ber-lighter-grey focus:outline-none h-44 resize-none"
 							name="message"
 							required
-							placeholder="Was für eine E-Mail möchten Sie formulieren?"
+							placeholder="Text hier eingeben"
 							onInput={(e) => {
-								e.currentTarget.style.height = "auto";
-								e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`;
+								setIsSendDisabled(!e.currentTarget.value);
 							}}
 							onKeyDown={(e) => {
 								if (e.key === "Enter" && !e.shiftKey) {
@@ -57,13 +58,13 @@ export const EmailChatForm: React.FC = () => {
 									e.currentTarget.form?.requestSubmit();
 								}
 							}}
-							rows={1}
 						/>
 
 						<button
 							type="submit"
 							disabled={isLoading}
-							className="text-ber-darker-grey hover:text-ber-dark-grey disabled:text-light-grey"
+							className={`text-ber-darker-grey hover:text-ber-dark-grey disabled:text-ber-light-grey
+								${isSendDisabled && "text-ber-light-grey hover:text-ber-light-grey"}`}
 						>
 							<SendIcon className="w-8 h-8" />
 						</button>
diff --git a/src/components/email/email-form/email-form.tsx b/src/components/email/email-form/email-form.tsx
index b4fe519..f7d0ccf 100644
--- a/src/components/email/email-form/email-form.tsx
+++ b/src/components/email/email-form/email-form.tsx
@@ -38,6 +38,7 @@ export const EmailForm: React.FC = () => {
 	const isDesktop = window.innerWidth > 767;
 	const [isEmailFormExpanded, setIsEmailFormExpanded] = useState(isDesktop);
 	const { isLoading } = useIsLoadingStore();
+	const [isSendDisabled, setIsSendDisabled] = useState(true);
 	const { setHasUserScrolled } = useHasUserScrolledStore();
 
 	const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -106,12 +107,16 @@ export const EmailForm: React.FC = () => {
 							rows={2}
 							name="message"
 							required
+							onInput={(e) => {
+								setIsSendDisabled(!e.currentTarget.value);
+							}}
 							onFocus={() => setIsEmailFormExpanded(true)}
 						/>
 						<button
 							type="submit"
 							disabled={isLoading}
-							className="text-ber-darker-grey hover:text-ber-dark-grey disabled:hover:text-ber-darker-grey"
+							className={`text-ber-darker-grey hover:text-ber-dark-grey disabled:text-ber-light-grey
+								${isSendDisabled && "text-ber-light-grey hover:text-ber-light-grey"}`}
 						>
 							<SendIcon className="w-8 h-8" />
 						</button>
diff --git a/src/components/icons/send-icon.tsx b/src/components/icons/send-icon.tsx
index 852c363..5d4e582 100644
--- a/src/components/icons/send-icon.tsx
+++ b/src/components/icons/send-icon.tsx
@@ -6,16 +6,17 @@ interface SendIconProps {
 
 export const SendIcon: React.FC<SendIconProps> = ({ className }) => (
 	<svg
+		width="32"
+		height="32"
+		viewBox="0 0 32 32"
+		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
-		width="19"
-		height="19"
-		viewBox="0 0 19 19"
-		fill="currentBackground"
-		className={` ${className}`}
+		className={className}
 	>
+		<rect width="32" height="32" rx="2" fill="currentColor" />
 		<path
-			d="M18.4846 0.207954C18.8594 0.46772 19.0561 0.916743 18.9855 1.36577L16.6105 16.8033C16.5549 17.1632 16.3359 17.4787 16.0168 17.6568C15.6977 17.8349 15.3154 17.8572 14.9777 17.7162L10.5394 15.8718L7.99746 18.6216C7.66718 18.9816 7.14765 19.1003 6.69121 18.9222C6.23476 18.7441 5.93789 18.3025 5.93789 17.8126V14.7103C5.93789 14.5619 5.99355 14.4208 6.09375 14.3095L12.3133 7.52592C12.5285 7.29213 12.5211 6.93217 12.2984 6.70952C12.0758 6.48686 11.7158 6.47202 11.482 6.68354L3.93398 13.3892L0.657223 11.749C0.263863 11.5523 0.0115193 11.1589 0.000386514 10.721C-0.0107463 10.2831 0.219332 9.87495 0.597847 9.656L17.2228 0.156001C17.6199 -0.0703659 18.1098 -0.0481003 18.4846 0.207954Z"
-			fill="currentColor"
+			d="M14.625 27V10.2594L6.925 17.9594L5 16L16 5L27 16L25.075 17.9594L17.375 10.2594V27H14.625Z"
+			fill="white"
 		/>
 	</svg>
 );

From 1c314abf58e82f162dca6deb397382ed6048ba9b Mon Sep 17 00:00:00 2001
From: Raphael Arce <raphael.arce@ts.berlin>
Date: Fri, 30 Aug 2024 12:08:43 +0200
Subject: [PATCH 20/33] feat: remove email-chat toggle, make email-chat default
 in sidebar, fix: distance to top of help-button

Signed-off-by: Raphael Arce <raphael.arce@ts.berlin>
---
 src/components/chat/chat.tsx                     |  6 +++---
 .../chat/get-started/get-started-nav-links.tsx   |  2 +-
 src/components/edit/edit.tsx                     |  5 ++++-
 src/components/email-chat/email-chat.tsx         | 16 ----------------
 src/components/email/email.tsx                   | 15 ---------------
 src/components/help/help.tsx                     |  4 ++--
 src/components/sidebar-bar/navigation.tsx        |  2 +-
 7 files changed, 11 insertions(+), 39 deletions(-)

diff --git a/src/components/chat/chat.tsx b/src/components/chat/chat.tsx
index 43d7010..ff1a5a9 100644
--- a/src/components/chat/chat.tsx
+++ b/src/components/chat/chat.tsx
@@ -13,11 +13,11 @@ export const Chat: React.FC = () => {
 	const messages = getChat(currentChatId)?.messages || [];
 
 	return (
-		<div className="flex h-full flex-col items-center justify-between pt-14 py-5">
-			{messages.length === 0 && <GetStarted />}
-
+		<div className="flex h-full flex-col items-center justify-between pt-14 py-5 relative">
 			<Help />
 
+			{messages.length === 0 && <GetStarted />}
+
 			<ChatMessages />
 
 			<div className="px-5 w-full flex justify-center">
diff --git a/src/components/chat/get-started/get-started-nav-links.tsx b/src/components/chat/get-started/get-started-nav-links.tsx
index 98086e2..6a67b30 100644
--- a/src/components/chat/get-started/get-started-nav-links.tsx
+++ b/src/components/chat/get-started/get-started-nav-links.tsx
@@ -15,7 +15,7 @@ const appLinks = [
 	{
 		label: "Formuliere eine E-Mail für mich",
 		icon: <MailIcon />,
-		href: "/email",
+		href: "/email-chat",
 		backgroundColor: "bg-ber-blue hover:bg-ber-blue-darker",
 	},
 	{
diff --git a/src/components/edit/edit.tsx b/src/components/edit/edit.tsx
index d80c032..8ac341f 100644
--- a/src/components/edit/edit.tsx
+++ b/src/components/edit/edit.tsx
@@ -2,10 +2,13 @@ import React from "react";
 import { UploadedFiles } from "../uploaded-files";
 import { EditChatMessages } from "./edit-chat-messages";
 import { EditChatForm } from "./edit-chat-form";
+import { Help } from "../help/help";
 
 export const Edit: React.FC = () => {
 	return (
-		<div className="flex h-full flex-col items-center justify-between pt-14 py-5">
+		<div className="flex h-full flex-col items-center justify-between pt-14 py-5 relative">
+			<Help />
+
 			<EditChatMessages />
 
 			<div className="px-5 w-full flex justify-center">
diff --git a/src/components/email-chat/email-chat.tsx b/src/components/email-chat/email-chat.tsx
index 8f49b90..15a688a 100644
--- a/src/components/email-chat/email-chat.tsx
+++ b/src/components/email-chat/email-chat.tsx
@@ -11,22 +11,6 @@ export const EmailChat: React.FC = () => {
 			<EmailChatMessages />
 
 			<EmailChatForm />
-
-			<label className="inline-flex items-center cursor-pointer absolute top-7 md:left-5 right-5">
-				<input
-					type="checkbox"
-					value=""
-					checked={true}
-					className="sr-only peer"
-					onChange={() => {
-						window.location.href = "/email";
-					}}
-				/>
-				<div className="relative w-9 h-5 bg-ber-light-grey rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-ber-light-grey after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-ber-darker-grey"></div>
-				<span className="ms-2 text-xs font-medium text-ber-darker-grey">
-					E-Mail Chat
-				</span>
-			</label>
 		</div>
 	);
 };
diff --git a/src/components/email/email.tsx b/src/components/email/email.tsx
index dab8839..1cfab03 100644
--- a/src/components/email/email.tsx
+++ b/src/components/email/email.tsx
@@ -20,21 +20,6 @@ export const Email: React.FC = () => {
 			<EmailMessages />
 
 			<EmailForm />
-
-			<label className="inline-flex items-center cursor-pointer absolute top-7 md:left-5 right-5">
-				<input
-					type="checkbox"
-					value=""
-					className="sr-only peer"
-					onChange={() => {
-						window.location.href = "/email-chat";
-					}}
-				/>
-				<div className="relative w-9 h-5 bg-ber-light-grey rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-ber-light-grey after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-ber-darker-grey"></div>
-				<span className="ms-2 text-xs font-medium text-ber-darker-grey">
-					E-Mail Chat
-				</span>
-			</label>
 		</div>
 	);
 };
diff --git a/src/components/help/help.tsx b/src/components/help/help.tsx
index dfea585..7a0da90 100644
--- a/src/components/help/help.tsx
+++ b/src/components/help/help.tsx
@@ -11,7 +11,7 @@ export const Help: React.FC = () => {
 		<>
 			<div
 				className={`
-					absolute right-5 md:right-12 top-[4.25rem] md:top-[4.25rem]
+					absolute right-5 md:right-12 top-5
 				`}
 			>
 				<button
@@ -32,7 +32,7 @@ export const Help: React.FC = () => {
 			{isHelpOpen && (
 				<div
 					className={`
-						absolute right-0 top-12 md:right-12 md:top-20 z-50 
+						absolute right-0 md:right-12 top-0 md:top-5 z-50 
 						md:w-96 w-full md:h-[36rem] h-full
 						border border-ber-lighter-grey shadow-2xl
 						text-ber-darker-grey text-[16px]
diff --git a/src/components/sidebar-bar/navigation.tsx b/src/components/sidebar-bar/navigation.tsx
index 9c23a1c..9ada4b6 100644
--- a/src/components/sidebar-bar/navigation.tsx
+++ b/src/components/sidebar-bar/navigation.tsx
@@ -15,7 +15,7 @@ const navLinks = [
 	{
 		label: "E-Mail formulieren",
 		icon: <MailIcon />,
-		href: "/email",
+		href: "/email-chat",
 		backgroundColor: "bg-ber-blue hover:bg-ber-blue-darker",
 	},
 	{

From fdc073306486b2db4859c167d2c08702761fb92b Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Fri, 30 Aug 2024 13:20:02 +0200
Subject: [PATCH 21/33] Feat/force word break (#67)

* feat: force long words to break with hyphen

* feat: remove unnecessary css

* feat: add css for safari
---
 src/index.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index e982ef3..295d21c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,7 +4,8 @@
 
 @layer base {
 	.markdown-container p {
-		@apply m-3;
+		@apply m-3 hyphens-auto;
+		word-break: break-word;
 	}
 
 	.markdown-container ol {

From ea4ad78d7c23b47081ae6695065af9360fbeb0e0 Mon Sep 17 00:00:00 2001
From: Raphael Arce <raphael.arce@ts.berlin>
Date: Fri, 30 Aug 2024 13:04:08 +0200
Subject: [PATCH 22/33] feat: update help dialog text

Signed-off-by: Raphael Arce <raphael.arce@ts.berlin>
---
 src/components/help/qas.tsx | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/components/help/qas.tsx b/src/components/help/qas.tsx
index 1c06274..d6fb8d5 100644
--- a/src/components/help/qas.tsx
+++ b/src/components/help/qas.tsx
@@ -23,26 +23,8 @@ export const qas = [
 	},
 	{
 		question: "Wie schreibe ich mit BärGPT?",
-		answer: (
-			<>
-				<ul>
-					<li>
-						Formulieren Sie klare Anfragen (auch Prompts genannt): Die
-						Genauigkeit der Antworten von BärGPT hängt stark von der Klarheit
-						Ihres Prompts ab.
-					</li>
-					<li>
-						Nutzen Sie den Kontext: BärGPT kann auf Basis vorheriger Nachrichten
-						antworten, was einen fließenden Dialog ermöglicht.
-					</li>
-					<li>
-						Seien Sie experimentierfreudig: Die Bandbreite der
-						Anwendungsmöglichkeiten von BärGPT ist enorm. Nutzen Sie dies zu
-						Ihrem Vorteil.
-					</li>
-				</ul>
-			</>
-		),
+		answer:
+			"Stellen Sie sich BärGPT wie ein Gesprächspartner vor. Sie können einfach Ihre Frage oder Ihren Textwunsch eingeben, zum Beispiel: „Wie formuliere ich eine E-Mail an einen Kollegen?“ BärGPT gibt Ihnen dann einen Vorschlag oder Text, den Sie nutzen oder anpassen können.",
 	},
 	{
 		question: "Was ist BärGPT?",

From 6b152abc4f6d26aa70156c2d5c148906328017fc Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Fri, 30 Aug 2024 15:17:04 +0200
Subject: [PATCH 23/33] feat: add backdrop blur to splash screen (#72)

---
 src/components/dialogs/splash-screen-dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialogs/splash-screen-dialog.tsx b/src/components/dialogs/splash-screen-dialog.tsx
index 885f0d6..d5c1510 100644
--- a/src/components/dialogs/splash-screen-dialog.tsx
+++ b/src/components/dialogs/splash-screen-dialog.tsx
@@ -34,7 +34,7 @@ export const SplashScreenDialog: React.FC = () => {
 		<DefaultDialog
 			id={dialogId}
 			afterClose={hideSplashScreen}
-			className={`h-fit w-fit rounded-sm bg-white shadow-lg sm:h-fit sm:w-[540px] text-ber-darker-grey`}
+			className={`h-fit w-fit rounded-sm bg-white shadow-lg backdrop:backdrop-blur-sm sm:h-fit sm:w-[540px] text-ber-darker-grey`}
 		>
 			<div className="relative flex flex-col gap-6 rounded-sm p-8">
 				<div className="flex min-h-[63px] w-[63px] items-center justify-center bg-white border-black border">

From 449233ad6e0ac14008c8718ba587fa09da836086 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Fri, 30 Aug 2024 16:41:11 +0200
Subject: [PATCH 24/33] feat: add backdrop blur to navigation (#73)

---
 src/components/sidebar-bar/side-bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sidebar-bar/side-bar.tsx b/src/components/sidebar-bar/side-bar.tsx
index b76a9f7..01c4d4b 100644
--- a/src/components/sidebar-bar/side-bar.tsx
+++ b/src/components/sidebar-bar/side-bar.tsx
@@ -54,7 +54,7 @@ export const SideBar: React.FC = () => {
 		<div
 			className={`absolute md:relative top-0 pt-11 md:pt-0 left-0 z-20 text-ber-darker-grey ${
 				isOpen
-					? "w-full h-full backdrop-brightness-90 mh:min-w-72 md:w-72 md:backdrop-brightness-100"
+					? "w-full h-full backdrop-brightness-90 backdrop-blur-sm md:min-w-72 md:w-72 md:backdrop-blur-none md:backdrop-brightness-100"
 					: ""
 			}`}
 		>

From 17e11a4b7bf30fcbe3f0cb1d8f22acb4485a99ed Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Fri, 30 Aug 2024 16:56:52 +0200
Subject: [PATCH 25/33] Feat/text edit prompt polish (#71)

* feat: switch prompt from CODE to BLOCKQUOTE

since a code tag does not render the markdown styling, blockquote seems to be the better solution

* feat: improve response to pasted text

* feat: add intro sentence to generated text
---
 src/components/edit/edit-get-started.tsx |  2 +-
 src/index.css                            |  4 ++++
 src/system-prompts.ts                    | 19 ++++++++++++-------
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/edit/edit-get-started.tsx b/src/components/edit/edit-get-started.tsx
index 271d457..b360762 100644
--- a/src/components/edit/edit-get-started.tsx
+++ b/src/components/edit/edit-get-started.tsx
@@ -3,7 +3,7 @@ import { BaerIcon } from "../icons/bear-icon";
 
 export const EditGetStarted: React.FC = () => {
 	return (
-		<div className="flex md:w-[640px] lg:w-[768px] max-w-full flex-row overflow-auto px-5 pt-[30%]">
+		<div className="flex md:w-[640px] lg:w-[768px] max-w-full flex-row overflow-auto pt-[30%]">
 			<div className="mt-1 flex size-[35px] min-w-[35px] items-center justify-center border border-black bg-white">
 				<BaerIcon className="h-[21px] w-[21px]" />
 			</div>
diff --git a/src/index.css b/src/index.css
index 295d21c..cad035e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -69,6 +69,10 @@
 		@apply ml-10 whitespace-pre-wrap w-[90%] my-10;
 	}
 
+	.markdown-container blockquote {
+		@apply w-[90%] ml-10 my-10;
+	}
+
 	.markdown-container hr {
 		@apply m-3;
 	}
diff --git a/src/system-prompts.ts b/src/system-prompts.ts
index 067b08c..a6d0e58 100644
--- a/src/system-prompts.ts
+++ b/src/system-prompts.ts
@@ -58,7 +58,7 @@ Beispiel:
 4. **Formulierung und Anpassung:**
    - Zeige den Entwurf und frage, ob Anpassungen gewünscht sind.
      - Beispiel: *"Möchten Sie noch etwas hinzufügen oder ändern?"*
-   - Gebe den Entwurf IMMER als Markdown-Codeblock zurück.
+   - Gebe den Entwurf IMMER als Markdown-Blockquote zurück.
 
 5. Hinweis auf andere Apps:
 Wenn der Benutzer eine Anfrage stellt, die nicht in den Bereich der E-Mail fällt, leite ihn freundlich zu den passenden Apps weiter.
@@ -89,15 +89,11 @@ Dein Ziel ist es, immer präzise und freundlich zu sein, um den Verwaltungsmitar
 `,
 	EDIT_SYSTEM_PROMPT: `
 Du bist BärGPT, ein intelligenter Assistent, der Verwaltungsmitarbeitern hilft, jegliche Art von Texten effizient und klar zu bearbeiten. Dein Ziel ist es, den Bearbeitungsprozess einfach und benutzerfreundlich zu gestalten. Wenn die Anfragen des Benutzers über die Textbearbeitung hinausgehen, weist du ihn freundlich auf passende Apps hin.
+Du antwortest wenn immer so knapp und präzise wie möglich, am besten in einem Satz.
 
 Befolge dabei stets die folgenden Schritte:
 
 ### 1. Einleitung und Hilfe anbieten:
-Falls der Benutzer noch keinen Text zum Bearbeiten geschickt hat, gib einen Hinweis:
-
-Beispiel:  
-- *"Hallo! Fügen Sie den Text, den Sie bearbeiten möchten, bitte unten in das Eingabefeld ein."*
-
 Wenn der Benutzer bereits einen Text bereitgestellt hat oder eine Text Datei hochgeladen hat (gekennzeichnet durch "Datei:"), frage direkt nach der gewünschten Bearbeitungsart:
 
 Beispiel:  
@@ -110,8 +106,13 @@ Zum Beispiel:
 - Ein Wort suchen
 - Einfache Sprache"
 
+Falls der Benutzer noch keinen Text zum Bearbeiten geschickt hat, gib einen Hinweis:
+
+Beispiel:  
+- "Fügen Sie den Text, den Sie bearbeiten möchten, bitte unten in das Eingabefeld ein."
+
 ### 2. Textbearbeitung:
-Sobald der Benutzer seine Bearbeitungswünsche geäußert hat, **beziehe dich immer auf den zuletzt generierten Text** und gehe wie folgt vor:
+Sobald der Benutzer seine Bearbeitungswünsche geäußert hat, gehe wie folgt vor.
 
 - **Zusammenfassen:** Erstelle eine kompakte und verständliche Zusammenfassung des Textes.
 - **Rechtschreibung und Grammatik korrigieren** Prüfe und korrigiere den Text auf Rechtschreib- und Grammatikfehler.
@@ -119,6 +120,10 @@ Sobald der Benutzer seine Bearbeitungswünsche geäußert hat, **beziehe dich im
 - **Ein Wort suchen:** Hilf dem Benutzer, bestimmte Wörter oder Ausdrücke im Text zu finden oder zu ersetzen.
 - **Einfache Sprache:** Vereinfache den Text für eine leichtere Verständlichkeit.
 
+- Gebe den Entwurf IMMER als Markdown-Blockquote zurück.
+- Beziehe dich dabei immer auf den zuletzt generierten Text und leite kurz den generierten Text ein. 
+Beispiel: "Hier ist der zusammengefasste Text:
+
 Frage nach weiteren Wünschen, wenn nötig.
 
 ### 3. Formulierung und Anpassung:

From 716fdeab70a9c2d310f5089f74a5eec86b57f5ed Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Fri, 30 Aug 2024 17:06:41 +0200
Subject: [PATCH 26/33] feat: text changes (#74)

---
 src/components/help/qas.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/help/qas.tsx b/src/components/help/qas.tsx
index d6fb8d5..636be61 100644
--- a/src/components/help/qas.tsx
+++ b/src/components/help/qas.tsx
@@ -24,11 +24,11 @@ export const qas = [
 	{
 		question: "Wie schreibe ich mit BärGPT?",
 		answer:
-			"Stellen Sie sich BärGPT wie ein Gesprächspartner vor. Sie können einfach Ihre Frage oder Ihren Textwunsch eingeben, zum Beispiel: „Wie formuliere ich eine E-Mail an einen Kollegen?“ BärGPT gibt Ihnen dann einen Vorschlag oder Text, den Sie nutzen oder anpassen können.",
+			"Stellen Sie sich BärGPT wie einen Gesprächspartner vor. Sie können einfach Ihre Frage oder Ihren Textwunsch eingeben, zum Beispiel: „Wie formuliere ich eine E-Mail an einen Kollegen?“ BärGPT erstellt Ihnen dann einen Vorschlag oder Text, den Sie nutzen oder anpassen können.",
 	},
 	{
 		question: "Was ist BärGPT?",
 		answer:
-			"BärGPT ist ein Computerprogramm, das auf einer sogenannten „künstlichen Intelligenz“ (KI) basiert. Einfach gesagt, ist es ein fortschrittlicher digitaler Assistent, der Texte verstehen und beantworten kann, ähnlich wie ein Mensch. BärGPT kann Ihnen helfen, indem es Informationen bereitstellt, Fragen beantwortet, Texte schreibt oder Aufgaben automatisiert.",
+			"BärGPT ist eine Web-Applikation, die auf einer sogenannten „Künstlichen Intelligenz“ (KI) basiert. Einfach gesagt, ist es ein fortschrittlicher digitaler Assistent, der Texte verstehen und beantworten kann, ähnlich wie ein Mensch. BärGPT kann Ihnen helfen, indem es Informationen bereitstellt, Fragen beantwortet, Texte schreibt oder Aufgaben automatisiert.",
 	},
 ];

From 9b992a03accab1ff9235c76fdc2d9b55e0f5c119 Mon Sep 17 00:00:00 2001
From: Jonas Jaszkowic <jonas.jaszkowic@ts.berlin>
Date: Mon, 23 Sep 2024 16:56:47 +0200
Subject: [PATCH 27/33] fix: persist settings (#76)

* fix: persist settings

* fix: build issues

* chore: revert types
---
 src/store/current-llm-store.ts | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/store/current-llm-store.ts b/src/store/current-llm-store.ts
index f7b7c19..11e916f 100644
--- a/src/store/current-llm-store.ts
+++ b/src/store/current-llm-store.ts
@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { useErrorStore } from "./error-store";
+import { persist } from "zustand/middleware";
 
 export interface availableLLM {
 	identifier: string;
@@ -19,15 +20,18 @@ interface CurrentLLMStore {
 
 const defaultModelIdentifier = "azure-gpt-4o-mini";
 
-export const useCurrentLLMStore = create<CurrentLLMStore>()((set) => {
-	getAvailableLLMs().catch(console.error);
+export const useCurrentLLMStore = create<CurrentLLMStore>()(
+	persist(
+		(set) => ({
+			currentLLM: "",
+			setCurrentLLM: (model: string) => set({ currentLLM: model }),
+			availableLLMs: [],
+		}),
+		{ name: "current-llm-store" },
+	),
+);
 
-	return {
-		currentLLM: "",
-		setCurrentLLM: (model) => set({ currentLLM: model }),
-		availableLLMs: [],
-	};
-});
+getAvailableLLMs().catch(console.error);
 
 async function getAvailableLLMs() {
 	const { handleError } = useErrorStore.getState();
@@ -66,7 +70,10 @@ async function getAvailableLLMs() {
 			return;
 		}
 
-		useCurrentLLMStore.setState({ currentLLM: models[0].identifier });
+		const currentLlm = useCurrentLLMStore.getState().currentLLM;
+		if (currentLlm === "") {
+			useCurrentLLMStore.setState({ currentLLM: defaultModel.identifier });
+		}
 	} catch (error) {
 		handleError(error);
 	}

From f77f10e3d3c141ca245bc2bbd70e0d08ba5c59b4 Mon Sep 17 00:00:00 2001
From: Jonas Jaszkowic <jonas.jaszkowic@ts.berlin>
Date: Wed, 25 Sep 2024 10:57:42 +0200
Subject: [PATCH 28/33] feat: error handling for llm health (#78)

* feat: logic for choosing first healthy model

* feat: automatically open settings when selected model is unhealthy

* fix: types
---
 .../settings-dialog/settings-dialog.tsx       | 25 ++++++++-
 .../settings-dialog/settings-option.tsx       | 32 ++++++++---
 src/store/api.ts                              |  2 +-
 src/store/current-llm-store.ts                | 55 ++++++++++++++-----
 src/store/error-store.tsx                     |  8 +++
 5 files changed, 98 insertions(+), 24 deletions(-)

diff --git a/src/components/dialogs/settings-dialog/settings-dialog.tsx b/src/components/dialogs/settings-dialog/settings-dialog.tsx
index 06b1d18..932667d 100644
--- a/src/components/dialogs/settings-dialog/settings-dialog.tsx
+++ b/src/components/dialogs/settings-dialog/settings-dialog.tsx
@@ -2,11 +2,13 @@ import React from "react";
 import { DefaultDialog } from "../default-dialog";
 import { useCurrentLLMStore } from "../../../store/current-llm-store";
 import { SettingsOption } from "./settings-option";
+import { ErrorIcon } from "../../icons/error-icon";
+import { RefreshIcon } from "../../icons/refresh-icon";
 
 export const settingsDialogId = "settings-dialog";
 
 export const SettingsDialog: React.FC = () => {
-	const { availableLLMs } = useCurrentLLMStore();
+	const { availableLLMs, currentLLM, getAvailableLLMs } = useCurrentLLMStore();
 
 	return (
 		<DefaultDialog
@@ -16,6 +18,7 @@ export const SettingsDialog: React.FC = () => {
 			<div className="w-full flex justify-center">
 				<div className="flex flex-col max-w-[600px] gap-y-5 md:gap-y-5">
 					<div className="text-2xl font-bold">Einstellungen</div>
+
 					<div className="text-lg flex flex-col gap-3">
 						<div className="font-bold">Modellauswahl</div>
 						<p>
@@ -26,12 +29,30 @@ export const SettingsDialog: React.FC = () => {
 							entspricht.
 						</p>
 					</div>
-
 					<div className="flex flex-col gap-x-2">
 						{availableLLMs.map((option) => (
 							<SettingsOption key={option.identifier} option={option} />
 						))}
 					</div>
+					{currentLLM && !currentLLM.status.healthy && (
+						<div className="text-sm md:text-lg">
+							<div className="flex w-full flex-row">
+								<div className="w-full flex flex-row items-center justify-between gap-4 rounded-sm border-4 border-ber-orange bg-white px-6 py-4 text-[16px] font-semibold text-ber-darker-grey shadow-md">
+									<ErrorIcon />
+									Das derzeit gewählte Modell ist temporär nicht verfügbar,
+									bitte wählen Sie ein alternatives Modell.
+									<button
+										className="pl-8"
+										onClick={async () => {
+											await getAvailableLLMs();
+										}}
+									>
+										<RefreshIcon />
+									</button>
+								</div>
+							</div>
+						</div>
+					)}
 				</div>
 			</div>
 		</DefaultDialog>
diff --git a/src/components/dialogs/settings-dialog/settings-option.tsx b/src/components/dialogs/settings-dialog/settings-option.tsx
index f70e06c..0dd2c51 100644
--- a/src/components/dialogs/settings-dialog/settings-option.tsx
+++ b/src/components/dialogs/settings-dialog/settings-option.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import {
-	availableLLM,
+	AvailableLLM,
 	useCurrentLLMStore,
 } from "../../../store/current-llm-store";
 import { CheckSolidIcon } from "../../icons/check-solid-icon";
@@ -9,18 +9,18 @@ import { CheckIcon } from "../../icons/check-icon";
 import { UnavailableIcon } from "../../icons/unavailable-icon";
 
 interface SettingsOptionProps {
-	option: availableLLM;
+	option: AvailableLLM;
 }
 
 export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
-	const { currentLLM, setCurrentLLM } = useCurrentLLMStore();
+	const { currentLLM, setCurrentLLM, availableLLMs } = useCurrentLLMStore();
 
-	const isChecked = option.identifier === currentLLM;
+	const isChecked = option.identifier === currentLLM?.identifier;
 
 	return (
 		<label
 			htmlFor={option.identifier}
-			className={`flex flex-row p-3 md:p-[18px] cursor-pointer gap-5 hover:bg-ber-lighter-grey  ${isChecked && "bg-ber-lighter-grey"}`}
+			className={`flex flex-row p-3 md:p-[18px] ${option.status.healthy ? "cursor-pointer" : "cursor-not-allowed"} gap-5 hover:bg-ber-lighter-grey  ${isChecked && "bg-ber-lighter-grey"}`}
 		>
 			<div className="mt-1">
 				{isChecked && <CheckSolidIcon />}
@@ -29,12 +29,21 @@ export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
 
 			<div className="flex flex-col gap-2">
 				<div className="flex flex-wrap gap-y-2 gap-x-5 mb-2">
-					<div className="font-bold text-lg">{option.identifier}</div>
+					<div
+						className={`font-bold text-lg ${option.status.healthy ? "" : "line-through"}`}
+					>
+						{option.identifier}
+					</div>
 					{option.provider === "Azure" && (
 						<div className="text-white bg-ber-green-darker rounded-full px-2 text-sm flex items-center">
 							empfohlen
 						</div>
 					)}
+					{!option.status.healthy && (
+						<div className="text-white bg-ber-red rounded-full px-2 text-sm flex items-center">
+							temporär nicht verfügbar
+						</div>
+					)}
 				</div>
 
 				<p className="text-sm">{option.description}</p>
@@ -60,8 +69,15 @@ export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
 					name="model"
 					value={option.identifier}
 					className="appearance-none"
-					checked={option.identifier === currentLLM}
-					onChange={(e) => setCurrentLLM(e.target.value)}
+					checked={option.identifier === currentLLM?.identifier}
+					onChange={(e) => {
+						const foundLllm = availableLLMs.find(
+							(llm) => llm.identifier === e.target.value,
+						);
+						if (foundLllm && foundLllm.status.healthy) {
+							setCurrentLLM(foundLllm);
+						}
+					}}
 				/>
 			</div>
 		</label>
diff --git a/src/store/api.ts b/src/store/api.ts
index 1051857..6254676 100644
--- a/src/store/api.ts
+++ b/src/store/api.ts
@@ -40,7 +40,7 @@ export async function streamChatResponse() {
 			headers: {
 				"Content-Type": "application/json",
 				"x-api-key": import.meta.env.VITE_X_API_KEY,
-				llm: currentLLM,
+				llm: currentLLM?.identifier ?? "",
 			},
 			body: JSON.stringify({
 				messages: [
diff --git a/src/store/current-llm-store.ts b/src/store/current-llm-store.ts
index 11e916f..8607beb 100644
--- a/src/store/current-llm-store.ts
+++ b/src/store/current-llm-store.ts
@@ -1,8 +1,8 @@
 import { create } from "zustand";
-import { useErrorStore } from "./error-store";
 import { persist } from "zustand/middleware";
+import { useErrorStore } from "./error-store";
 
-export interface availableLLM {
+export interface AvailableLLM {
 	identifier: string;
 	baseModelName: string;
 	provider: string;
@@ -10,12 +10,19 @@ export interface availableLLM {
 	isOpenSource: boolean;
 	description: string;
 	serverLocation: string;
+	status: {
+		status: number;
+		healthy: boolean;
+		welcomeMessage: string | undefined;
+		responseTimeMs: number | undefined;
+	};
 }
 
 interface CurrentLLMStore {
-	currentLLM: string;
-	setCurrentLLM: (model: string) => void;
-	availableLLMs: availableLLM[];
+	currentLLM: AvailableLLM | undefined;
+	setCurrentLLM: (llm: AvailableLLM) => void;
+	availableLLMs: AvailableLLM[];
+	getAvailableLLMs: () => Promise<void>;
 }
 
 const defaultModelIdentifier = "azure-gpt-4o-mini";
@@ -23,9 +30,10 @@ const defaultModelIdentifier = "azure-gpt-4o-mini";
 export const useCurrentLLMStore = create<CurrentLLMStore>()(
 	persist(
 		(set) => ({
-			currentLLM: "",
-			setCurrentLLM: (model: string) => set({ currentLLM: model }),
+			currentLLM: undefined,
+			setCurrentLLM: (llm: AvailableLLM) => set({ currentLLM: llm }),
 			availableLLMs: [],
+			getAvailableLLMs: getAvailableLLMs,
 		}),
 		{ name: "current-llm-store" },
 	),
@@ -56,7 +64,7 @@ async function getAvailableLLMs() {
 			return;
 		}
 
-		const { models } = (await response.json()) as { models: availableLLM[] };
+		const { models } = (await response.json()) as { models: AvailableLLM[] };
 
 		const sortedAvailableLLMs = sortByDefaultModel(models);
 
@@ -66,20 +74,41 @@ async function getAvailableLLMs() {
 			(model) => model.identifier === defaultModelIdentifier,
 		);
 
-		if (!defaultModel) {
+		const currentLlm = useCurrentLLMStore.getState().currentLLM;
+
+		if (!currentLlm) {
+			// No selected LLM, use healthy default model
+			if (defaultModel && defaultModel.status.healthy) {
+				useCurrentLLMStore.setState({ currentLLM: defaultModel });
+				return;
+			}
+
+			(
+				document.getElementById("settings-dialog") as HTMLDialogElement
+			).showModal();
 			return;
 		}
 
-		const currentLlm = useCurrentLLMStore.getState().currentLLM;
-		if (currentLlm === "") {
-			useCurrentLLMStore.setState({ currentLLM: defaultModel.identifier });
+		if (currentLlm) {
+			const refreshedCurrentLlm = sortedAvailableLLMs.find(
+				(llm) => llm.identifier === currentLlm.identifier,
+			);
+			if (refreshedCurrentLlm) {
+				useCurrentLLMStore.setState({ currentLLM: refreshedCurrentLlm });
+				if (refreshedCurrentLlm.status.healthy) {
+					return;
+				}
+			}
+			(
+				document.getElementById("settings-dialog") as HTMLDialogElement
+			).showModal();
 		}
 	} catch (error) {
 		handleError(error);
 	}
 }
 
-function sortByDefaultModel(models: availableLLM[]) {
+function sortByDefaultModel(models: AvailableLLM[]) {
 	const index = models.findIndex(
 		(model) => model.identifier === defaultModelIdentifier,
 	);
diff --git a/src/store/error-store.tsx b/src/store/error-store.tsx
index 12d9cbe..dd20f58 100644
--- a/src/store/error-store.tsx
+++ b/src/store/error-store.tsx
@@ -27,6 +27,14 @@ const errorMessages: { [key: string]: string } = {
 	wrong_password: "Falsches Passwort.",
 	"Failed to fetch":
 		"Etwas ist schief gelaufen, bitte starten Sie einen neuen Chat.",
+	selected_llm_not_healthy:
+		"Das ausgewählte Modell ist temporär nicht verfügbar, bitte wählen Sie ein alternatives Modell in den Einstellungen.",
+	changed_to_default_llm:
+		"Das ausgewählte Modell ist temporär nicht verfügbar, es wurde auf das Standardmodell zurückgesetzt.",
+	changed_to_first_healthy_llm:
+		"Das Standardmodell ist temporär nicht verfügbar, es wurde auf das erste verfügbare Modell zurückgesetzt.",
+	no_healthy_llm_available:
+		"Temporär keine Modelle verfügbar. Bitte versuchen Sie es später erneut.",
 };
 
 export const useErrorStore = create<ErrorStore>()((set, get) => ({

From 7f911b782eefcc1d49fedf8ba7e27c5e5b104f91 Mon Sep 17 00:00:00 2001
From: Jonas Jaszkowic <jonas.jaszkowic@ts.berlin>
Date: Thu, 26 Sep 2024 15:47:52 +0200
Subject: [PATCH 29/33] feat: count token and show warning (#79)

* fix: settings store (staging to prod) (#77)

fix: settings store (staging to prod) (#77)

* feat: count tokens and show error

* feat: refactor, add token capacity warning

* feat: capacity warning for chat, edit, email

* fix: useMemo

* fix: types
---
 package-lock.json                             | 28 ++++++++++++++
 package.json                                  |  1 +
 src/components/capacity-error-hint.tsx        | 20 ++++++++++
 src/components/chat/chat-form.tsx             | 12 ++++--
 src/components/chat/chat.tsx                  | 24 +++++++++---
 src/components/edit/edit.tsx                  | 24 ++++++++++--
 src/components/email-chat/email-chat-form.tsx |  4 +-
 src/components/email-chat/email-chat.tsx      | 23 +++++++++--
 src/store/chat-history-store.ts               | 38 ++++++++++++++++++-
 src/store/current-llm-store.ts                |  1 +
 src/store/types.ts                            |  2 +
 11 files changed, 158 insertions(+), 19 deletions(-)
 create mode 100644 src/components/capacity-error-hint.tsx

diff --git a/package-lock.json b/package-lock.json
index 22f9f82..8db460c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "0.0.0",
 			"dependencies": {
 				"date-fns": "3.6.0",
+				"js-tiktoken": "1.0.14",
 				"react": "18.3.1",
 				"react-dom": "18.3.1",
 				"react-markdown": "9.0.1",
@@ -1897,6 +1898,25 @@
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
 			"dev": true
 		},
+		"node_modules/base64-js": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+			"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
 		"node_modules/binary-extensions": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -4020,6 +4040,14 @@
 				"jiti": "bin/jiti.js"
 			}
 		},
+		"node_modules/js-tiktoken": {
+			"version": "1.0.14",
+			"resolved": "https://registry.npmjs.org/js-tiktoken/-/js-tiktoken-1.0.14.tgz",
+			"integrity": "sha512-Pk3l3WOgM9joguZY2k52+jH82RtABRgB5RdGFZNUGbOKGMVlNmafcPA3b0ITcCZPu1L9UclP1tne6aw7ZI4Myg==",
+			"dependencies": {
+				"base64-js": "^1.5.1"
+			}
+		},
 		"node_modules/js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/package.json b/package.json
index eb57ebf..d6033a3 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
 	},
 	"dependencies": {
 		"date-fns": "3.6.0",
+		"js-tiktoken": "1.0.14",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"react-markdown": "9.0.1",
diff --git a/src/components/capacity-error-hint.tsx b/src/components/capacity-error-hint.tsx
new file mode 100644
index 0000000..3c1db9c
--- /dev/null
+++ b/src/components/capacity-error-hint.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+interface CapacityErrorProps {
+	tokenCapacity: number;
+}
+export const CapacityError: React.FC<CapacityErrorProps> = ({
+	tokenCapacity,
+}) => {
+	return (
+		<div className="md:w-[640px] lg:w-[768px] w-full flex flex-row gap-4 rounded-sm border-4 border-ber-orange bg-white px-6 py-3 text-sm text-ber-darker-grey shadow-md mb-2 mx-5 items-center">
+			<div className="w-full flex justify-center">
+				Die maximale Länge dieser Konversation ist {tokenCapacity < 1 && "bald"}{" "}
+				erreicht.
+				<a href="/" className="mx-1 underline">
+					Bitte starten Sie einen neuen Chat.
+				</a>
+			</div>
+		</div>
+	);
+};
diff --git a/src/components/chat/chat-form.tsx b/src/components/chat/chat-form.tsx
index b34fc75..6a7d9dd 100644
--- a/src/components/chat/chat-form.tsx
+++ b/src/components/chat/chat-form.tsx
@@ -41,7 +41,13 @@ async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
 	setIsLoading(false);
 }
 
-export const ChatForm: React.FC = () => {
+interface ChatFormProps {
+	isDisabledDueToExceededTokenCapacity: boolean;
+}
+
+export const ChatForm: React.FC<ChatFormProps> = ({
+	isDisabledDueToExceededTokenCapacity,
+}) => {
 	const { isLoading: isGPTResponseLoading } = useIsLoadingStore();
 	const [isSendDisabled, setIsSendDisabled] = useState(true);
 
@@ -71,9 +77,9 @@ export const ChatForm: React.FC = () => {
 
 			<button
 				type="submit"
-				disabled={isLoading}
+				disabled={isLoading || isDisabledDueToExceededTokenCapacity}
 				className={`text-ber-darker-grey hover:text-ber-dark-grey disabled:text-ber-light-grey
-					${isSendDisabled && files.length === 0 && "text-ber-light-grey hover:text-ber-light-grey"}`}
+					${isDisabledDueToExceededTokenCapacity || (isSendDisabled && files.length === 0 && "text-ber-light-grey hover:text-ber-light-grey")}`}
 			>
 				<SendIcon className="w-8 h-8" />
 			</button>
diff --git a/src/components/chat/chat.tsx b/src/components/chat/chat.tsx
index ff1a5a9..e2bf860 100644
--- a/src/components/chat/chat.tsx
+++ b/src/components/chat/chat.tsx
@@ -1,17 +1,23 @@
-import React from "react";
-import { GetStarted } from "./get-started/get-started";
+import React, { useMemo } from "react";
 import { useChatHistoryStore } from "../../store/chat-history-store";
 import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
+import { CapacityError } from "../capacity-error-hint";
+import { Help } from "../help/help";
 import { UploadedFiles } from "../uploaded-files";
 import { ChatForm } from "./chat-form";
 import { ChatMessages } from "./chat-messages";
-import { Help } from "../help/help";
+import { GetStarted } from "./get-started/get-started";
 
 export const Chat: React.FC = () => {
-	const { getChat } = useChatHistoryStore();
+	const { getChat, getFreeChatTokenCapacity, tokenCapacityWarningThreshold } =
+		useChatHistoryStore();
 	const { currentChatId } = useCurrentChatIdStore();
 	const messages = getChat(currentChatId)?.messages || [];
 
+	const freeChatTokenCapacity = useMemo(() => {
+		return getFreeChatTokenCapacity();
+	}, [currentChatId]);
+
 	return (
 		<div className="flex h-full flex-col items-center justify-between pt-14 py-5 relative">
 			<Help />
@@ -20,11 +26,17 @@ export const Chat: React.FC = () => {
 
 			<ChatMessages />
 
-			<div className="px-5 w-full flex justify-center">
+			<div className="px-5 w-full flex flex-col justify-center items-center">
+				{freeChatTokenCapacity > tokenCapacityWarningThreshold && (
+					<CapacityError tokenCapacity={freeChatTokenCapacity}></CapacityError>
+				)}
+
 				<div className="md:w-[640px] lg:w-[768px] w-full z-10 flex flex-col bg-ber-lighter-grey">
 					<UploadedFiles />
 
-					<ChatForm />
+					<ChatForm
+						isDisabledDueToExceededTokenCapacity={freeChatTokenCapacity >= 1}
+					/>
 				</div>
 			</div>
 		</div>
diff --git a/src/components/edit/edit.tsx b/src/components/edit/edit.tsx
index 8ac341f..90fdb8a 100644
--- a/src/components/edit/edit.tsx
+++ b/src/components/edit/edit.tsx
@@ -1,17 +1,33 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { useChatHistoryStore } from "../../store/chat-history-store";
+import { CapacityError } from "../capacity-error-hint";
+import { Help } from "../help/help";
 import { UploadedFiles } from "../uploaded-files";
-import { EditChatMessages } from "./edit-chat-messages";
 import { EditChatForm } from "./edit-chat-form";
-import { Help } from "../help/help";
+import { EditChatMessages } from "./edit-chat-messages";
+import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
 
 export const Edit: React.FC = () => {
+	const { currentChatId } = useCurrentChatIdStore();
+
+	const { getFreeChatTokenCapacity, tokenCapacityWarningThreshold } =
+		useChatHistoryStore();
+
+	const freeChatTokenCapacity = useMemo(() => {
+		return getFreeChatTokenCapacity();
+	}, [currentChatId]);
+
 	return (
 		<div className="flex h-full flex-col items-center justify-between pt-14 py-5 relative">
 			<Help />
 
 			<EditChatMessages />
 
-			<div className="px-5 w-full flex justify-center">
+			<div className="px-5 w-full flex flex-col justify-center items-center">
+				{freeChatTokenCapacity > tokenCapacityWarningThreshold && (
+					<CapacityError tokenCapacity={freeChatTokenCapacity}></CapacityError>
+				)}
+
 				<div className="md:w-[640px] lg:w-[768px] w-full z-10 flex flex-col bg-ber-lighter-grey">
 					<UploadedFiles />
 
diff --git a/src/components/email-chat/email-chat-form.tsx b/src/components/email-chat/email-chat-form.tsx
index 2a6732b..739d81e 100644
--- a/src/components/email-chat/email-chat-form.tsx
+++ b/src/components/email-chat/email-chat-form.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from "react";
-import { SendIcon } from "../icons/send-icon";
-import { useIsLoadingStore } from "../../store/is-loading-store";
 import { streamChatResponse } from "../../store/api";
 import { useChatHistoryStore } from "../../store/chat-history-store";
 import { useHasUserScrolledStore } from "../../store/has-user-scrolled-store";
+import { useIsLoadingStore } from "../../store/is-loading-store";
+import { SendIcon } from "../icons/send-icon";
 
 const { setIsLoading } = useIsLoadingStore.getState();
 const { saveMessage } = useChatHistoryStore.getState();
diff --git a/src/components/email-chat/email-chat.tsx b/src/components/email-chat/email-chat.tsx
index 15a688a..422d33e 100644
--- a/src/components/email-chat/email-chat.tsx
+++ b/src/components/email-chat/email-chat.tsx
@@ -1,16 +1,33 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { useChatHistoryStore } from "../../store/chat-history-store";
+import { CapacityError } from "../capacity-error-hint";
+import { Help } from "../help/help";
 import { EmailChatForm } from "./email-chat-form";
 import { EmailChatMessages } from "./email-chat-messages";
-import { Help } from "../help/help";
+import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
 
 export const EmailChat: React.FC = () => {
+	const { currentChatId } = useCurrentChatIdStore();
+
+	const { getFreeChatTokenCapacity, tokenCapacityWarningThreshold } =
+		useChatHistoryStore();
+
+	const freeChatTokenCapacity = useMemo(() => {
+		return getFreeChatTokenCapacity();
+	}, [currentChatId]);
+
 	return (
 		<div className="flex h-full flex-col items-center justify-between pt-16 pb-5 relative">
 			<Help />
 
 			<EmailChatMessages />
 
-			<EmailChatForm />
+			<div>
+				{freeChatTokenCapacity > tokenCapacityWarningThreshold && (
+					<CapacityError tokenCapacity={0.8}></CapacityError>
+				)}
+				<EmailChatForm />
+			</div>
 		</div>
 	);
 };
diff --git a/src/store/chat-history-store.ts b/src/store/chat-history-store.ts
index a21b982..1a6f5aa 100644
--- a/src/store/chat-history-store.ts
+++ b/src/store/chat-history-store.ts
@@ -1,3 +1,4 @@
+import { useCurrentLLMStore } from "./current-llm-store";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { Chat, Message } from "./types";
@@ -5,15 +6,24 @@ import { useCurrentChatIdStore } from "./current-chat-id-store";
 import { getStorageKey } from "./storage";
 import { useErrorStore } from "./error-store";
 import { trackInteraction } from "../analytics/matomo";
+import { getEncoding } from "js-tiktoken";
 
 const STORAGE_KEY = getStorageKey();
 const { handleError } = useErrorStore.getState();
 
+// We use cl100k_base as the tokenizer, which should give use
+// a good estimation for both gpt and llama models
+const tokenizer = getEncoding("cl100k_base");
+
 interface ChatHistoryStore {
 	chatHistory: Chat[];
 
 	getChat: (chatId: string | null) => Chat | undefined;
 
+	getFreeChatTokenCapacity: () => number;
+
+	tokenCapacityWarningThreshold: number;
+
 	createChat: (args: { fileName?: string; content: string }) => string;
 
 	updateChat: (chat: Chat) => void;
@@ -55,6 +65,21 @@ export const useChatHistoryStore = create(
 				return get().chatHistory.find((chat) => chat.id === chatId);
 			},
 
+			tokenCapacityWarningThreshold: 0.8,
+
+			getFreeChatTokenCapacity: () => {
+				const messages =
+					get().getChat(useCurrentChatIdStore.getState().currentChatId)
+						?.messages ?? [];
+				const tokens = messages.map((message) => message.tokenCount);
+				const tokenCount = tokens.reduce((acc, val) => acc + val, 0);
+				const llm = useCurrentLLMStore.getState().currentLLM;
+				if (llm) {
+					return tokenCount / llm.contextSize;
+				}
+				return 0;
+			},
+
 			createChat: ({ fileName, content }) => {
 				const newChat = _createChat({ fileName, content });
 
@@ -100,6 +125,7 @@ export const useChatHistoryStore = create(
 					fileName,
 					content,
 					role,
+					tokenCount: tokenizer.encode(content).length,
 				});
 
 				get().updateChat(updatedChat);
@@ -117,7 +143,13 @@ export const useChatHistoryStore = create(
 				}
 
 				const updatedMessages = chat.messages.map((message) =>
-					message.id === messageId ? { ...message, content } : message,
+					message.id === messageId
+						? {
+								...message,
+								content,
+								tokenCount: tokenizer.encode(content).length,
+							}
+						: message,
 				);
 
 				const updatedChat = {
@@ -216,6 +248,7 @@ function _createChat({
 				role: "user",
 				type: fileName ? "file" : "text",
 				timestamp,
+				tokenCount: tokenizer.encode(content).length,
 			} as Message,
 		],
 		timestamp,
@@ -228,12 +261,14 @@ function _addMessageToChat({
 	fileName,
 	content,
 	role,
+	tokenCount,
 }: {
 	chat: Chat;
 	messageId: string | undefined;
 	fileName?: string;
 	content: string;
 	role: string;
+	tokenCount: number;
 }) {
 	const timestamp = new Date().toISOString();
 
@@ -248,6 +283,7 @@ function _addMessageToChat({
 				role,
 				timestamp,
 				type: fileName ? "file" : "text",
+				tokenCount,
 			} as Message,
 		],
 		timestamp,
diff --git a/src/store/current-llm-store.ts b/src/store/current-llm-store.ts
index 8607beb..074a6fb 100644
--- a/src/store/current-llm-store.ts
+++ b/src/store/current-llm-store.ts
@@ -10,6 +10,7 @@ export interface AvailableLLM {
 	isOpenSource: boolean;
 	description: string;
 	serverLocation: string;
+	contextSize: number;
 	status: {
 		status: number;
 		healthy: boolean;
diff --git a/src/store/types.ts b/src/store/types.ts
index 2c33270..e335366 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -12,6 +12,7 @@ export type FileMessage = {
 	type: "file";
 	content: string;
 	timestamp: string;
+	tokenCount: number;
 };
 
 export type TextMessage = {
@@ -20,6 +21,7 @@ export type TextMessage = {
 	type: "text";
 	content: string;
 	timestamp: string;
+	tokenCount: number;
 };
 
 export type Message = FileMessage | TextMessage;

From 6b7408ad083482765a14e9173bfa8fd68183250e Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Mon, 30 Sep 2024 10:16:20 +0200
Subject: [PATCH 30/33] feat: update faq  (#80)

* feat: update faq data privacy

* feat: update FAQ use cases
---
 src/components/dialogs/faq-dialog/qas.tsx | 61 +++++++++++++++++++++--
 1 file changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/components/dialogs/faq-dialog/qas.tsx b/src/components/dialogs/faq-dialog/qas.tsx
index 2ba5436..ac365e0 100644
--- a/src/components/dialogs/faq-dialog/qas.tsx
+++ b/src/components/dialogs/faq-dialog/qas.tsx
@@ -12,8 +12,40 @@ export const qas = [
 	{
 		question:
 			"Was muss ich bei der Nutzung in Sachen Datenschutz und Datensicherheit beachten?",
-		answer:
-			"BärGPT nutzt aktuell eine europäische Instanz des Sprachmodells GPT 4o-mini des Anbieters OpenAI. Das Modell wird in einem schwedischen Rechenzentrum betrieben und liegt damit im DSGVO-Raum. Eingegebene Daten werden nicht gespeichert und nicht zu Trainingszwecken verwendet. Damit bietet das Modell ein höheres Datenschutzniveau als vergleichbare Angebote aus den USA. Es ist jedoch zu berücksichtigen, dass das zugrundeliegende KI-Modell nicht im sicheren Berliner Landesnetz betrieben wird. Personenbezogene oder anderweitig sensible Daten, sowie Daten, die ausschließlich für die Nutzung im Berliner Landesnetz vorgesehen sind, dürfen nicht eingegeben werden.",
+		answer: (
+			<div className="flex flex-col gap-y-3">
+				<p>
+					BärGPT bietet Nutzer:innen verschiedene Large Language Modelle zur
+					Auswahl, die sich bezüglich des Datenschutzes unterscheiden.
+				</p>
+				<p>
+					Das Modell <b>azure-gpt-4o-mini</b> wird von Microsoft in einem
+					schwedischen Rechenzentrum betrieben und liegt damit im DSGVO-Raum.
+					Eingegebene Daten werden weder gespeichert noch zu Trainingszwecken
+					verwendet. Damit bietet das Modell ein höheres Datenschutzniveau als
+					vergleichbare Angebote aus den USA.
+				</p>
+				<p>
+					Das Modell <b>openai-gpt-4o-mini</b> bietet die gleiche
+					Funktionalität, wird jedoch von OpenAI selbst betrieben. Der
+					Serverstandort ist hier in den Vereinigten Staaten. Dieses Modell
+					sollte lediglich zu Vergleichszwecken genutzt werden und bietet
+					ansonsten keine Vorteile gegenüber dem Modell von Microsoft.
+				</p>
+				<p>
+					Das Modell <b>citylab-macstudio-llama-3.1</b> wird datenschutzkonform
+					vom CityLAB Berlin gehostet. Es handelt sich um ein Open
+					Source-Modell, welches in der Qualität oft mit den kommerziellen
+					Angeboten mithalten kann.
+				</p>
+				<p>
+					Es ist zu berücksichtigen, dass keines der verfügbaren KI-Modelle im
+					Berliner Landesnetz betrieben wird. Personenbezogene oder anderweitig
+					sensible Daten, sowie Daten, die ausschließlich für die Nutzung im
+					Berliner Landesnetz vorgesehen sind, dürfen nicht eingegeben werden.
+				</p>
+			</div>
+		),
 	},
 	{
 		question:
@@ -23,7 +55,28 @@ export const qas = [
 	},
 	{
 		question: "Kann BärGPT auch für andere Anwendungsfälle genutzt werden?",
-		answer:
-			"BärGPT ist eine flexible KI-Infrastruktur und kann prinzipiell für verschiedene Anwendungsfälle und Kontexte angepasst und weiterentwickelt werden. Sie haben eine Idee für einen speziellen Anwendungsfall, bei dem BärGPT unterstützen kann? Dann freuen wir uns über eine Nachricht.",
+		answer: (
+			<div className="flex flex-col gap-y-3">
+				<p>
+					BärGPT ist eine flexible KI-Infrastruktur und kann prinzipiell für
+					verschiedene Anwendungsfälle und Kontexte angepasst und
+					weiterentwickelt werden. Sie haben eine Idee für einen speziellen
+					Anwendungsfall, bei dem BärGPT unterstützen kann? Dann freuen wir uns
+					über eine Nachricht.
+				</p>
+				<p>
+					Allgemeine Hinweise und Empfehlungen zum Umgang mit generativen
+					KI-Anwendungen in der Berliner Verwaltung finden Sie in der{" "}
+					<a
+						target="_blank"
+						rel="noreferrer"
+						className="text-ber-mid-grey underline hover:text-ber-darker-grey"
+						href="https://www.berlin.de/politik-und-verwaltung/rundschreiben/index.php?category=RBmSKzl&issue_no=2&issue_year=2024&send=1"
+					>
+						Rundschreibendatenbank des Landes Berlin.
+					</a>
+				</p>
+			</div>
+		),
 	},
 ];

From bc704cdbddce8b24aa4de7cc78a51ee50d6f87f3 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Mon, 30 Sep 2024 11:16:34 +0200
Subject: [PATCH 31/33] fix: user scrolling only recognized upwards (#81)

* fix: user scrolling only recognized upwards

* feat: disable smooth scroll for safari

* feat: change name to currentScrollTop

* fix: input window on mobile full width

* feat: change name to previousScrollTop

* feat: simplify readablity
---
 src/components/chat/chat-messages.tsx         | 46 ++++++++++---------
 src/components/edit/edit-chat-messages.tsx    | 46 ++++++++++---------
 .../email-chat/email-chat-messages.tsx        | 45 +++++++++---------
 src/components/email-chat/email-chat.tsx      |  2 +-
 src/components/email/email-messages.tsx       | 45 +++++++++---------
 5 files changed, 97 insertions(+), 87 deletions(-)

diff --git a/src/components/chat/chat-messages.tsx b/src/components/chat/chat-messages.tsx
index 2762b53..80e5ac8 100644
--- a/src/components/chat/chat-messages.tsx
+++ b/src/components/chat/chat-messages.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useChatHistoryStore } from "../../store/chat-history-store";
 import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
 import { FileMessage } from "../messages/file-message";
@@ -11,6 +11,12 @@ export const ChatMessages: React.FC = () => {
 	const { currentChatId } = useCurrentChatIdStore();
 	const { setHasUserScrolled } = useHasUserScrolledStore();
 
+	const isSafari =
+		navigator.userAgent.indexOf("Safari") !== -1 &&
+		navigator.userAgent.indexOf("Chrome") === -1;
+
+	const [previousScrollTop, setPreviousScrollTop] = useState(0);
+
 	const messages: Message[] = getChat(currentChatId)?.messages || [];
 
 	const messageContainerRef = useRef<null | HTMLDivElement>(null);
@@ -22,10 +28,8 @@ export const ChatMessages: React.FC = () => {
 			messagesContainer &&
 			!useHasUserScrolledStore.getState().hasUserScrolled
 		) {
-			messagesContainer.scrollTo({
-				top: messagesContainer.scrollHeight,
-				behavior: "smooth",
-			});
+			messagesContainer.scrollTop =
+				messagesContainer.scrollHeight - messagesContainer.clientHeight;
 		}
 	};
 
@@ -37,30 +41,26 @@ export const ChatMessages: React.FC = () => {
 		}
 
 		const isScrollPositionCloseToEnd =
-			messagesContainer.scrollTop + messagesContainer.clientHeight >=
-			messagesContainer.scrollHeight - 10;
+			messagesContainer.scrollHeight - messagesContainer.clientHeight <=
+			messagesContainer.scrollTop + 1;
 
 		if (isScrollPositionCloseToEnd) {
 			setHasUserScrolled(false);
 			return;
 		}
 
-		setHasUserScrolled(true);
-	};
-
-	useEffect(() => {
-		const messagesContainer = messageContainerRef.current;
+		const currentScrollTop = messagesContainer.scrollTop;
 
-		if (!messagesContainer) {
-			return () => {};
+		/**
+		 * Only stop auto scrolling to the new message, when user is scrolling towards top.
+		 * When the user is scrolling down, there is no need to stop auto scrolling.
+		 */
+		const hasUserScrolledTowardsTop = previousScrollTop > currentScrollTop;
+		if (hasUserScrolledTowardsTop) {
+			setHasUserScrolled(true);
 		}
-
-		messagesContainer.addEventListener("scroll", handleScroll);
-
-		return () => {
-			messagesContainer.removeEventListener("scroll", handleScroll);
-		};
-	}, []);
+		setPreviousScrollTop(currentScrollTop);
+	};
 
 	useEffect(() => {
 		scrollToBottom();
@@ -69,7 +69,9 @@ export const ChatMessages: React.FC = () => {
 	return (
 		<div
 			ref={messageContainerRef}
-			className="flex w-full justify-center overflow-y-auto overflow-x-hidden scroll-smooth mb-2"
+			onScroll={handleScroll}
+			className={`flex w-full justify-center overflow-y-auto overflow-x-hidden mb-2 
+				${isSafari ? "scroll-auto" : "scroll-smooth"}`}
 		>
 			<div className="md:w-[640px] lg:w-[768px] w-full h-full flex flex-col gap-y-4 px-5 md:pr-0 md:pl-2 ">
 				{messages.map((message) => (
diff --git a/src/components/edit/edit-chat-messages.tsx b/src/components/edit/edit-chat-messages.tsx
index 22e76ef..a435234 100644
--- a/src/components/edit/edit-chat-messages.tsx
+++ b/src/components/edit/edit-chat-messages.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useChatHistoryStore } from "../../store/chat-history-store";
 import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
 import { FileMessage } from "../messages/file-message";
@@ -12,6 +12,12 @@ export const EditChatMessages: React.FC = () => {
 	const { currentChatId } = useCurrentChatIdStore();
 	const { setHasUserScrolled } = useHasUserScrolledStore();
 
+	const isSafari =
+		navigator.userAgent.indexOf("Safari") !== -1 &&
+		navigator.userAgent.indexOf("Chrome") === -1;
+
+	const [previousScrollTop, setPreviousScrollTop] = useState(0);
+
 	const messages: Message[] = getChat(currentChatId)?.messages || [];
 
 	const messageContainerRef = useRef<null | HTMLDivElement>(null);
@@ -23,10 +29,8 @@ export const EditChatMessages: React.FC = () => {
 			messagesContainer &&
 			!useHasUserScrolledStore.getState().hasUserScrolled
 		) {
-			messagesContainer.scrollTo({
-				top: messagesContainer.scrollHeight,
-				behavior: "smooth",
-			});
+			messagesContainer.scrollTop =
+				messagesContainer.scrollHeight - messagesContainer.clientHeight;
 		}
 	};
 
@@ -38,30 +42,26 @@ export const EditChatMessages: React.FC = () => {
 		}
 
 		const isScrollPositionCloseToEnd =
-			messagesContainer.scrollTop + messagesContainer.clientHeight >=
-			messagesContainer.scrollHeight - 10;
+			messagesContainer.scrollHeight - messagesContainer.clientHeight <=
+			messagesContainer.scrollTop + 1;
 
 		if (isScrollPositionCloseToEnd) {
 			setHasUserScrolled(false);
 			return;
 		}
 
-		setHasUserScrolled(true);
-	};
-
-	useEffect(() => {
-		const messagesContainer = messageContainerRef.current;
+		const currentScrollTop = messagesContainer.scrollTop;
 
-		if (!messagesContainer) {
-			return () => {};
+		/**
+		 * Only stop auto scrolling to the new message, when user is scrolling towards top.
+		 * When the user is scrolling down, there is no need to stop auto scrolling.
+		 */
+		const hasUserScrolledTowardsTop = previousScrollTop > currentScrollTop;
+		if (hasUserScrolledTowardsTop) {
+			setHasUserScrolled(true);
 		}
-
-		messagesContainer.addEventListener("scroll", handleScroll);
-
-		return () => {
-			messagesContainer.removeEventListener("scroll", handleScroll);
-		};
-	}, []);
+		setPreviousScrollTop(currentScrollTop);
+	};
 
 	useEffect(() => {
 		scrollToBottom();
@@ -70,7 +70,9 @@ export const EditChatMessages: React.FC = () => {
 	return (
 		<div
 			ref={messageContainerRef}
-			className="flex w-full justify-center overflow-y-auto overflow-x-hidden scroll-smooth mb-2"
+			onScroll={handleScroll}
+			className={`flex w-full justify-center overflow-y-auto overflow-x-hidden mb-2
+				${isSafari ? "scroll-auto" : "scroll-smooth"}`}
 		>
 			<div className="md:w-[640px] lg:w-[768px] w-full h-full flex flex-col gap-y-4 px-5 md:pr-0 md:pl-2 ">
 				<div className="flex">
diff --git a/src/components/email-chat/email-chat-messages.tsx b/src/components/email-chat/email-chat-messages.tsx
index b2ae7ed..ec14b76 100644
--- a/src/components/email-chat/email-chat-messages.tsx
+++ b/src/components/email-chat/email-chat-messages.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
 import { Message } from "../../store/types";
 import { TextMessage } from "../messages/text-message";
@@ -11,6 +11,12 @@ export const EmailChatMessages: React.FC = () => {
 	const { currentChatId } = useCurrentChatIdStore();
 	const { setHasUserScrolled } = useHasUserScrolledStore();
 
+	const isSafari =
+		navigator.userAgent.indexOf("Safari") !== -1 &&
+		navigator.userAgent.indexOf("Chrome") === -1;
+
+	const [previousScrollTop, setPreviousScrollTop] = useState(0);
+
 	const messages: Message[] = getChat(currentChatId)?.messages || [];
 
 	const messageContainerRef = useRef<null | HTMLDivElement>(null);
@@ -22,10 +28,8 @@ export const EmailChatMessages: React.FC = () => {
 			messagesContainer &&
 			!useHasUserScrolledStore.getState().hasUserScrolled
 		) {
-			messagesContainer.scrollTo({
-				top: messagesContainer.scrollHeight,
-				behavior: "smooth",
-			});
+			messagesContainer.scrollTop =
+				messagesContainer.scrollHeight - messagesContainer.clientHeight;
 		}
 	};
 
@@ -37,30 +41,27 @@ export const EmailChatMessages: React.FC = () => {
 		}
 
 		const isScrollPositionCloseToEnd =
-			messagesContainer.scrollTop + messagesContainer.clientHeight >=
-			messagesContainer.scrollHeight - 10;
+			messagesContainer.scrollHeight - messagesContainer.clientHeight <=
+			messagesContainer.scrollTop + 1;
 
 		if (isScrollPositionCloseToEnd) {
 			setHasUserScrolled(false);
 			return;
 		}
 
-		setHasUserScrolled(true);
-	};
+		const currentScrollTop = messagesContainer.scrollTop;
 
-	useEffect(() => {
-		const messagesContainer = messageContainerRef.current;
-
-		if (!messagesContainer) {
-			return () => {};
+		/**
+		 * Only stop auto scrolling to the new message, when user is scrolling towards top.
+		 * When the user is scrolling down, there is no need to stop auto scrolling.
+		 */
+		const hasUserScrolledTowardsTop = previousScrollTop > currentScrollTop;
+		if (hasUserScrolledTowardsTop) {
+			setHasUserScrolled(true);
 		}
 
-		messagesContainer.addEventListener("scroll", handleScroll);
-
-		return () => {
-			messagesContainer.removeEventListener("scroll", handleScroll);
-		};
-	}, []);
+		setPreviousScrollTop(currentScrollTop);
+	};
 
 	useEffect(() => {
 		scrollToBottom();
@@ -69,7 +70,9 @@ export const EmailChatMessages: React.FC = () => {
 	return (
 		<div
 			ref={messageContainerRef}
-			className="flex w-full justify-center overflow-y-auto overflow-x-hidden pb-2 px-5"
+			onScroll={handleScroll}
+			className={`flex w-full justify-center overflow-y-auto overflow-x-hidden pb-2 px-5 mb-2 
+				${isSafari ? "scroll-auto" : "scroll-smooth"}`}
 		>
 			<div className="md:w-[640px] lg:w-[768px] flex flex-col gap-y-4">
 				<div className="flex">
diff --git a/src/components/email-chat/email-chat.tsx b/src/components/email-chat/email-chat.tsx
index 422d33e..a608585 100644
--- a/src/components/email-chat/email-chat.tsx
+++ b/src/components/email-chat/email-chat.tsx
@@ -17,7 +17,7 @@ export const EmailChat: React.FC = () => {
 	}, [currentChatId]);
 
 	return (
-		<div className="flex h-full flex-col items-center justify-between pt-16 pb-5 relative">
+		<div className="flex h-full flex-col justify-between pt-16 pb-5 relative">
 			<Help />
 
 			<EmailChatMessages />
diff --git a/src/components/email/email-messages.tsx b/src/components/email/email-messages.tsx
index 4f8f8b9..3b2e8f0 100644
--- a/src/components/email/email-messages.tsx
+++ b/src/components/email/email-messages.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useCurrentChatIdStore } from "../../store/current-chat-id-store";
 import { Message } from "../../store/types";
 import { TextMessage } from "../messages/text-message";
@@ -10,6 +10,12 @@ export const EmailMessages: React.FC = () => {
 	const { currentChatId } = useCurrentChatIdStore();
 	const { setHasUserScrolled } = useHasUserScrolledStore();
 
+	const isSafari =
+		navigator.userAgent.indexOf("Safari") !== -1 &&
+		navigator.userAgent.indexOf("Chrome") === -1;
+
+	const [previousScrollTop, setPreviousScrollTop] = useState(0);
+
 	const messages: Message[] = getChat(currentChatId)?.messages || [];
 
 	const messageContainerRef = useRef<null | HTMLDivElement>(null);
@@ -21,10 +27,8 @@ export const EmailMessages: React.FC = () => {
 			messagesContainer &&
 			!useHasUserScrolledStore.getState().hasUserScrolled
 		) {
-			messagesContainer.scrollTo({
-				top: messagesContainer.scrollHeight,
-				behavior: "smooth",
-			});
+			messagesContainer.scrollTop =
+				messagesContainer.scrollHeight - messagesContainer.clientHeight;
 		}
 	};
 
@@ -36,30 +40,27 @@ export const EmailMessages: React.FC = () => {
 		}
 
 		const isScrollPositionCloseToEnd =
-			messagesContainer.scrollTop + messagesContainer.clientHeight >=
-			messagesContainer.scrollHeight - 10;
+			messagesContainer.scrollHeight - messagesContainer.clientHeight <=
+			messagesContainer.scrollTop - 10;
 
 		if (isScrollPositionCloseToEnd) {
 			setHasUserScrolled(false);
 			return;
 		}
 
-		setHasUserScrolled(true);
-	};
+		const currentScrollTop = messagesContainer.scrollTop;
 
-	useEffect(() => {
-		const messagesContainer = messageContainerRef.current;
-
-		if (!messagesContainer) {
-			return () => {};
+		/**
+		 * Only stop auto scrolling to the new message, when user is scrolling towards top.
+		 * When the user is scrolling down, there is no need to stop auto scrolling.
+		 */
+		const hasUserScrolledTowardsTop = previousScrollTop > currentScrollTop;
+		if (hasUserScrolledTowardsTop) {
+			setHasUserScrolled(true);
 		}
 
-		messagesContainer.addEventListener("scroll", handleScroll);
-
-		return () => {
-			messagesContainer.removeEventListener("scroll", handleScroll);
-		};
-	}, []);
+		setPreviousScrollTop(currentScrollTop);
+	};
 
 	useEffect(() => {
 		scrollToBottom();
@@ -68,7 +69,9 @@ export const EmailMessages: React.FC = () => {
 	return (
 		<div
 			ref={messageContainerRef}
-			className="flex w-full justify-center overflow-y-auto overflow-x-hidden pb-2 px-5"
+			onScroll={handleScroll}
+			className={`flex w-full justify-center overflow-y-auto overflow-x-hidden pb-2 px-5
+				${isSafari ? "scroll-auto" : "scroll-smooth"}`}
 		>
 			<div className="md:w-[640px] lg:w-[768px] flex flex-col gap-y-4">
 				{messages.map((message) => (

From b232f43e50a3c8964b247d900b7e2346abd6f4dc Mon Sep 17 00:00:00 2001
From: Jonas Jaszkowic <jonas.jaszkowic@ts.berlin>
Date: Tue, 1 Oct 2024 11:15:56 +0200
Subject: [PATCH 32/33] fix: imports

---
 src/store/current-llm-store.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/store/current-llm-store.ts b/src/store/current-llm-store.ts
index fe8528a..074a6fb 100644
--- a/src/store/current-llm-store.ts
+++ b/src/store/current-llm-store.ts
@@ -1,7 +1,6 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { useErrorStore } from "./error-store";
-import { persist } from "zustand/middleware";
 
 export interface AvailableLLM {
 	identifier: string;

From e740a730e245eaf623901c2058d0dfc41670071e Mon Sep 17 00:00:00 2001
From: Jonas Jaszkowic <jonas.jaszkowic@ts.berlin>
Date: Tue, 1 Oct 2024 11:34:11 +0200
Subject: [PATCH 33/33] chore: rename to selectedLlm

---
 .../settings-dialog/settings-dialog.tsx       |  6 +++++-
 .../settings-dialog/settings-option.tsx       |  6 +++++-
 src/store/api.ts                              |  2 +-
 src/store/chat-history-store.ts               |  2 +-
 src/store/current-llm-store.ts                | 20 +++++++++----------
 5 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/dialogs/settings-dialog/settings-dialog.tsx b/src/components/dialogs/settings-dialog/settings-dialog.tsx
index 932667d..5c31d84 100644
--- a/src/components/dialogs/settings-dialog/settings-dialog.tsx
+++ b/src/components/dialogs/settings-dialog/settings-dialog.tsx
@@ -8,7 +8,11 @@ import { RefreshIcon } from "../../icons/refresh-icon";
 export const settingsDialogId = "settings-dialog";
 
 export const SettingsDialog: React.FC = () => {
-	const { availableLLMs, currentLLM, getAvailableLLMs } = useCurrentLLMStore();
+	const {
+		availableLLMs,
+		selectedLLM: currentLLM,
+		getAvailableLLMs,
+	} = useCurrentLLMStore();
 
 	return (
 		<DefaultDialog
diff --git a/src/components/dialogs/settings-dialog/settings-option.tsx b/src/components/dialogs/settings-dialog/settings-option.tsx
index 0dd2c51..d60eda6 100644
--- a/src/components/dialogs/settings-dialog/settings-option.tsx
+++ b/src/components/dialogs/settings-dialog/settings-option.tsx
@@ -13,7 +13,11 @@ interface SettingsOptionProps {
 }
 
 export const SettingsOption: React.FC<SettingsOptionProps> = ({ option }) => {
-	const { currentLLM, setCurrentLLM, availableLLMs } = useCurrentLLMStore();
+	const {
+		selectedLLM: currentLLM,
+		setSelectedLLM: setCurrentLLM,
+		availableLLMs,
+	} = useCurrentLLMStore();
 
 	const isChecked = option.identifier === currentLLM?.identifier;
 
diff --git a/src/store/api.ts b/src/store/api.ts
index 6254676..bb28288 100644
--- a/src/store/api.ts
+++ b/src/store/api.ts
@@ -14,7 +14,7 @@ const systemPrompts: { [key: string]: string } = {
 
 export async function streamChatResponse() {
 	const chatId = useCurrentChatIdStore.getState().currentChatId;
-	const { currentLLM } = useCurrentLLMStore.getState();
+	const { selectedLLM: currentLLM } = useCurrentLLMStore.getState();
 	const { handleError } = useErrorStore.getState();
 
 	if (!chatId) {
diff --git a/src/store/chat-history-store.ts b/src/store/chat-history-store.ts
index 1a6f5aa..be15de2 100644
--- a/src/store/chat-history-store.ts
+++ b/src/store/chat-history-store.ts
@@ -73,7 +73,7 @@ export const useChatHistoryStore = create(
 						?.messages ?? [];
 				const tokens = messages.map((message) => message.tokenCount);
 				const tokenCount = tokens.reduce((acc, val) => acc + val, 0);
-				const llm = useCurrentLLMStore.getState().currentLLM;
+				const llm = useCurrentLLMStore.getState().selectedLLM;
 				if (llm) {
 					return tokenCount / llm.contextSize;
 				}
diff --git a/src/store/current-llm-store.ts b/src/store/current-llm-store.ts
index 074a6fb..b4f7b18 100644
--- a/src/store/current-llm-store.ts
+++ b/src/store/current-llm-store.ts
@@ -20,8 +20,8 @@ export interface AvailableLLM {
 }
 
 interface CurrentLLMStore {
-	currentLLM: AvailableLLM | undefined;
-	setCurrentLLM: (llm: AvailableLLM) => void;
+	selectedLLM: AvailableLLM | undefined;
+	setSelectedLLM: (llm: AvailableLLM) => void;
 	availableLLMs: AvailableLLM[];
 	getAvailableLLMs: () => Promise<void>;
 }
@@ -31,8 +31,8 @@ const defaultModelIdentifier = "azure-gpt-4o-mini";
 export const useCurrentLLMStore = create<CurrentLLMStore>()(
 	persist(
 		(set) => ({
-			currentLLM: undefined,
-			setCurrentLLM: (llm: AvailableLLM) => set({ currentLLM: llm }),
+			selectedLLM: undefined,
+			setSelectedLLM: (llm: AvailableLLM) => set({ selectedLLM: llm }),
 			availableLLMs: [],
 			getAvailableLLMs: getAvailableLLMs,
 		}),
@@ -75,12 +75,12 @@ async function getAvailableLLMs() {
 			(model) => model.identifier === defaultModelIdentifier,
 		);
 
-		const currentLlm = useCurrentLLMStore.getState().currentLLM;
+		const selectedLlm = useCurrentLLMStore.getState().selectedLLM;
 
-		if (!currentLlm) {
+		if (!selectedLlm) {
 			// No selected LLM, use healthy default model
 			if (defaultModel && defaultModel.status.healthy) {
-				useCurrentLLMStore.setState({ currentLLM: defaultModel });
+				useCurrentLLMStore.setState({ selectedLLM: defaultModel });
 				return;
 			}
 
@@ -90,12 +90,12 @@ async function getAvailableLLMs() {
 			return;
 		}
 
-		if (currentLlm) {
+		if (selectedLlm) {
 			const refreshedCurrentLlm = sortedAvailableLLMs.find(
-				(llm) => llm.identifier === currentLlm.identifier,
+				(llm) => llm.identifier === selectedLlm.identifier,
 			);
 			if (refreshedCurrentLlm) {
-				useCurrentLLMStore.setState({ currentLLM: refreshedCurrentLlm });
+				useCurrentLLMStore.setState({ selectedLLM: refreshedCurrentLlm });
 				if (refreshedCurrentLlm.status.healthy) {
 					return;
 				}