diff --git a/echo/frontend/src/components/chat/TemplatesModal.tsx b/echo/frontend/src/components/chat/TemplatesModal.tsx index 30ec6576..46ce57ca 100644 --- a/echo/frontend/src/components/chat/TemplatesModal.tsx +++ b/echo/frontend/src/components/chat/TemplatesModal.tsx @@ -115,7 +115,7 @@ export const TemplatesModal = ({ - Want to add a template to ECHO?{" "} + Want to add a template to "Dembrane"?{" "} + {text} ); @@ -1066,6 +1071,9 @@ export const ConversationAccordion = ({ key={tagId} size="sm" withRemoveButton + classNames={{ + root: "!bg-[var(--mantine-primary-color-light)] !font-medium", + }} onRemove={() => setSelectedTagIds((prev) => prev.filter((id) => id !== tagId), diff --git a/echo/frontend/src/components/conversation/ConversationEdit.tsx b/echo/frontend/src/components/conversation/ConversationEdit.tsx index 072295c8..4423db16 100644 --- a/echo/frontend/src/components/conversation/ConversationEdit.tsx +++ b/echo/frontend/src/components/conversation/ConversationEdit.tsx @@ -140,6 +140,9 @@ export const ConversationEdit = ({ isDirty={!!formState.dirtyFields.tagIdList} /> } + classNames={{ + pill: "!bg-[var(--mantine-primary-color-light)] text-black font-medium", + }} data={projectTags .filter((tag) => tag && tag.id != null && tag.text != null) .map((tag) => ({ diff --git a/echo/frontend/src/components/conversation/MoveConversationButton.tsx b/echo/frontend/src/components/conversation/MoveConversationButton.tsx index 23c34c43..0ca0cfb8 100644 --- a/echo/frontend/src/components/conversation/MoveConversationButton.tsx +++ b/echo/frontend/src/components/conversation/MoveConversationButton.tsx @@ -129,7 +129,7 @@ export const MoveConversationButton = ({ > - Experimental + Beta Move to Another Project diff --git a/echo/frontend/src/components/conversation/RetranscribeConversation.tsx b/echo/frontend/src/components/conversation/RetranscribeConversation.tsx index f983dce2..96d6b7c1 100644 --- a/echo/frontend/src/components/conversation/RetranscribeConversation.tsx +++ b/echo/frontend/src/components/conversation/RetranscribeConversation.tsx @@ -108,7 +108,7 @@ export const RetranscribeConversationModal = ({ {t`Retranscribe Conversation`} - Experimental + Beta } diff --git a/echo/frontend/src/components/conversation/VerifiedArtefactsSection.tsx b/echo/frontend/src/components/conversation/VerifiedArtefactsSection.tsx index 4f035bc3..3890078b 100644 --- a/echo/frontend/src/components/conversation/VerifiedArtefactsSection.tsx +++ b/echo/frontend/src/components/conversation/VerifiedArtefactsSection.tsx @@ -13,10 +13,13 @@ import { IconRosetteDiscountCheckFilled } from "@tabler/icons-react"; import { useQuery } from "@tanstack/react-query"; import { format } from "date-fns"; import { Markdown } from "@/components/common/Markdown"; +import { useVerificationTopics } from "@/components/participant/verify/hooks"; import { getVerificationArtefacts } from "@/lib/api"; type VerifiedArtefactsSectionProps = { conversationId: string; + projectId: string; + projectLanguage?: string | null; }; const formatArtefactTime = (timestamp: string | null | undefined): string => { @@ -29,8 +32,18 @@ const formatArtefactTime = (timestamp: string | null | undefined): string => { } }; +const LANGUAGE_TO_LOCALE: Record = { + de: "de-DE", + en: "en-US", + es: "es-ES", + fr: "fr-FR", + nl: "nl-NL", +}; + export const VerifiedArtefactsSection = ({ conversationId, + projectId, + projectLanguage, }: VerifiedArtefactsSectionProps) => { // Fetch all artefacts with content for display const { data: artefacts, isLoading } = useQuery({ @@ -39,6 +52,20 @@ export const VerifiedArtefactsSection = ({ queryKey: ["verify", "conversation_artifacts", conversationId], }); + const topicsQuery = useVerificationTopics(projectId); + const locale = + LANGUAGE_TO_LOCALE[projectLanguage ?? "en"] ?? LANGUAGE_TO_LOCALE.en; + + const availableTopics = topicsQuery.data?.available_topics ?? []; + const topicLabelMap = new Map( + availableTopics.map((topic) => [ + topic.key, + topic.translations?.[locale]?.label ?? + topic.translations?.["en-US"]?.label ?? + topic.key, + ]), + ); + if (isLoading) { return ( @@ -57,12 +84,12 @@ export const VerifiedArtefactsSection = ({ - <Trans>Verified Artefacts</Trans> + <Trans>Artefacts</Trans> @@ -78,7 +105,9 @@ export const VerifiedArtefactsSection = ({ - {artefact.key || ""} + + {topicLabelMap.get(artefact.key) ?? artefact.key ?? ""} + {formattedDate && ( diff --git a/echo/frontend/src/components/dropzone/UploadConversationDropzone.tsx b/echo/frontend/src/components/dropzone/UploadConversationDropzone.tsx index 6a80951e..2dd64883 100644 --- a/echo/frontend/src/components/dropzone/UploadConversationDropzone.tsx +++ b/echo/frontend/src/components/dropzone/UploadConversationDropzone.tsx @@ -789,7 +789,7 @@ export const UploadConversationDropzone = ( } title={t`Success`} - color="green.2" + color="green" variant="light" > {t`All files were uploaded successfully.`} diff --git a/echo/frontend/src/components/layout/ParticipantHeader.tsx b/echo/frontend/src/components/layout/ParticipantHeader.tsx index 4f0c6c67..4d421aa5 100644 --- a/echo/frontend/src/components/layout/ParticipantHeader.tsx +++ b/echo/frontend/src/components/layout/ParticipantHeader.tsx @@ -76,7 +76,7 @@ export const ParticipantHeader = () => { className="rounded-full" onClick={handleCancel} > - + Cancel diff --git a/echo/frontend/src/components/participant/EchoErrorAlert.tsx b/echo/frontend/src/components/participant/EchoErrorAlert.tsx index bd2eea41..5d08461b 100644 --- a/echo/frontend/src/components/participant/EchoErrorAlert.tsx +++ b/echo/frontend/src/components/participant/EchoErrorAlert.tsx @@ -13,15 +13,15 @@ export const EchoErrorAlert = ({ error }: { error: Error }) => { > {error?.message?.includes("CONTENT_POLICY_VIOLATION") ? ( - + Sorry, we cannot process this request due to an LLM provider's content policy. ) : ( - + Something went wrong. Please try again by pressing the{" "} - ECHO button, or contact support - if the issue continues. + Go deeper button, or contact + support if the issue continues. )} diff --git a/echo/frontend/src/components/participant/ParticipantConversationAudio.tsx b/echo/frontend/src/components/participant/ParticipantConversationAudio.tsx index 621f6125..aaadbf76 100644 --- a/echo/frontend/src/components/participant/ParticipantConversationAudio.tsx +++ b/echo/frontend/src/components/participant/ParticipantConversationAudio.tsx @@ -272,14 +272,14 @@ export const ParticipantConversationAudio = () => { } if (showVerify) { return ( - + "Make it concrete" available soon ); } if (showEcho) { return ( - + "Go deeper" available soon ); diff --git a/echo/frontend/src/components/participant/ParticipantConversationAudioContent.tsx b/echo/frontend/src/components/participant/ParticipantConversationAudioContent.tsx index 7845979c..e545cdf7 100644 --- a/echo/frontend/src/components/participant/ParticipantConversationAudioContent.tsx +++ b/echo/frontend/src/components/participant/ParticipantConversationAudioContent.tsx @@ -84,7 +84,6 @@ export const ParticipantConversationAudioContent = () => { const newSearchParams = new URLSearchParams(searchParams); newSearchParams.delete("echo"); setSearchParams(newSearchParams, { replace: true }); - console.log("inside echo: ", hasEchoParam); } }, []); diff --git a/echo/frontend/src/components/participant/refine/RefineSelection.tsx b/echo/frontend/src/components/participant/refine/RefineSelection.tsx index 2638218f..327cd96c 100644 --- a/echo/frontend/src/components/participant/refine/RefineSelection.tsx +++ b/echo/frontend/src/components/participant/refine/RefineSelection.tsx @@ -1,6 +1,6 @@ import { Trans } from "@lingui/react/macro"; import { Box, Group, Progress, Stack, Text, Title } from "@mantine/core"; -import { IconArrowDownToArc, IconMessageFilled } from "@tabler/icons-react"; +import { IconArrowDownToArc, IconMessage } from "@tabler/icons-react"; import { useParams } from "react-router"; import { useParticipantProjectById } from "@/components/participant/hooks"; import { useI18nNavigate } from "@/hooks/useI18nNavigate"; @@ -59,7 +59,7 @@ export const RefineSelection = () => { className="h-full px-2 py-6 justify-center" > - + <Trans id="participant.refine.make.concrete"> Make it concrete diff --git a/echo/frontend/src/components/participant/verify/VerifiedArtefactItem.tsx b/echo/frontend/src/components/participant/verify/VerifiedArtefactItem.tsx index e72255a7..f0e5b571 100644 --- a/echo/frontend/src/components/participant/verify/VerifiedArtefactItem.tsx +++ b/echo/frontend/src/components/participant/verify/VerifiedArtefactItem.tsx @@ -39,7 +39,7 @@ export const VerifiedArtefactItem = ({ <ActionIcon variant="subtle" color="blue" - aria-label="verified artefact" + aria-label="concrete artefact" size={22} > <IconRosetteDiscountCheckFilled /> diff --git a/echo/frontend/src/components/participant/verify/VerifyArtefact.tsx b/echo/frontend/src/components/participant/verify/VerifyArtefact.tsx index 29578a16..2747c708 100644 --- a/echo/frontend/src/components/participant/verify/VerifyArtefact.tsx +++ b/echo/frontend/src/components/participant/verify/VerifyArtefact.tsx @@ -8,7 +8,6 @@ import { ScrollArea, Stack, Text, - Title, } from "@mantine/core"; import { IconPencil, IconPlayerPause, IconVolume } from "@tabler/icons-react"; import { useQueryClient } from "@tanstack/react-query"; @@ -30,14 +29,6 @@ import { import { VerifyArtefactError } from "./VerifyArtefactError"; import { VerifyArtefactLoading } from "./VerifyArtefactLoading"; -const LANGUAGE_TO_LOCALE: Record<string, string> = { - de: "de-DE", - en: "en-US", - es: "es-ES", - fr: "fr-FR", - nl: "nl-NL", -}; - const MemoizedMarkdownWYSIWYG = memo(MarkdownWYSIWYG); export const VerifyArtefact = () => { @@ -76,23 +67,8 @@ export const VerifyArtefact = () => { const artefactDateUpdated = artefactQuery.data?.date_created ?? null; const selectedOptionKey = artefactQuery.data?.key ?? null; - const projectLanguage = projectQuery.data?.language ?? "en"; - const languageLocale = - LANGUAGE_TO_LOCALE[projectLanguage] ?? LANGUAGE_TO_LOCALE.en; - - const availableTopics = topicsQuery.data?.available_topics ?? []; const selectedTopics = topicsQuery.data?.selected_topics ?? []; - const selectedTopic = availableTopics.find( - (topic) => topic.key === selectedOptionKey, - ); - - const selectedOptionLabel = - selectedTopic?.translations?.[languageLocale]?.label ?? - selectedTopic?.translations?.["en-US"]?.label ?? - selectedTopic?.key ?? - t`verified`; - // biome-ignore lint/correctness/useExhaustiveDependencies: no need for navigate function in dependency useEffect(() => { // Redirect if artifact_id is missing from URL @@ -324,12 +300,12 @@ export const VerifyArtefact = () => { </div> <Stack gap="sm" align="center"> <Text size="xl" fw={600}> - <Trans id="participant.verify.regenerating.artefact"> + <Trans id="participant.concrete.regenerating.artefact"> Regenerating the artefact </Trans> </Text> <Text size="sm" c="dimmed"> - <Trans id="participant.verify.regenerating.artefact.description"> + <Trans id="participant.concrete.regenerating.artefact.description"> This will just take a few moments </Trans> </Text> @@ -337,28 +313,22 @@ export const VerifyArtefact = () => { </Stack> ) : ( <Stack gap="md" className="py-4"> - <Group justify="space-between" align="center" wrap="nowrap"> - <Title order={4} className="font-semibold"> - <Trans id="participant.verify.artefact.title"> - Artefact: {selectedOptionLabel} - </Trans> - - {readAloudUrl && ( - - {isPlaying ? ( - - ) : ( - - )} - - )} - + {readAloudUrl && ( + + {isPlaying ? ( + + ) : ( + + )} + + )} {isEditing ? ( { className="flex-1 shadow-xl" onClick={handleCancelEdit} > - Cancel + + Cancel + ) : ( @@ -419,7 +391,7 @@ export const VerifyArtefact = () => { {reviseCooldown.isOnCooldown ? ( <>{reviseCooldown.timeRemainingSeconds}s ) : ( - + Revise )} @@ -452,7 +424,7 @@ export const VerifyArtefact = () => { !artefactContent } > - + Approve diff --git a/echo/frontend/src/components/participant/verify/VerifyArtefactError.tsx b/echo/frontend/src/components/participant/verify/VerifyArtefactError.tsx index 181cef4e..20afc373 100644 --- a/echo/frontend/src/components/participant/verify/VerifyArtefactError.tsx +++ b/echo/frontend/src/components/participant/verify/VerifyArtefactError.tsx @@ -16,12 +16,12 @@ export const VerifyArtefactError = ({ return ( - + Unable to Load Artefact - + It looks like we couldn't load this artefact. This might be a temporary issue. You can try reloading or go back to select a different topic. @@ -37,7 +37,7 @@ export const VerifyArtefactError = ({ disabled={isReloading} leftSection={!isReloading && } > - + Reload Page @@ -49,7 +49,7 @@ export const VerifyArtefactError = ({ onClick={onGoBack} disabled={isReloading} > - + Go back diff --git a/echo/frontend/src/components/participant/verify/VerifyArtefactLoading.tsx b/echo/frontend/src/components/participant/verify/VerifyArtefactLoading.tsx index d0b6c0fd..90ebee38 100644 --- a/echo/frontend/src/components/participant/verify/VerifyArtefactLoading.tsx +++ b/echo/frontend/src/components/participant/verify/VerifyArtefactLoading.tsx @@ -10,12 +10,12 @@ export const VerifyArtefactLoading = () => { - + Loading artefact - + This will just take a moment diff --git a/echo/frontend/src/components/participant/verify/VerifyInstructions.tsx b/echo/frontend/src/components/participant/verify/VerifyInstructions.tsx index fe93f9d1..7ef3dd1f 100644 --- a/echo/frontend/src/components/participant/verify/VerifyInstructions.tsx +++ b/echo/frontend/src/components/participant/verify/VerifyInstructions.tsx @@ -14,15 +14,15 @@ const INSTRUCTIONS = [ { key: "receive-artefact", render: (objectLabel: string) => ( - - You'll soon get {objectLabel} to verify. + + You'll soon get {objectLabel} to make them concrete. ), }, { key: "read-aloud", render: (objectLabel: string) => ( - + Once you receive the {objectLabel}, read it aloud and share out loud what you want to change, if anything. @@ -31,7 +31,7 @@ const INSTRUCTIONS = [ { key: "revise-artefact", render: (objectLabel: string) => ( - + Once you have discussed, hit "revise" to see the {objectLabel} change to reflect your discussion. @@ -40,7 +40,7 @@ const INSTRUCTIONS = [ { key: "approve-artefact", render: (objectLabel: string) => ( - + If you are happy with the {objectLabel} click "Approve" to show you feel heard. @@ -49,7 +49,7 @@ const INSTRUCTIONS = [ { key: "approval-helps", render: (_objectLabel: string) => ( - + Your approval helps us understand what you really think! ), @@ -89,7 +89,7 @@ export const VerifyInstructions = ({ {/* Next button */} diff --git a/echo/frontend/src/components/participant/verify/VerifySelection.tsx b/echo/frontend/src/components/participant/verify/VerifySelection.tsx index 1e0bf667..acc07643 100644 --- a/echo/frontend/src/components/participant/verify/VerifySelection.tsx +++ b/echo/frontend/src/components/participant/verify/VerifySelection.tsx @@ -180,7 +180,7 @@ export const VerifySelection = () => { {/* Main content */} - <Trans id="participant.verify.selection.title"> + <Trans id="participant.concrete.selection.title"> What do you want to make concrete? </Trans> @@ -222,7 +222,7 @@ export const VerifySelection = () => { {/* Next button */} diff --git a/echo/frontend/src/components/project/ProjectPortalEditor.tsx b/echo/frontend/src/components/project/ProjectPortalEditor.tsx index 84a0e3d2..d2c92fcc 100644 --- a/echo/frontend/src/components/project/ProjectPortalEditor.tsx +++ b/echo/frontend/src/components/project/ProjectPortalEditor.tsx @@ -2,6 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; import { + ActionIcon, Badge, Box, Button, @@ -11,7 +12,6 @@ import { InputDescription, NativeSelect, Paper, - Pill, Stack, Switch, Text, @@ -19,7 +19,7 @@ import { TextInput, Title, } from "@mantine/core"; -import { IconEye, IconEyeOff, IconRefresh } from "@tabler/icons-react"; +import { IconEye, IconEyeOff, IconRefresh, IconX } from "@tabler/icons-react"; import { useQueryClient } from "@tanstack/react-query"; import { Resizable } from "re-resizable"; import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; @@ -136,13 +136,28 @@ const ProperNounInput = ({ /> {nouns.map((noun) => ( - handleRemoveNoun(noun)} + variant="light" + c="black" + size="lg" + style={{ + fontWeight: 500, + textTransform: "none", + }} + rightSection={ + handleRemoveNoun(noun)} + size="xs" + variant="transparent" + c="gray.8" + > + + + } > - {noun} - + {noun} + ))} {nouns.length > ASSEMBLYAI_MAX_HOTWORDS && ( @@ -529,313 +544,386 @@ const ProjectPortalEditorComponent: React.FC = ({ + + + <Trans>Participant Features</Trans> + + + + + + <Trans>Go deeper</Trans> + + + + Beta + + - - - - <Trans>Dembrane ECHO</Trans> - - - - Experimental - - - - - - Enable this feature to allow participants to request - AI-powered responses during their conversation. - Participants can click "ECHO" after recording their - thoughts to receive contextual feedback, encouraging - deeper reflection and engagement. A cooldown period - applies between requests. - - + + + Enable this feature to allow participants to request + AI-powered responses during their conversation. + Participants can click "Go deeper" after recording + their thoughts to receive contextual feedback, + encouraging deeper reflection and engagement. A + cooldown period applies between requests. + + - ( - ( + + } + checked={field.value} + onChange={(e) => + field.onChange(e.currentTarget.checked) } /> - } - checked={field.value} - onChange={(e) => - field.onChange(e.currentTarget.checked) - } + )} /> - )} - /> - - ( - - - - - Select the type of feedback or engagement you want - to encourage. - - - - - watchedReplyEnabled && field.onChange("summarize") - } - > - Summarize - - - watchedReplyEnabled && - field.onChange("brainstorm") - } - > - Brainstorm Ideas - - - watchedReplyEnabled && field.onChange("custom") - } - > - Custom - - - - )} - /> - {watchedReplyMode === "custom" && ( - ( -