Feature: AI project keyword suggestions

client/modules/_hooks/src/datafiles/index.ts

@@ -21,6 +21,7 @@ export { useNewFolder } from './useNewFolder';
 export { useUploadFile } from './useUploadFile';
 export { useUploadFolder } from './useUploadFolder';
 export { useFileDetail } from './useFileDetail';
+export * from './useKeywordSuggestions';
 export { useGithubListing, type TGithubFileObj } from './useGithubListing';
 
 export * from './usePathDisplayName';

client/modules/_hooks/src/datafiles/useKeywordSuggestions.ts

@@ -0,0 +1,33 @@
+import { useQuery } from '@tanstack/react-query';
+import apiClient from '../apiClient';
+
+export type TGetKeywordSuggestionsParams = {
+  title: string;
+  description: string;
+};
+
+export interface KeywordSuggestionResponse {
+  response: string[];
+}
+
+export function useKeywordSuggestions(
+  searchParams: TGetKeywordSuggestionsParams
+) {
+  return useQuery({
+    queryKey: [
+      'keywordSuggestions',
+      ,
+      searchParams.title.trim(),
+      searchParams.description.trim(),
+    ],
+    queryFn: async () => {
+      const res = await apiClient.get<KeywordSuggestionResponse>(
+        '/api/keyword-suggestions/',
+        { params: searchParams }
+      );
+      return res.data.response;
+    },
+    enabled: !!searchParams.title.trim() && !!searchParams.description.trim(),
+    staleTime: 0,
+  });
+}

client/modules/datafiles/src/projects/forms/BaseProjectForm.tsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Form, Input, Popconfirm, Select } from 'antd';
+import { Alert, Button, Form, Input, Popconfirm, Select, Tag } from 'antd';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   nhTypeOptions,
@@ -24,6 +24,7 @@ import {
 import { customRequiredMark } from './_common';
 import { AuthorSelect } from './_fields/AuthorSelect';
 import { ProjectTypeRadioSelect } from '../modals/ProjectTypeRadioSelect';
+import { KeywordSuggestor } from './KeywordSuggestor';
 
 export const ProjectTypeInput: React.FC<{
   projectType: TBaseProjectValue['projectType'];
@@ -372,23 +373,6 @@ export const BaseProjectForm: React.FC<{
         <HazardEventsInput name="nhEvents" />
       </Form.Item>
 
-      {projectType !== 'None' && (
-        <Form.Item label="Keywords" required>
-          Choose informative words that indicate the content of the project.
-          Keywords should be comma-separated.
-          <Form.Item
-            name="keywords"
-            rules={[{ required: true }]}
-            className="inner-form-item"
-          >
-            <Select
-              mode="tags"
-              notFoundContent={null}
-              tokenSeparators={[',']}
-            ></Select>
-          </Form.Item>
-        </Form.Item>
-      )}
       <Form.Item label="Project Description" required>
         What is this project about? How can data in this project be reused? How
         is this project unique? Who is the audience? Description must be between
@@ -414,6 +398,31 @@ export const BaseProjectForm: React.FC<{
           <Input.TextArea autoSize={{ minRows: 4 }} />
         </Form.Item>
       </Form.Item>
+
+      {projectType !== 'None' && (
+        <Form.Item label="Keywords" required>
+          Choose informative words that indicate the content of the project.
+          Keywords should be comma-separated.
+          <Form.Item
+            name="keywords"
+            rules={[{ required: true }]}
+            className="inner-form-item"
+          >
+            <Select
+              mode="tags"
+              notFoundContent={null}
+              tokenSeparators={[',']}
+            />
+          </Form.Item>
+          <KeywordSuggestor
+            form={form}
+            titlePath={['title']}
+            descriptionPath={['description']}
+            keywordsPath={['keywords']}
+          />
+        </Form.Item>
+      )}
+
       {hasValidationErrors && (
         <Alert
           type="error"

client/modules/datafiles/src/projects/forms/KeywordSuggestor.tsx

@@ -0,0 +1,95 @@
+// KeywordSuggestor.tsx
+import React, { useMemo } from 'react';
+import { Form, Tag, Spin } from 'antd';
+import type { FormInstance } from 'antd';
+import { useDebounceValue, useKeywordSuggestions } from '@client/hooks';
+
+type Props = {
+  form: FormInstance;
+  titlePath: (string | number)[];
+  descriptionPath: (string | number)[];
+  keywordsPath: (string | number)[];
+};
+
+export const KeywordSuggestor: React.FC<Props> = ({
+  form,
+  titlePath,
+  descriptionPath,
+  keywordsPath,
+}) => {
+  const title: string = Form.useWatch(titlePath, form) ?? '';
+  const description: string = Form.useWatch(descriptionPath, form) ?? '';
+  const keywords: string[] = Form.useWatch(keywordsPath, form) ?? [];
+
+  const debounced = useDebounceValue(
+    { title: title.trim(), description: description.trim() },
+    800
+  );
+
+  const {
+    data: suggestions = [],
+    isLoading,
+    isFetching,
+    error,
+  } = useKeywordSuggestions(debounced);
+
+  const available = useMemo(
+    () => suggestions.filter((kw) => !keywords.includes(kw)),
+    [suggestions, keywords]
+  );
+
+  const hasText =
+    debounced.title.length > 0 && debounced.description.length > 0;
+
+  if (!hasText) {
+    return (
+      <div style={{ marginTop: 8 }}>
+        <span>Suggested Keywords: </span>
+        <em style={{ color: 'rgba(0,0,0,.45)' }}>
+          Enter a project <strong>title</strong> and{' '}
+          <strong>description</strong> to see keyword suggestions.
+        </em>
+      </div>
+    );
+  }
+
+  if (error) return null;
+
+  const list = available.slice(0, 10);
+  const loading = isLoading || isFetching;
+
+  return (
+    <div style={{ marginTop: 8 }}>
+      <p style={{ marginBottom: 6 }}>Suggested Keywords:</p>
+
+      {/* While loading and nothing cached yet, show a friendly status instead of an empty area */}
+      {loading && list.length === 0 ? (
+        <div
+          aria-live="polite"
+          style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}
+        >
+          <Spin size="small" />
+          <em style={{ color: 'rgba(0,0,0,.45)' }}>Finding suggestions…</em>
+        </div>
+      ) : list.length === 0 ? (
+        <em style={{ color: 'rgba(0,0,0,.45)' }}>No suggestions yet.</em>
+      ) : (
+        list.map((kw) => (
+          <Tag
+            key={kw}
+            color="blue"
+            style={{ cursor: 'pointer', marginBottom: 4 }}
+            onClick={() => {
+              const current: string[] = form.getFieldValue(keywordsPath) || [];
+              if (!current.includes(kw)) {
+                form.setFieldValue(keywordsPath, [...current, kw]);
+              }
+            }}
+          >
+            {kw}
+          </Tag>
+        ))
+      )}
+    </div>
+  );
+};