LLMs: Anthropic Skills model params editor

src/modules/llms/models-modal/AnthropicSkillsConfig.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { Box, Chip, FormControl } from '@mui/joy';
+
+import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
+import { Release } from '~/common/app.release';
+
+
+// configuration
+const ENABLE_ANTHROPIC_SKILLS_CONFIG = Release.IsNodeDevBuild; // FIXME: enable on non-dev builds too
+
+
+// [EDITORIAL] Anthropic Default Skills
+const DEFAULT_SKILLS = [
+  { id: 'xlsx', label: 'Excel' },
+  { id: 'pptx', label: 'PowerPoint' },
+  { id: 'pdf', label: 'PDF' },
+  { id: 'docx', label: 'Word' },
+] as const;
+
+
+export function AnthropicSkillsConfig({ llmVndAntSkills, onChangeParameter }: {
+  llmVndAntSkills: string | undefined;
+  onChangeParameter: (params: { llmVndAntSkills: string | undefined }) => void;
+}) {
+
+  if (!ENABLE_ANTHROPIC_SKILLS_CONFIG) return null;
+
+  const skillsArray = llmVndAntSkills ? llmVndAntSkills.split(',').map(s => s.trim()).filter(Boolean) : [];
+
+  const handleSkillToggle = (skillId: string) => {
+    const newSkills = skillsArray.includes(skillId)
+      ? skillsArray.filter(id => id !== skillId)
+      : [...skillsArray, skillId];
+    const newValue = newSkills.length > 0 ? newSkills.join(',') : undefined;
+    onChangeParameter({ llmVndAntSkills: newValue });
+  };
+
+  return (
+    <FormControl orientation='horizontal' sx={{ flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+      <FormLabelStart
+        title='Anthropic Skills (Alpha)'
+        description='Server-side'
+        // tooltip='Select which document types Claude can create using server-side Skills API. Skills run on Anthropic servers and may incur additional costs.'
+      />
+      <Box sx={{ display: 'flex', gap: 1, py: 1, flexWrap: 'wrap' }}>
+        {DEFAULT_SKILLS.map((skill) => {
+          const isSelected = skillsArray.includes(skill.id);
+          return (
+            <Chip
+              size='md'
+              key={skill.id}
+              variant={isSelected ? 'solid' : 'outlined'}
+              color={isSelected ? 'primary' : 'neutral'}
+              onClick={() => handleSkillToggle(skill.id)}
+            >
+              {skill.label}
+            </Chip>
+          );
+        })}
+      </Box>
+    </FormControl>
+  );
+}

src/modules/llms/models-modal/LLMParametersEditor.tsx

@@ -14,6 +14,8 @@ import { FormSwitchControl } from '~/common/components/forms/FormSwitchControl';
 import { InlineError } from '~/common/components/InlineError';
 import { webGeolocationRequest } from '~/common/util/webGeolocationUtils';
 
+import { AnthropicSkillsConfig } from './AnthropicSkillsConfig';
+
 
 const _UNSPECIFIED = '_UNSPECIFIED' as const;
 const _reasoningEffortOptions = [
@@ -142,10 +144,11 @@ export function LLMParametersEditor(props: {
     llmResponseTokens = FALLBACK_LLM_PARAM_RESPONSE_TOKENS, // fallback for undefined, result is number | null
     llmTemperature = FALLBACK_LLM_PARAM_TEMPERATURE, // fallback for undefined, result is number | null
     llmForceNoStream,
-    llmVndAntThinkingBudget,
-    llmVndAntWebSearch,
-    llmVndAntWebFetch,
     llmVndAnt1MContext,
+    llmVndAntSkills,
+    llmVndAntThinkingBudget,
+    llmVndAntWebFetch,
+    llmVndAntWebSearch,
     llmVndGeminiAspectRatio,
     llmVndGeminiGoogleSearch,
     llmVndGeminiShowThoughts,
@@ -305,6 +308,11 @@ export function LLMParametersEditor(props: {
       />
     )}
 
+    {showParam('llmVndAntSkills') && (
+      <AnthropicSkillsConfig llmVndAntSkills={llmVndAntSkills} onChangeParameter={onChangeParameter} />
+    )}
+
+
     {showParam('llmVndGeminiAspectRatio') && (
       <FormSelectControl
         title='Aspect Ratio'