Merge pull request #302 from zjowowen/fix/slash-enter-send

fix: allow slash-prefixed first messages to send by Enter

Author: zjowowen

src/components/agent/agent-panel.tsx

@@ -60,6 +60,10 @@ import {
   stripFilePartsForStorage,
 } from "@/lib/ai/message-attachments";
 import { ImageAttachmentGrid } from "@/components/ui/image-attachment-grid";
+import {
+  getMatchingSkillsForSlashQuery,
+  shouldAutocompleteCaptureEnter,
+} from "./slash-command";
 
 type AgentMode = "long-agent" | "agent" | "plan" | "ask";
 type ModelSelection = { provider: string; model: string };
@@ -1263,6 +1267,14 @@ export function AgentPanel({
   };
 
   const slashQuery = input.startsWith("/") ? input.slice(1) : "";
+  const matchingSlashSkills = useMemo(
+    () => getMatchingSkillsForSlashQuery(availableSkills, slashQuery),
+    [availableSkills, slashQuery]
+  );
+  const autocompleteCapturesEnter = shouldAutocompleteCaptureEnter(
+    showAutocomplete,
+    matchingSlashSkills
+  );
 
   return (
     <div ref={containerRef} className="relative flex h-full min-w-0 flex-col bg-agent-bg text-agent-foreground font-mono text-sm overflow-hidden">
@@ -1373,7 +1385,7 @@ export function AgentPanel({
       {/* Input area with autocomplete */}
       <div className="relative z-10 flex shrink-0 flex-col overflow-hidden bg-agent-bg/80 backdrop-blur-sm" style={{ height: inputHeight }}>
         {/* Slash command autocomplete */}
-        {showAutocomplete && availableSkills.length > 0 && (
+        {autocompleteCapturesEnter && (
           <SkillAutocomplete
             query={slashQuery}
             skills={availableSkills}
@@ -1513,7 +1525,7 @@ export function AgentPanel({
             onPaste={handleInputPaste}
             onKeyDown={(e) => {
               // Enter without Shift sends message, Shift+Enter creates new line
-              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && !showAutocomplete) {
+              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && !autocompleteCapturesEnter) {
                 e.preventDefault();
                 handleSend();
               }

src/components/agent/slash-command.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import type { Skill } from "@/types";
+import {
+  getMatchingSkillsForSlashQuery,
+  shouldAutocompleteCaptureEnter,
+} from "./slash-command";
+
+function createSkill(overrides: Partial<Skill>): Skill {
+  return {
+    id: "skill-1",
+    workspaceId: null,
+    name: "Summarize Notes",
+    slug: "summarize",
+    description: null,
+    systemPrompt: "",
+    steps: null,
+    allowedTools: null,
+    parameters: null,
+    isEnabled: true,
+    createdAt: "",
+    updatedAt: "",
+    ...overrides,
+  };
+}
+
+describe("slash command helpers", () => {
+  it("does not capture Enter when slash autocomplete has no matching skills", () => {
+    const matches = getMatchingSkillsForSlashQuery(
+      [createSkill({ slug: "summarize" })],
+      "plain-message"
+    );
+
+    expect(matches).toEqual([]);
+    expect(shouldAutocompleteCaptureEnter(true, matches)).toBe(false);
+  });
+
+  it("captures Enter when slash autocomplete has matching enabled skills", () => {
+    const matches = getMatchingSkillsForSlashQuery(
+      [createSkill({ slug: "summarize" })],
+      "sum"
+    );
+
+    expect(matches).toHaveLength(1);
+    expect(shouldAutocompleteCaptureEnter(true, matches)).toBe(true);
+  });
+
+  it("ignores disabled skills when building slash matches", () => {
+    const matches = getMatchingSkillsForSlashQuery(
+      [createSkill({ slug: "summarize", isEnabled: false })],
+      "sum"
+    );
+
+    expect(matches).toEqual([]);
+  });
+});

src/components/agent/slash-command.ts

@@ -0,0 +1,25 @@
+import type { Skill } from "@/types";
+
+export function getMatchingSkillsForSlashQuery(
+  skills: Skill[],
+  query: string
+): Skill[] {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) {
+    return skills.filter((skill) => skill.isEnabled);
+  }
+
+  return skills.filter(
+    (skill) =>
+      skill.isEnabled &&
+      (skill.slug.includes(normalizedQuery) ||
+        skill.name.toLowerCase().includes(normalizedQuery))
+  );
+}
+
+export function shouldAutocompleteCaptureEnter(
+  showAutocomplete: boolean,
+  matchingSkills: Skill[]
+): boolean {
+  return showAutocomplete && matchingSkills.length > 0;
+}

src/components/skills/skill-autocomplete.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState, useRef } from "react";
 import { useTranslations } from "next-intl";
 import { Zap } from "lucide-react";
 import type { Skill } from "@/types";
+import { getMatchingSkillsForSlashQuery } from "@/components/agent/slash-command";
 
 interface SkillAutocompleteProps {
   query: string;
@@ -23,12 +24,7 @@ export function SkillAutocomplete({
   const listRef = useRef<HTMLDivElement>(null);
   const [trackedQuery, setTrackedQuery] = useState(query);
 
-  const filtered = skills.filter(
-    (s) =>
-      s.isEnabled &&
-      (s.slug.includes(query.toLowerCase()) ||
-        s.name.toLowerCase().includes(query.toLowerCase()))
-  );
+  const filtered = getMatchingSkillsForSlashQuery(skills, query);
 
   if (trackedQuery !== query) {
     setTrackedQuery(query);