basic llm request stream

backend/web/src/routes/layout.css

@@ -11,7 +11,7 @@ body {
 	@apply h-full bg-stone-100 text-stone-950 dark:bg-stone-950 dark:text-stone-100;
 }
 
-.formelement > label {
+label {
 	@apply text-xs text-stone-600 uppercase dark:text-stone-400;
 }
 hr {
@@ -30,9 +30,9 @@ h2 {
 }
 .bt {
 	appearance: button;
-	@apply min-w-40 cursor-pointer rounded bg-stone-300 px-4 py-1 transition-all duration-300 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700;
+	@apply min-w-40 cursor-pointer rounded bg-stone-300 px-4 py-1 transition-all duration-300 hover:bg-stone-400 dark:bg-stone-800 dark:hover:bg-stone-700;
 	&.small {
-		@apply min-w-0 px-2 py-1;
+		@apply min-w-2 px-2 py-1;
 	}
 	&.changed,
 	&.saving {
@@ -62,10 +62,12 @@ h2 {
 .public h1 {
 	@apply mb-4 text-3xl font-bold;
 }
-.profile a,
-.public a {
+.profile a {
 	@apply bg-sky-300 dark:bg-sky-700;
 }
+.public a {
+	@apply text-sky-500 dark:text-sky-500;
+}
 
 #outer {
 	@apply flex h-full flex-row;
@@ -113,10 +115,18 @@ h2 {
 	}
 }
 
+.chatinput {
+	@apply w-full rounded-l-xl border-stone-300 bg-stone-50 p-2 text-stone-900 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-100;
+}
+
+.chatbutton {
+	@apply min-w-12 cursor-pointer rounded-r-xl bg-stone-300 px-2 py-1 transition-all duration-300 hover:bg-stone-400 dark:bg-stone-700 dark:hover:bg-stone-600;
+}
+
 /* form */
 
 .formgroup {
-	@apply rounded border border-stone-300 bg-stone-100 p-2 text-sm dark:border-stone-700 dark:bg-stone-900;
+	@apply rounded border border-stone-300 bg-stone-200 p-2 text-sm dark:border-stone-700 dark:bg-stone-900;
 }
 
 .formelement {
@@ -124,11 +134,11 @@ h2 {
 }
 
 .textinput {
-	@apply h-8 w-full rounded border-stone-700 bg-stone-50 px-2 py-1 text-sm text-stone-900 dark:bg-stone-950 dark:text-stone-100;
+	@apply h-8 w-full rounded border-stone-300 bg-stone-50 px-2 py-1 text-sm text-stone-900 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100;
 }
 
 .areainput {
-	@apply w-full rounded border-stone-700 bg-stone-50 px-2 py-1 text-sm text-stone-900 dark:bg-stone-950 dark:text-stone-100;
+	@apply w-full rounded border-stone-300 bg-stone-50 px-2 py-1 text-sm text-stone-900 dark:bg-stone-950 dark:text-stone-100;
 }
 
 /* svelte select */
@@ -261,3 +271,31 @@ h2 {
 .list-item {
 	@apply list-none;
 }
+
+/*  chat */
+
+.message {
+	@apply m-2 rounded p-2;
+
+	&.user {
+		@apply bg-sky-500 dark:text-white;
+	}
+
+	&.assistant {
+		&.reasoning {
+			@apply text-white/50;
+		}
+	}
+}
+
+.message-content {
+	@apply text-sm;
+}
+
+.message-content p {
+	@apply my-2;
+}
+
+.message-content pre {
+	@apply my-2 whitespace-pre dark:bg-stone-700;
+}