ui: Add Thinking mode toggle with reasoning effort levels + improvements for Chat Form Add Action UI

common/arg.cpp

@@ -4077,7 +4077,6 @@ common_params_context common_params_parser_init(common_params & params, llama_ex
             params.sampling.top_k = 0;
             params.sampling.min_p = 0.01f;
             params.use_jinja = true;
-            //params.default_template_kwargs["reasoning_effort"] = "\"high\"";
         }
     ).set_examples({LLAMA_EXAMPLE_SERVER, LLAMA_EXAMPLE_CLI}));
 
@@ -4096,7 +4095,6 @@ common_params_context common_params_parser_init(common_params & params, llama_ex
             params.sampling.top_k = 0;
             params.sampling.min_p = 0.01f;
             params.use_jinja = true;
-            //params.default_template_kwargs["reasoning_effort"] = "\"high\"";
         }
     ).set_examples({LLAMA_EXAMPLE_SERVER, LLAMA_EXAMPLE_CLI}));
 

tools/ui/.env.example

@@ -1,2 +1,3 @@
 VITE_PUBLIC_APP_NAME='llama-ui'
-# VITE_DEBUG='true'
+VITE_DEBUG='true'
+VITE_PUBLIC_SERVER_ORIGIN='http://localhost:8033'

tools/ui/.prettierignore

@@ -7,6 +7,9 @@ bun.lockb
 
 # Miscellaneous
 /static/
+dist/
+.svelte-kit/
+build/
 
 # Build output
 /dist/

tools/ui/README.md

@@ -115,16 +115,18 @@ This starts:
 - **Vite dev server** at `http://localhost:5173` - The main UI frontend app
 - **Storybook** at `http://localhost:6006` - Component documentation
 
-The Vite dev server proxies API requests to `http://localhost:8080` (default llama-server port):
+The Vite dev server proxies API requests to `SERVER_ORIGIN` (with fallback to default llama-server `8080` port):
 
 ```typescript
 // vite.config.ts proxy configuration
 proxy: {
-  '/v1': 'http://localhost:8080',
-  '/props': 'http://localhost:8080',
-  '/slots': 'http://localhost:8080',
-  '/models': 'http://localhost:8080'
-}
+	'/v1': SERVER_ORIGIN,
+	'/props': SERVER_ORIGIN,
+	'/models': SERVER_ORIGIN,
+	'/tools': SERVER_ORIGIN,
+	'/slots': SERVER_ORIGIN,
+	'/cors-proxy': SERVER_ORIGIN
+},
 ```
 
 ### Development Workflow

tools/ui/playwright.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from '@playwright/test';
 
 export default defineConfig({
 	webServer: {
-		command: 'npm run build && http-server ../../build/tools/ui/dist -p 8181',
+		command: 'npm run build && npx http-server ./dist -p 8181',
 		port: 8181,
 		timeout: 120000,
 		reuseExistingServer: false

tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte

@@ -111,6 +111,7 @@
 	let preSelectedResourceUri = $state<string | undefined>(undefined);
 
 	let currentConfig = $derived(config());
+
 	let pasteLongTextToFileLength = $derived.by(() => {
 		const n = Number(currentConfig.pasteLongTextToFileLen);
 		return Number.isNaN(n) ? Number(SETTING_CONFIG_DEFAULT.pasteLongTextToFileLen) : n;

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte

@@ -1,22 +1,18 @@
 <script lang="ts">
-	import { Plus } from '@lucide/svelte';
+	import { Plus, File, MessageSquare, Zap, FolderOpen } from '@lucide/svelte';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { buttonVariants } from '$lib/components/ui/button';
 	import { cn } from '$lib/components/ui/utils';
 	import {
 		ATTACHMENT_FILE_ITEMS,
-		ATTACHMENT_EXTRA_ITEMS,
-		ATTACHMENT_MCP_ITEMS,
 		ATTACHMENT_TOOLTIP_TEXT,
 		TOOLTIP_DELAY_DURATION
 	} from '$lib/constants';
-	import { AttachmentMenuItemId } from '$lib/enums';
 	import {
 		ChatFormActionAddToolsSubmenu,
 		ChatFormActionAddMcpServersSubmenu
 	} from '$lib/components/app';
-
 	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';
 
 	interface Props {
@@ -97,107 +93,87 @@
 		</Tooltip.Root>
 
 		<DropdownMenu.Content align="start" class="w-48">
-			{#each ATTACHMENT_FILE_ITEMS as item (item.id)}
-				{@const enabled = attachmentMenu.isItemEnabled(item.enabledWhen)}
-				{#if enabled}
-					<DropdownMenu.Item
-						class="{item.class ?? ''} flex cursor-pointer items-center gap-2"
-						onclick={() => attachmentMenu.callbacks[item.action]()}
-					>
-						<item.icon class="h-4 w-4" />
-
-						<span>{item.label}</span>
-					</DropdownMenu.Item>
-				{:else if item.disabledTooltip}
-					<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
-						<Tooltip.Trigger tabindex={-1}>
-							{#snippet child({ props })}
-								<div {...props} class="cursor-default">
-									<DropdownMenu.Item class="{item.class ?? ''} flex items-center gap-2" disabled>
-										<item.icon class="h-4 w-4" />
-
-										<span>{item.label}</span>
-									</DropdownMenu.Item>
-								</div>
-							{/snippet}
-						</Tooltip.Trigger>
-
-						<Tooltip.Content side="right">
-							<p>{item.disabledTooltip}</p>
-						</Tooltip.Content>
-					</Tooltip.Root>
-				{/if}
-			{/each}
-
-			{#if !attachmentMenu.isItemEnabled('hasVisionModality')}
-				<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
-					<Tooltip.Trigger>
-						{#snippet child({ props })}
+			<DropdownMenu.Sub>
+				<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+					<File class="h-4 w-4" />
+
+					<span>Add files</span>
+				</DropdownMenu.SubTrigger>
+
+				<DropdownMenu.SubContent class="w-48">
+					{#each ATTACHMENT_FILE_ITEMS as item (item.id)}
+						{@const enabled = attachmentMenu.isItemEnabled(item.enabledWhen)}
+						{#if enabled}
 							<DropdownMenu.Item
-								{...props}
-								class="flex cursor-pointer items-center gap-2"
-								onclick={attachmentMenu.callbacks.onFileUpload}
+								class="{item.class ?? ''} flex cursor-pointer items-center gap-2"
+								onclick={() => attachmentMenu.callbacks[item.action]()}
 							>
-								{@const pdfItem = ATTACHMENT_FILE_ITEMS.find(
-									(i) => i.id === AttachmentMenuItemId.PDF
-								)}
-								{#if pdfItem}
-									<pdfItem.icon class="h-4 w-4" />
-
-									<span>{pdfItem.label}</span>
-								{/if}
-							</DropdownMenu.Item>
-						{/snippet}
-					</Tooltip.Trigger>
-
-					<Tooltip.Content side="right">
-						<p>PDFs will be converted to text. Image-based PDFs may not work properly.</p>
-					</Tooltip.Content>
-				</Tooltip.Root>
-			{/if}
+								<item.icon class="h-4 w-4" />
 
-			<DropdownMenu.Separator />
-
-			{#each ATTACHMENT_EXTRA_ITEMS as item (item.id)}
-				{#if item.id === AttachmentMenuItemId.SYSTEM_MESSAGE}
-					<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
-						<Tooltip.Trigger>
-							{#snippet child({ props })}
-								<DropdownMenu.Item
-									{...props}
-									class="flex cursor-pointer items-center gap-2"
-									onclick={() => attachmentMenu.callbacks[item.action]()}
-								>
-									<item.icon class="h-4 w-4" />
-
-									<span>{item.label}</span>
-								</DropdownMenu.Item>
-							{/snippet}
-						</Tooltip.Trigger>
-
-						<Tooltip.Content side="right">
-							<p>{attachmentMenu.getSystemMessageTooltip()}</p>
-						</Tooltip.Content>
-					</Tooltip.Root>
-				{/if}
-			{/each}
+								<span>{item.label}</span>
+							</DropdownMenu.Item>
+						{:else if item.disabledTooltip}
+							<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+								<Tooltip.Trigger tabindex={-1}>
+									{#snippet child({ props })}
+										<div {...props} class="cursor-default">
+											<DropdownMenu.Item
+												class="{item.class ?? ''} flex items-center gap-2"
+												disabled
+											>
+												<item.icon class="h-4 w-4" />
+
+												<span>{item.label}</span>
+											</DropdownMenu.Item>
+										</div>
+									{/snippet}
+								</Tooltip.Trigger>
+
+								<Tooltip.Content side="right">
+									<p>{item.disabledTooltip}</p>
+								</Tooltip.Content>
+							</Tooltip.Root>
+						{/if}
+					{/each}
+				</DropdownMenu.SubContent>
+			</DropdownMenu.Sub>
+
+			<DropdownMenu.Item
+				class="flex cursor-pointer items-center gap-2"
+				onclick={onSystemPromptClick}
+			>
+				<MessageSquare class="h-4 w-4" />
+
+				<span>System Message</span>
+			</DropdownMenu.Item>
 
 			<ChatFormActionAddToolsSubmenu />
 
 			<ChatFormActionAddMcpServersSubmenu onMcpSettingsClick={handleMcpSettingsClick} />
 
-			{#each ATTACHMENT_MCP_ITEMS as item (item.id)}
-				{#if attachmentMenu.isItemVisible(item.visibleWhen)}
-					<DropdownMenu.Item
-						class="flex cursor-pointer items-center gap-2"
-						onclick={() => attachmentMenu.callbacks[item.action]()}
-					>
-						<item.icon class="h-4 w-4" />
+			{#if hasMcpPromptsSupport}
+				<DropdownMenu.Separator />
 
-						<span>{item.label}</span>
-					</DropdownMenu.Item>
-				{/if}
-			{/each}
+				<DropdownMenu.Item
+					class="flex cursor-pointer items-center gap-2"
+					onclick={onMcpPromptClick}
+				>
+					<Zap class="h-4 w-4" />
+
+					<span>MCP Prompt</span>
+				</DropdownMenu.Item>
+			{/if}
+
+			{#if hasMcpResourcesSupport}
+				<DropdownMenu.Item
+					class="flex cursor-pointer items-center gap-2"
+					onclick={onMcpResourcesClick}
+				>
+					<FolderOpen class="h-4 w-4" />
+
+					<span>MCP Resources</span>
+				</DropdownMenu.Item>
+			{/if}
 		</DropdownMenu.Content>
 	</DropdownMenu.Root>
 </div>