feat(web): add skills menu

web/src/views/ApplicationConfig/components/AiPromptModal.tsx

@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:26:44 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 16:26:44 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 10:31:12
  */
 /**
  * AI Prompt Assistant Modal
@@ -38,7 +38,8 @@ interface AiPromptModalProps {
   /** Callback to refresh prompt with optimized value */
   refresh: (value: string) => void;
   /** Default model to pre-select */
-  defaultModel: ModelListItem | null;
+  defaultModel?: ModelListItem | null;
+  source?: 'app' | 'skills'
 }
 
 /**
@@ -48,6 +49,7 @@ interface AiPromptModalProps {
 const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
   refresh,
   defaultModel,
+  source = 'application'
 }, ref) => {
   const { t } = useTranslation();
   const { message } = App.useApp()
@@ -92,11 +94,11 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
   const handleSend = () => {
     if (!promptSession) return
     if (!values.model_id) {
-      message.warning(t('common.selectPlaceholder', { title: t('application.model') }))
+      message.warning(t('common.selectPlaceholder', { title: t(`${source}.model`) }))
       return
     }
     if (!values.message) {
-      message.warning(t('application.promptChatPlaceholder'))
+      message.warning(t(`${source}.promptChatPlaceholder`))
       return
     }
     const messageContent = values.message
@@ -144,15 +146,10 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
         }
       })
     };
-    updatePromptMessages(promptSession, values, handleStreamMessage)
-      // .then(res => {
-      //   const response = res as { prompt: string; desc: string; variables: string[] }
-      //   form.setFieldsValue({ current_prompt: response.prompt })
-      //   setChatList(prev => {
-      //     return [...prev, { role: 'assistant', content: response.desc }]
-      //   })
-      //   setVariables(response.variables)
-      // })
+    updatePromptMessages(promptSession, {
+      ...values,
+      skill: source === 'skills'
+    }, handleStreamMessage)
       .finally(() => {
         setLoading(false)
       })
@@ -192,7 +189,7 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
   console.log(values)
   return (
     <RbModal
-      title={t('application.AIPromptAssistant')}
+      title={t(`${source}.AIPromptAssistant`)}
       open={visible}
       onCancel={handleClose}
       footer={null}
@@ -202,7 +199,7 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
         <div className="rb:grid rb:grid-cols-2 rb:border-t rb:border-t-[#EBEBEB]">
           <div className="rb:border-r rb:border-r-[#EBEBEB] rb:pr-6 rb:pt-3">
             <Form.Item
-              label={t('application.model')}
+              label={t(`${source}.model`)}
               name="model_id"
               rules={[{ required: true, message: t('common.pleaseSelect') }]}
             >
@@ -219,18 +216,18 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
             <ChatContent
               classNames="rb:h-100.5 rb:px-[16px] rb:py-[20px] rb:bg-[#FBFDFF] rb:border rb:border-[#DFE4ED] rb:rounded-[8px]"
               contentClassNames="rb:max-w-[260px]!"
-              empty={<Empty url={ConversationEmptyIcon} title={t('application.promptChatEmpty')} isNeedSubTitle={false} size={[240, 200]} className="rb:h-full" />}
+              empty={<Empty url={ConversationEmptyIcon} title={t(`${source}.promptChatEmpty`)} isNeedSubTitle={false} size={[240, 200]} className="rb:h-full" />}
               data={chatList || []}
               streamLoading={false}
               labelPosition="top"
-              labelFormat={(item) => item.role === 'user' ? t('application.you') : t('application.ai')}
+              labelFormat={(item) => item.role === 'user' ? t(`${source}.you`) : t(`${source}.ai`)}
             />
 
             <div className="rb:flex rb:items-center rb:gap-2.5 rb:py-4">
               <Form.Item name="message" className="rb:mb-0!" style={{ width: 'calc(100% - 54px)' }}>
                 <Input
                   className="rb:h-11 rb:shadow-[0px_2px_8px_0px_rgba(33,35,50,0.1)]"
-                  placeholder={t('application.promptChatPlaceholder')}
+                  placeholder={t(`${source}.promptChatPlaceholder`)}
                   onPressEnter={handleSend}
                 />
               </Form.Item>
@@ -242,12 +239,12 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
 
           <div className="rb:pl-6 rb:pt-3">
             <Row>
-              <Col span={12}>
-                <Form.Item label={t('application.conversationOptimizationPrompt')}></Form.Item>
-              </Col>
-              <Col span={12} className="rb:text-right">
-                <Button onClick={handleAdd}>+ {t('application.addVariable')}</Button>
+              <Col span={source === 'application' ? 12 : 24}>
+                <Form.Item label={t(`${source}.conversationOptimizationPrompt`)}></Form.Item>
               </Col>
+              {source === 'application' && <Col span={12} className="rb:text-right">
+                <Button onClick={handleAdd}>+ {t(`${source}.addVariable`)}</Button>
+              </Col>}
             </Row>
             <Form.Item name="current_prompt">
               <Editor 
@@ -258,7 +255,7 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
             </Form.Item>
             <div className="rb:grid rb:grid-cols-2 rb:gap-4 rb:mt-6">
               <Button block disabled={!values?.current_prompt} onClick={handleCopy}>{t('common.copy')}</Button>
-              <Button type="primary" block disabled={!values?.current_prompt} onClick={handleApply}>{t('application.apply')}</Button>
+              <Button type="primary" block disabled={!values?.current_prompt} onClick={handleApply}>{t(`${source}.apply`)}</Button>
             </div>
           </div>
         </div>