feat(ui): enhance chat example prompts and improve layout

- Added a new backend URL import to the route file for better configuration.
- Updated the Composer component to use a relative positioning class for improved layout.
- Refactored the ChatExamplePrompts component to enhance the display of active categories and prompts, including a close button for better user interaction.

surfsense_web/app/api/zero/query/route.ts

@@ -1,6 +1,7 @@
 import { mustGetQuery } from "@rocicorp/zero";
 import { handleQueryRequest } from "@rocicorp/zero/server";
 import { NextResponse } from "next/server";
+import { BACKEND_URL } from "@/lib/env-config";
 import type { Context } from "@/types/zero";
 import { queries } from "@/zero/queries";
 import { schema } from "@/zero/schema";

surfsense_web/components/assistant-ui/thread.tsx

@@ -898,7 +898,7 @@ const Composer: FC = () => {
 					</>
 				) : null}
 			</Popover>
-			<div className="flex w-full flex-col">
+			<div className="relative flex w-full flex-col">
 				<div
 					className={cn(
 						"aui-composer-attachment-dropzone relative z-10 flex w-full flex-col overflow-hidden rounded-3xl border border-input/20 bg-muted pt-2 shadow-sm shadow-black/5 outline-none transition-[border-color,box-shadow] hover:border-input/60 focus-within:border-input/60 dark:shadow-black/10",
@@ -935,7 +935,9 @@ const Composer: FC = () => {
 					onVisibleChange={setConnectToolsTrayVisible}
 				/>
 				{isThreadEmpty && isComposerInputEmpty ? (
-					<ChatExamplePrompts onSelect={handleExampleSelect} />
+					<div className="absolute top-full left-0 right-0 z-20">
+						<ChatExamplePrompts onSelect={handleExampleSelect} />
+					</div>
 				) : null}
 			</div>
 		</ComposerPrimitive.Root>

surfsense_web/components/new-chat/chat-example-prompts.tsx

@@ -76,24 +76,36 @@ export function ChatExamplePrompts({ onSelect }: ChatExamplePromptsProps) {
 						})}
 					</div>
 				</div>
-				{CHAT_EXAMPLE_CATEGORIES.map((category) => (
-					<TabsContent
-						key={category.id}
-						value={category.id}
-						className="mt-3 focus-visible:outline-none"
-					>
-						<ScrollArea className="h-[clamp(7.5rem,26vh,12rem)]">
-							<ul className="flex flex-col gap-2 pr-3">
-								{category.prompts.map((prompt) => (
-									<li key={prompt}>
-										<ExamplePromptButton prompt={prompt} onSelect={onSelect} />
-									</li>
-								))}
-							</ul>
-						</ScrollArea>
-					</TabsContent>
-				))}
-			</Tabs>
+			)}
+
+			{activeCategory ? (
+				<div className="overflow-hidden rounded-lg border border-input/20 bg-muted shadow-sm shadow-black/5 dark:shadow-black/10 sm:rounded-xl">
+					<div className="flex items-center justify-between gap-2 px-3 py-2 sm:gap-3 sm:px-4 sm:py-3">
+						<div className="flex min-w-0 items-center gap-2 text-xs font-medium text-muted-foreground sm:text-sm">
+							<span className="truncate">{activeCategory.label}</span>
+						</div>
+						<Button
+							type="button"
+							variant="ghost"
+							size="icon"
+							onClick={() => setActiveCategoryId(null)}
+							aria-label="Close example prompts"
+							className="size-7 shrink-0 rounded-full text-muted-foreground hover:bg-foreground/10 hover:text-foreground sm:size-8"
+						>
+							<X aria-hidden="true" className="size-3.5 sm:size-4" />
+						</Button>
+					</div>
+					<ScrollArea className="max-h-52 sm:max-h-64">
+						<ul className="divide-y px-2 pb-2 sm:px-3 sm:pb-3">
+							{activeCategory.prompts.map((prompt) => (
+								<li key={prompt} className="py-0.5 sm:py-1">
+									<ExamplePromptButton prompt={prompt} onSelect={onSelect} />
+								</li>
+							))}
+						</ul>
+					</ScrollArea>
+				</div>
+			) : null}
 		</div>
 	);
-}
+}