i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-10-04 00:37:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add custom system message setting for AI personalization (#728)

Browse Source 
* feat: add custom system message setting for AI personalization

Allow users to enter custom instructions via a textarea in Settings
that get appended to the AI's system prompt. Includes server-side
validation (type check + 5000 char limit), localStorage persistence,
and i18n support for all 4 locales.

* fix: add accessibility htmlFor/id pairing on custom system message textarea
This commit is contained in:
Dayuan Jiang
2026-03-07 19:07:54 +09:00
committed by GitHub
parent be4bc916fd
commit e7453e86a6
8 changed files with 82 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/api/chat/route.ts
+13 -5
View File
@@ -90,7 +90,12 @@ async function handleChatRequest(req: Request): Promise<Response> {
}
}
const { messages, xml, previousXml, sessionId } = await req.json()
const body = await req.json()
const { messages, xml, previousXml, sessionId } = body
const customSystemMessage =
typeof body.customSystemMessage === "string"
? body.customSystemMessage.slice(0, 5000)
: ""
// Get user ID for Langfuse tracking and quota
const userId = getUserIdFromRequest(req)
@@ -252,6 +257,9 @@ async function handleChatRequest(req: Request): Promise<Response> {
// Get the appropriate system prompt based on model (extended for Opus/Haiku 4.5)
const systemMessage = getSystemPrompt(modelId, minimalStyle)
const finalSystemMessage = customSystemMessage
? `${systemMessage}\n\n## Custom Instructions\n${customSystemMessage}`
: systemMessage
// Extract file parts (images) from the last user message
const fileParts =
@@ -424,7 +432,7 @@ ${userInputText}
}
// System messages with multiple cache breakpoints for optimal caching:
// - Breakpoint 1: Static instructions (~1500 tokens) - rarely changes
// - Breakpoint 1: System instructions + custom instructions - changes when user updates custom system message
// - Breakpoint 2: Current XML context - changes per diagram, but constant within a conversation turn
// Some providers (e.g. MiniMax) don't support multiple system messages
// Merge them into a single system message for compatibility
@@ -450,14 +458,14 @@ IMPORTANT: The "Current diagram XML" is the SINGLE SOURCE OF TRUTH for what's on
? [
{
role: "system" as const,
content: `${systemMessage}\n\n${xmlContext}`,
content: `${finalSystemMessage}\n\n${xmlContext}`,
},
]
: [
// Cache breakpoint 1: Instructions (rarely change)
// Cache breakpoint 1: Instructions (+ optional custom instructions)
{
role: "system" as const,
content: systemMessage,
content: finalSystemMessage,
...(shouldCache && {
providerOptions: {
bedrock: { cachePoint: { type: "default" } },
components/chat-panel.tsx
+18 -1
View File
@@ -180,6 +180,7 @@ export default function ChatPanel({
const [tpmLimit, setTpmLimit] = useState(0)
const [minimalStyle, setMinimalStyle] = useState(false)
const [vlmValidationEnabled, setVlmValidationEnabled] = useState(false)
const [customSystemMessage, setCustomSystemMessage] = useState("")
const [shouldFocusInput, setShouldFocusInput] = useState(false)
// Restore input from sessionStorage on mount (when ChatPanel remounts due to key change)
@@ -198,6 +199,14 @@ export default function ChatPanel({
}
}, [])
// Load custom system message from localStorage on mount
useEffect(() => {
const stored = localStorage.getItem(STORAGE_KEYS.customSystemMessage)
if (stored !== null) {
setCustomSystemMessage(stored)
}
}, [])
// Check config on mount
useEffect(() => {
fetch(getApiEndpoint("/api/config"))
@@ -308,6 +317,12 @@ export default function ChatPanel({
localStorage.setItem(STORAGE_KEYS.vlmValidationEnabled, String(value))
}, [])
// Handler for custom system message change
const handleCustomSystemMessageChange = useCallback((value: string) => {
setCustomSystemMessage(value)
localStorage.setItem(STORAGE_KEYS.customSystemMessage, value)
}, [])
// Ref to store the sendMessage function for use in callbacks
const sendMessageRef = useRef<typeof sendMessage | null>(null)
@@ -1037,7 +1052,7 @@ export default function ChatPanel({
sendMessage(
{ parts },
{
body: { xml, previousXml, sessionId },
body: { xml, previousXml, sessionId, customSystemMessage },
headers: {
"x-access-code": config.accessCode,
...(config.aiProvider && {
@@ -1415,6 +1430,8 @@ export default function ChatPanel({
onMinimalStyleChange={setMinimalStyle}
vlmValidationEnabled={vlmValidationEnabled}
onVlmValidationChange={handleVlmValidationChange}
customSystemMessage={customSystemMessage}
onCustomSystemMessageChange={handleCustomSystemMessageChange}
onOpenModelConfig={() => setShowModelConfigDialog(true)}
/>
components/settings-dialog.tsx
+32
View File
@@ -22,6 +22,7 @@ import {
SelectValue,
} from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Textarea } from "@/components/ui/textarea"
import { useDictionary } from "@/hooks/use-dictionary"
import { getApiEndpoint } from "@/lib/base-path"
import { i18n, type Locale } from "@/lib/i18n/config"
@@ -71,6 +72,8 @@ interface SettingsDialogProps {
vlmValidationEnabled?: boolean
onVlmValidationChange?: (value: boolean) => void
onOpenModelConfig?: () => void
customSystemMessage?: string
onCustomSystemMessageChange?: (value: string) => void
}
export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
@@ -95,6 +98,8 @@ function SettingsContent({
vlmValidationEnabled = false,
onVlmValidationChange = () => {},
onOpenModelConfig,
customSystemMessage = "",
onCustomSystemMessageChange = () => {},
}: SettingsDialogProps) {
const dict = useDictionary()
const router = useRouter()
@@ -457,6 +462,33 @@ function SettingsContent({
</div>
</SettingItem>
{/* Custom System Message */}
<div className="py-4 space-y-3">
<div className="space-y-0.5">
<Label
htmlFor="custom-system-message"
className="text-sm font-medium"
>
{dict.settings.customSystemMessage}
</Label>
<p className="text-xs text-muted-foreground">
{dict.settings.customSystemMessageDescription}
</p>
</div>
<Textarea
id="custom-system-message"
value={customSystemMessage}
onChange={(e) =>
onCustomSystemMessageChange(e.target.value)
}
placeholder={
dict.settings.customSystemMessagePlaceholder
}
className="min-h-[80px] max-h-[160px] text-sm"
maxLength={5000}
/>
</div>
{/* Send Shortcut */}
<SettingItem
label={dict.settings.sendShortcut}
lib/i18n/dictionaries/en.json
+4 -1
View File
@@ -126,7 +126,10 @@
"diagramValidation": "Diagram Validation (Experimental)",
"diagramValidationDescription": "Use a vision language model to validate generated diagrams. Requires a VLM like GPT-5.2 or Sonnet-4.5.",
"enabled": "Enabled",
"disabled": "Disabled"
"disabled": "Disabled",
"customSystemMessage": "Custom System Message",
"customSystemMessageDescription": "Add custom instructions appended to the AI's system prompt.",
"customSystemMessagePlaceholder": "e.g., Always use blue color scheme for diagrams..."
},
"save": {
"title": "Save Diagram",
lib/i18n/dictionaries/ja.json
+4 -1
View File
@@ -126,7 +126,10 @@
"diagramValidation": "ダイアグラム検証（実験的）",
"diagramValidationDescription": "視覚言語モデルを使用して生成されたダイアグラムを検証します。GPT-5.2 や Sonnet-4.5 などの VLM が必要です。",
"enabled": "有効",
"disabled": "無効"
"disabled": "無効",
"customSystemMessage": "カスタムシステムメッセージ",
"customSystemMessageDescription": "AIのシステムプロンプトに追加されるカスタム指示を入力します。",
"customSystemMessagePlaceholder": "例：ダイアグラムには常に青色のカラースキームを使用..."
},
"save": {
"title": "ダイアグラムを保存",
lib/i18n/dictionaries/zh-Hant.json
+4 -1
View File
@@ -126,7 +126,10 @@
"diagramValidation": "圖表驗證（實驗性）",
"diagramValidationDescription": "使用視覺語言模型驗證產生的圖表。需要支援視覺的模型，如 GPT-5.2 或 Sonnet-4.5。",
"enabled": "已啟用",
"disabled": "已停用"
"disabled": "已停用",
"customSystemMessage": "自訂系統訊息",
"customSystemMessageDescription": "新增自訂指示，將附加到 AI 的系統提示末尾。",
"customSystemMessagePlaceholder": "例如：圖表始終使用藍色配色方案..."
},
"save": {
"title": "儲存圖表",
lib/i18n/dictionaries/zh.json
+4 -1
View File
@@ -126,7 +126,10 @@
"diagramValidation": "图表验证（实验性）",
"diagramValidationDescription": "使用视觉语言模型验证生成的图表。需要支持视觉的模型，如 GPT-5.2 或 Sonnet-4.5。",
"enabled": "已启用",
"disabled": "已禁用"
"disabled": "已禁用",
"customSystemMessage": "自定义系统消息",
"customSystemMessageDescription": "添加自定义指令，将附加到 AI 的系统提示末尾。",
"customSystemMessagePlaceholder": "例如：图表始终使用蓝色配色方案..."
},
"save": {
"title": "保存图表",
lib/storage.ts
+3
View File
@@ -27,4 +27,7 @@ export const STORAGE_KEYS = {
// Diagram validation
vlmValidationEnabled: "next-ai-draw-io-vlm-validation-enabled",
// Custom system message
customSystemMessage: "next-ai-draw-io-custom-system-message",
} as const