[PROD RELEASE] - Updates & Fixes

src/apps/admin/src/lib/components/common/TableMobile/TableMobile.tsx

@@ -15,6 +15,7 @@ interface Props<T> {
     readonly columns: ReadonlyArray<MobileTableColumn<T>[]>
     readonly data: ReadonlyArray<T>
     className?: string
+    readonly rowClassName?: (data: T) => string | undefined
 }
 
 function getKey(key: (string | number)[]): string {
@@ -33,10 +34,13 @@ export const TableMobile: <T extends { [propertyName: string]: any }>(
                         {props.columns.map((itemColumns, indexColumns) => (
                             <tr
                                 key={getKey([indexData, indexColumns])}
-                                className={classNames({
-                                    [styles.isEvenRow]: indexData % 2 === 1,
-                                    [styles.isOddRow]: indexData % 2 === 0,
-                                })}
+                                className={classNames(
+                                    props.rowClassName?.(itemData),
+                                    {
+                                        [styles.isEvenRow]: indexData % 2 === 1,
+                                        [styles.isOddRow]: indexData % 2 === 0,
+                                    },
+                                )}
                             >
                                 {itemColumns.map(
                                     (itemItemColumns, indexItemColumns) => (

src/apps/copilots/src/pages/copilot-opportunity-details/styles.module.scss

@@ -15,11 +15,17 @@
     margin-top: $sp-2;
     padding: $sp-6 0;
     color: $teal-100;
+    text-align: left;
+    word-break: break-word;
+    line-height: 1.2;         
+
 }
 
 @media (max-width: 767px) {
     .header {
-        line-height: 48px;
+        font-size: 32px;         
+        line-height: 38px;
+
     }
 }
 
@@ -89,4 +95,5 @@
 
 .textCaps {
     text-transform: capitalize;
-}
+}
+

src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/OpportunityDetails.tsx

@@ -15,9 +15,9 @@ const OpportunityDetails: FC<{
             </div>
             <h2 className={styles.subHeading}> Description </h2>
             {props.opportunity?.overview && (
-                <div dangerouslySetInnerHTML={{
-                    __html: props.opportunity.overview.replace(/\n/g, '<br />'),
-                }}
+                <div
+                    className={styles.overviewContent}
+                    dangerouslySetInnerHTML={{ __html: props.opportunity.overview }}
                 />
             )}
         </div>

src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/styles.module.scss

@@ -40,4 +40,68 @@
     border-radius: 10px;
     white-space: nowrap;
     font-size: 14px;
+}
+
+.overviewContent {
+    font-size: 14px;
+    line-height: 22px;
+    font-family: 'Roboto', Arial, Helvetica, sans-serif;
+
+    p {
+        margin: 0 0 8px 0;
+    }
+
+    strong, b {
+        font-weight: 700;
+    }
+
+    em, i {
+        font-style: italic;
+    }
+
+    u {
+        text-decoration: underline;
+    }
+
+    s {
+        text-decoration: line-through;
+    }
+
+    a {
+        color: #0d61bf;
+        text-decoration: underline;
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
+
+    ul, ol {
+        margin: 0 0 8px 0;
+        padding-left: 24px;
+    }
+
+    ul {
+        list-style-type: disc;
+    }
+
+    ol {
+        list-style-type: decimal;
+    }
+
+    table {
+        border-collapse: collapse;
+        width: 100%;
+        margin: 0 0 8px 0;
+
+        td, th {
+            border: 1px solid #d4d4d4;
+            padding: 8px 12px;
+        }
+
+        th {
+            background-color: #f5f5f5;
+            font-weight: 700;
+        }
+    }
 }

src/apps/copilots/src/pages/copilot-request-form/index.tsx

@@ -1,13 +1,15 @@
-import { FC, useContext, useEffect, useMemo, useState } from 'react'
+import { FC, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { bind, debounce, isEmpty, pick } from 'lodash'
+import { mutate } from 'swr'
 import { toast } from 'react-toastify'
 import { Params, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import classNames from 'classnames'
 
+import { EnvironmentConfig } from '~/config'
 import { profileContext, ProfileContextData } from '~/libs/core'
 import { Button, IconSolid, InputDatePicker, InputMultiselectOption,
-    InputRadio, InputSelect, InputSelectReact, InputText, InputTextarea } from '~/libs/ui'
-import { extractSkillsFromText, InputSkillSelector } from '~/libs/shared'
+    InputRadio, InputSelect, InputSelectReact, InputText } from '~/libs/ui'
+import { extractSkillsFromText, FieldHtmlEditor, InputSkillSelector } from '~/libs/shared'
 
 import { getProject, getProjects, ProjectsResponse, useProjects } from '../../services/projects'
 import { ProjectTypes, ProjectTypeValues } from '../../constants'
@@ -35,12 +37,13 @@ const editableFields = [
     'tzRestrictions',
     'numHoursPerWeek',
 ]
-
 // eslint-disable-next-line
 const CopilotRequestForm: FC<{}> = () => {
     const { profile }: ProfileContextData = useContext(profileContext)
     const navigate = useNavigate()
     const routeParams: Params<string> = useParams()
+    const requestUrl = routeParams.requestId
+        ? `${EnvironmentConfig.API.V6}/projects/copilots/requests/${routeParams.requestId}` : undefined
     const [params] = useSearchParams()
 
     const [formValues, setFormValues] = useState<any>({})
@@ -194,6 +197,18 @@ const CopilotRequestForm: FC<{}> = () => {
         setIsFormChanged(true)
     }
 
+    const overviewInitialized = useRef<boolean>(false)
+    function handleOverviewChange(content: string): void {
+        overviewInitialized.current = true
+        setFormValues((prev: any) => ({ ...prev, overview: content }))
+        setFormErrors((prev: any) => {
+            const updated = { ...prev }
+            delete updated.overview
+            return updated
+        })
+        setIsFormChanged(true)
+    }
+
     function handleSkillsChange(ev: any): void {
         const options = (ev.target.value as unknown) as InputMultiselectOption[]
         const updatedSkills = options.map(v => ({
@@ -265,8 +280,15 @@ const CopilotRequestForm: FC<{}> = () => {
     }
 
     // Check if overview has enough content for AI processing
+    function stripHtml(html: string): string {
+        const doc = new DOMParser()
+            .parseFromString(html, 'text/html')
+        return doc.body.textContent || ''
+    }
+
     const canGenerateSkills = useMemo(() => {
-        const overview = formValues.overview?.trim() || ''
+        const overview = stripHtml(formValues.overview || '')
+            .trim()
         return overview.length >= MIN_OVERVIEW_LENGTH && !isGeneratingSkills
     }, [formValues.overview, isGeneratingSkills])
 
@@ -289,7 +311,8 @@ const CopilotRequestForm: FC<{}> = () => {
             { condition: !formValues.paymentType, key: 'paymentType', message: 'Selection is required' },
             { condition: !formValues.projectType, key: 'projectType', message: 'Selecting project type is required' },
             {
-                condition: !formValues.overview || formValues.overview.trim().length < 10,
+                condition: stripHtml(formValues.overview || '')
+                    .trim().length < 10,
                 key: 'overview',
                 message: 'Project overview must be at least 10 characters',
             },
@@ -365,6 +388,10 @@ const CopilotRequestForm: FC<{}> = () => {
                         copilotRequestData ? 'Copilot request updated successfully'
                             : 'Copilot request sent successfully',
                     )
+                    if (requestUrl) {
+                        mutate(requestUrl)
+                    }
+
                     setFormValues({
                         complexity: '',
                         numHoursPerWeek: '',
@@ -381,6 +408,7 @@ const CopilotRequestForm: FC<{}> = () => {
                     setIsFormChanged(false)
                     setFormErrors({})
                     setPaymentType('')
+                    overviewInitialized.current = false
                     // Added a small timeout for the toast to be visible properly to the users
                     setTimeout(() => {
                         navigate(`${rootRoute}/requests`)
@@ -404,7 +432,13 @@ const CopilotRequestForm: FC<{}> = () => {
         handleProjectSearch(inputValue)
             .then(callback)
     }, 300), [])
-
+    const editorKey = useMemo(
+        () => (copilotRequestData?.id ?? 'new'),
+        [copilotRequestData?.id],
+    )
+    useEffect(() => {
+        overviewInitialized.current = false
+    }, [copilotRequestData])
     return (
         <div className={classNames('d-flex flex-column justify-content-center align-items-center', styles.container)}>
             <div className={styles.form}>
@@ -529,13 +563,14 @@ const CopilotRequestForm: FC<{}> = () => {
                     <p className={styles.formRow}>
                         Please provide an overview of the project the copilot will undertake
                     </p>
-                    <InputTextarea
+                    <FieldHtmlEditor
+                        key={editorKey}
                         label='Project overview'
                         name='overview'
                         placeholder='A minimum of three sentences explaining the
                          type of work and project which is to be undertaken.'
-                        value={formValues.overview}
-                        onChange={bind(handleFormValueChange, this, 'overview')}
+                        value={overviewInitialized.current ? undefined : formValues.overview}
+                        onChange={handleOverviewChange}
                         error={formErrors.overview}
                         dirty
                     />
@@ -555,7 +590,8 @@ const CopilotRequestForm: FC<{}> = () => {
                         </div>
                         {!canGenerateSkills
                             && formValues.overview
-                            && formValues.overview.trim().length < MIN_OVERVIEW_LENGTH
+                            && stripHtml(formValues.overview)
+                                .trim().length < MIN_OVERVIEW_LENGTH
                             && (
                                 <p className={styles.helperText}>
                                     Add at least

src/apps/copilots/src/pages/copilot-request-form/styles.module.scss

@@ -190,3 +190,20 @@ $gradient: linear-gradient(
         color: black;
     }
 }
+.richTextWrapper {
+    border: 1px solid #aaaaaa;
+    border-radius: 0.375rem;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+
+    &:focus-within {
+        border-color: #137D60;
+    }
+}
+
+.richTextError {
+    border: 2px solid $red-100;
+    border-radius: 0.375rem;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}

src/apps/copilots/src/pages/copilot-requests/copilot-request-modal/CopilotRequestModal.tsx

@@ -114,7 +114,10 @@ const CopilotRequestModal: FC<CopilotRequestModalProps> = props => {
                 </div>
                 <div className={styles.detailsLine}>
                     <div>Overview</div>
-                    <div>{props.request.overview}</div>
+                    <div
+                        className={styles.overviewContent}
+                        dangerouslySetInnerHTML={{ __html: props.request.overview ?? '' }}
+                    />
                 </div>
                 <div className={styles.detailsLine}>
                     <div>Skills</div>