refac: styling

backend/config.py

@@ -367,6 +367,17 @@ DEFAULT_PROMPT_SUGGESTIONS = (
             "title": ["Show me a code snippet", "of a website's sticky header"],
             "content": "Show me a code snippet of a website's sticky header in CSS and JavaScript.",
         },
+        {
+            "title": [
+                "Explain options trading",
+                "if I'm familiar with buying and selling stocks",
+            ],
+            "content": "Explain options trading in simple terms if I'm familiar with buying and selling stocks.",
+        },
+        {
+            "title": ["Overcome procrastination", "give me tips"],
+            "content": "Could you start by asking me about instances when I procrastinate the most and then give me some suggestions to overcome it?",
+        },
     ]
 )
 

backend/data/config.json

@@ -4,21 +4,47 @@
 		"default_locale": "en-US",
 		"prompt_suggestions": [
 			{
-				"title": ["Help me study", "vocabulary for a college entrance exam"],
-				"content": "Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option."
+				"title": [
+					"Help me study",
+					"vocabulary for a college entrance exam"
+				],
+				"content": "Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.",
 			},
 			{
-				"title": ["Give me ideas", "for what to do with my kids' art"],
-				"content": "What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter."
+				"title": [
+					"Give me ideas",
+					"for what to do with my kids' art"
+				],
+				"content": "What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter.",
 			},
 			{
-				"title": ["Tell me a fun fact", "about the Roman Empire"],
-				"content": "Tell me a random fun fact about the Roman Empire"
+				"title": [
+					"Tell me a fun fact",
+					"about the Roman Empire"
+				],
+				"content": "Tell me a random fun fact about the Roman Empire",
 			},
 			{
-				"title": ["Show me a code snippet", "of a website's sticky header"],
-				"content": "Show me a code snippet of a website's sticky header in CSS and JavaScript."
-			}
+				"title": [
+					"Show me a code snippet",
+					"of a website's sticky header"
+				],
+				"content": "Show me a code snippet of a website's sticky header in CSS and JavaScript.",
+			},
+			{
+				"title": [
+					"Explain options trading",
+					"if I'm familiar with buying and selling stocks",
+				],
+				"content": "Explain options trading in simple terms if I'm familiar with buying and selling stocks.",
+			},
+			{
+				"title": [
+					"Overcome procrastination",
+					"give me tips"
+				],
+				"content": "Could you start by asking me about instances when I procrastinate the most and then give me some suggestions to overcome it?",
+			},
 		]
 	}
 }

src/lib/components/chat/MessageInput.svelte

@@ -425,7 +425,7 @@
 <div class="fixed bottom-0 {$showSidebar ? 'left-0 lg:left-[260px]' : 'left-0'} right-0">
 	<div class="w-full">
 		<div class=" px-2.5 -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
-			<div class="flex flex-col max-w-3xl w-full">
+			<div class="flex flex-col max-w-5xl w-full">
 				<div class="relative">
 					{#if autoScroll === false && messages.length > 0}
 						<div class=" absolute -top-12 left-0 right-0 flex justify-center">
@@ -497,7 +497,7 @@
 			</div>
 		</div>
 		<div class="bg-white dark:bg-gray-900">
-			<div class="max-w-3xl px-2.5 mx-auto inset-x-0">
+			<div class="max-w-6xl px-2.5 lg:px-16 mx-auto inset-x-0">
 				<div class=" pb-2">
 					<input
 						bind:this={filesInputElement}

src/lib/components/chat/Messages.svelte

@@ -267,7 +267,7 @@
 						<div
 							class="flex flex-col justify-between px-5 mb-3 {$settings?.fullScreenMode ?? null
 								? 'max-w-full'
-								: 'max-w-3xl'} mx-auto rounded-lg group"
+								: 'max-w-4xl'} mx-auto rounded-lg group"
 						>
 							{#if message.role === 'user'}
 								<UserMessage

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

@@ -32,7 +32,7 @@
 </script>
 
 {#key mounted}
-	<div class="m-auto w-full max-w-3xl px-8 lg:px-0 pb-16">
+	<div class="m-auto w-full max-w-6xl px-8 lg:px-24 pb-16">
 		<div class="flex justify-start">
 			<div class="flex -space-x-4 mb-1" in:fade={{ duration: 200 }}>
 				{#each models as model, modelIdx}