Add markdown to history

beda-software · Dec 17, 2023 · 0645f45 · 0645f45
1 parent 31a4ecf
commit 0645f45
Show file tree

Hide file tree

Showing 6 changed files with 696 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.45.1",
+        "react-markdown": "^9.0.1",
         "react-phone-input-2": "^2.15.1",
         "react-router-dom": "^6.14.1",
         "react-select": "^5.7.3",

diff --git a/src/containers/QuestionnaireBuilder/PromptForm.tsx b/src/containers/QuestionnaireBuilder/PromptForm.tsx
@@ -2,6 +2,7 @@ import { DeleteOutlined } from '@ant-design/icons';
 import { t } from '@lingui/macro';
 import { Button, Form, Input, Timeline } from 'antd';
 import { FormProps } from 'antd/lib/form';
+import Markdown from 'react-markdown';
 
 import s from './QuestionnaireBuilder.module.scss';
 import { QuestionnaireFromFileButton } from './QuestionnaireFromPdfButton';
@@ -38,7 +39,9 @@ export function PromptForm(props: Props) {
     const [promptForm] = Form.useForm<PromptFormInterface>();
     const disabled = isLoading;
 
-    const items = Object.keys(editHistory).map((prompt, index) => {
+    const hasHistory = Object.keys(editHistory).length > 0;
+
+    const items = Object.entries(editHistory).map(([prompt, { inputType }], index) => {
         return {
             color: isLoading ? 'gray' : prompt === selectedPrompt ? 'green' : 'blue',
             children: (
@@ -49,9 +52,15 @@ export function PromptForm(props: Props) {
                         className={s.singlePromptContainer}
                         style={disabled ? { pointerEvents: 'none' } : {}}
                     >
-                        <pre key={`${prompt} - ${index}`} className={s.prompt}>
-                            {prompt}
-                        </pre>
+                        {inputType === 'markdown' ? (
+                            <Markdown key={`${prompt} - ${index}`} className={s.markdown}>
+                                {prompt}
+                            </Markdown>
+                        ) : (
+                            <pre key={`${prompt} - ${index}`} className={s.prompt}>
+                                {prompt}
+                            </pre>
+                        )}
                     </div>
                     <div>
                         <Button
@@ -83,9 +92,9 @@ export function PromptForm(props: Props) {
             <Form.Item
                 name="prompt"
                 label={
-                    !items.length
-                        ? t`Describe requirements to a questionnaire or upload file`
-                        : t`Describe what to adjust in the questionnsaire`
+                    hasHistory
+                        ? t`Describe what to adjust in the questionnaire`
+                        : t`Describe requirements to a questionnaire or upload file`
                 }
             >
                 <TextArea rows={5} disabled={disabled} />
@@ -94,7 +103,7 @@ export function PromptForm(props: Props) {
                 <Form.Item>
                     <Button htmlType="submit" disabled={disabled}>{t`Submit`}</Button>
                 </Form.Item>
-                <QuestionnaireFromFileButton onUploadFile={onUploadFile} disabled={disabled || items.length > 0} />
+                <QuestionnaireFromFileButton onUploadFile={onUploadFile} disabled={disabled || hasHistory} />
             </div>
             <div className={s.prompts}>
                 <Timeline items={items} />

diff --git a/src/containers/QuestionnaireBuilder/QuestionnaireBuilder.module.scss b/src/containers/QuestionnaireBuilder/QuestionnaireBuilder.module.scss
@@ -9,7 +9,23 @@
 .prompt {
     padding: 4px 0;
     font-size: 14px;
-    line-height: 16px;
+    line-height: 20x;
+}
+
+.markdown {
+    padding: 4px 0;
+    line-height: 20px;
+    font-size: 14px;
+
+    * {
+        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+        font-size: 14px;
+        line-height: 20px;
+    }
+
+    p {
+        margin-bottom: 0;
+    }
 }
 
 .container {
@@ -43,4 +59,4 @@
 .submitButtons {
     display: flex;
     justify-content: space-between;
-}
+}
diff --git a/src/containers/QuestionnaireBuilder/hooks.ts b/src/containers/QuestionnaireBuilder/hooks.ts
@@ -43,14 +43,19 @@ function cleanUpQuestionnaire(questionnaire: FHIRQuestionnaire) {
 
     return { ...questionnaire, item: cleanUpItems(questionnaire.item) };
 }
+interface HistoryItem {
+    questionnaire: FHIRQuestionnaire;
+    inputType: 'markdown' | 'text';
+    input: string;
+}
 
 export function useQuestionnaireBuilder() {
     const navigate = useNavigate();
     const params = useParams();
     const [response, setResponse] = useState<RemoteData<FHIRQuestionnaire>>(notAsked);
     const [updateResponse, setUpdateResponse] = useState<RemoteData<FHIRQuestionnaire>>(notAsked);
     const [error, setError] = useState<string | undefined>();
-    const [editHistory, setEditHistory] = useState({});
+    const [editHistory, setEditHistory] = useState<Record<string, HistoryItem>>({});
     const [selectedPrompt, setSelectedPrompt] = useState<string | undefined>(undefined);
 
     useEffect(() => {
@@ -95,7 +100,10 @@ export function useQuestionnaireBuilder() {
                 if (isSuccess(saveResponse)) {
                     const newQuestionnaire = saveResponse.data;
                     setResponse(success(newQuestionnaire));
-                    setEditHistory({ ...{ [prompt]: newQuestionnaire }, ...editHistory });
+                    setEditHistory({
+                        ...{ [prompt]: { questionnaire: newQuestionnaire, inputType: 'text', input: prompt } },
+                        ...editHistory,
+                    });
                     setSelectedPrompt(prompt);
                 }
 
@@ -117,20 +125,22 @@ export function useQuestionnaireBuilder() {
                 setError(undefined);
                 const saveResponse = await generateQuestionnaireFromFile(file, JSON.stringify(initialQuestionnaire));
 
-                setUpdateResponse(saveResponse);
                 if (isSuccess(saveResponse)) {
                     const newQuestionnaire = saveResponse.data.questionnaire;
                     const markdown = saveResponse.data.markdown;
+                    setUpdateResponse(success(saveResponse.data.questionnaire));
                     setResponse(success(newQuestionnaire));
-                    setEditHistory({ ...{ [markdown]: newQuestionnaire } });
+                    setEditHistory({
+                        [markdown]: { questionnaire: newQuestionnaire, input: markdown, inputType: 'markdown' },
+                    });
                     setSelectedPrompt(markdown);
                 }
-
                 if (isFailure(saveResponse)) {
                     setError(
                         saveResponse.error?.message || 'Something went wrong please try again or reupload the file',
                     );
                     setResponse(success(response.data));
+                    setUpdateResponse(saveResponse);
                 }
             }
         },
@@ -191,7 +201,7 @@ export function useQuestionnaireBuilder() {
 
     const onPromptSelect = useCallback(
         (prompt: string) => {
-            setResponse(success(editHistory[prompt]));
+            setResponse(success(editHistory[prompt]!.questionnaire));
             setSelectedPrompt(prompt);
         },
         [editHistory],
@@ -204,7 +214,7 @@ export function useQuestionnaireBuilder() {
             setEditHistory(currentPrompts);
             const activePrompt = Object.keys(currentPrompts)[0]!;
             onPromptSelect(activePrompt);
-            setResponse(success(editHistory[activePrompt]));
+            setResponse(success(editHistory[activePrompt]!.questionnaire));
         },
         [editHistory, onPromptSelect],
     );

diff --git a/src/services/questionnaire-builder.ts b/src/services/questionnaire-builder.ts
@@ -1,3 +1,4 @@
+import { Questionnaire } from 'fhir/r4b';
 import { service } from 'fhir-react';
 
 import config from 'shared/src/config';
@@ -7,7 +8,7 @@ import { getToken } from './auth';
 export async function generateQuestionnaire(prompt: string, questionnaire?: string) {
     const appToken = getToken();
 
-    return await service<any>({
+    return await service<Questionnaire>({
         baseURL: config.aiQuestionnaireBuilderUrl,
         url: `/questionnaire`,
         method: 'POST',
@@ -26,7 +27,7 @@ export async function generateQuestionnaireFromFile(file: File, questionnaire?:
     }
     const appToken = getToken();
 
-    return await service<any>({
+    return await service<{ questionnaire: Questionnaire; markdown: string }>({
         baseURL: config.aiQuestionnaireBuilderUrl,
         url: `/questionnaire-from-file`,
         method: 'POST',