added custom font style

app/client/web/package.json

@@ -26,6 +26,7 @@
     "jest": "29.1.1",
     "jsencrypt": "^3.3.2",
     "react": "18.3.1",
+    "react-color": "^2.19.3",
     "react-dom": "18.2.0",
     "react-easy-crop": "^5.0.8",
     "react-image-file-resizer": "^0.4.8",

app/client/web/src/constants/Strings.ts

@@ -1,4 +1,7 @@
 export const en = {
+  textSmall: 'Small',
+  textMedium: 'Medium',
+  textLarge: 'Large',
   processingError: 'Attachment Error',
   unknownContact: 'Unknown Contact',
   encrypted: 'Encrypted',
@@ -255,6 +258,9 @@ export const en = {
 }
 
 export const fr = {
+  textSmall: 'Petit',
+  textMedium: 'Moyen',
+  textLarge: 'Grand',
   processingError: 'erreur de Pièce Jointe',
   unknownContact: 'Contact Inconnu',
   encrypted: 'Crypté',
@@ -512,6 +518,9 @@ export const fr = {
 }
 
 export const sp = {
+  textSmall: 'Pequeño',
+  textMedium: 'Mediano',
+  textLarge: 'Grande',
   processingError: 'Error al Adjuntar',
   unkownContact: 'Contacto Desconocido',
   encrypted: 'Cifrado',
@@ -768,6 +777,9 @@ export const sp = {
 }
 
 export const pt = {
+  textSmall: 'Pequeno',
+  textMedium: 'Médio',
+  textLarge: 'Grande',
   processingError: 'Erro de Anexo',
   unknownContact: 'Contato Desconhecido',
   encrypted: 'Criptografado',
@@ -1024,6 +1036,9 @@ export const pt = {
 }
 
 export const de = {
+  textSmall: 'Klein',
+  textMedium: 'Mittel',
+  textLarge: 'Groß',
   processingError: 'Anhangsfehler',
   unknwonContact: 'Unbekannter Kontakt',
   encrypted: 'Verschlüsselt',
@@ -1280,6 +1295,9 @@ export const de = {
 }
 
 export const ru = {
+  textSmall: 'Маленький',
+  textMedium: 'Средний',
+  textLarge: 'Большой',
   processingError: 'Ошибка прикрепления',
   unknownContact: 'Неизвестный контакт',
   encrypted: 'Зашифрованный',

app/client/web/src/conversation/Conversation.tsx

@@ -3,13 +3,14 @@ import { Focus } from 'databag-client-sdk'
 import classes from './Conversation.module.css'
 import { useConversation } from './useConversation.hook';
 import { IconSend, IconTextSize, IconTextColor, IconVideo, IconFile, IconDisc, IconCamera, IconX, IconSettings, IconHome, IconServer, IconShield, IconLock, IconExclamationCircle } from '@tabler/icons-react'
-import { Divider, Text, Textarea, ActionIcon, Loader } from '@mantine/core'
+import { Menu, Divider, Text, Textarea, ActionIcon, Loader } from '@mantine/core'
 import { Message } from '../message/Message';
 import { modals } from '@mantine/modals'
 import { ImageFile } from './imageFile/ImageFile';
 import { VideoFile } from './videoFile/VideoFile';
 import { AudioFile } from './audioFile/AudioFile';
 import { BinaryFile } from './binaryFile/BinaryFile';
+import { SketchPicker } from "react-color";
 
 const PAD_HEIGHT = (1024 - 64);
 const LOAD_DEBOUNCE = 1000;
@@ -200,7 +201,7 @@ export function Conversation() {
         <div className={classes.files}>
           { media }
         </div>
-        <Textarea className={classes.message} placeholder={state.strings.newMessage} value={state.message} onChange={(event) => actions.setMessage(event.currentTarget.value)} disabled={!state.detail || state.detail.locked || sending} />
+        <Textarea className={classes.message} placeholder={state.strings.newMessage} styles={{ input: {color: state.textColorSet ? state.textColor : null, fontSize: state.textSizeSet ? state.textSize : null }}} value={state.message} onChange={(event) => actions.setMessage(event.currentTarget.value)} disabled={!state.detail || state.detail.locked || sending} />
         <div className={classes.controls}>
           <ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending} onClick={() => attachImage.current.click()}> 
             <IconCamera />
@@ -215,12 +216,38 @@ export function Conversation() {
             <IconFile />
           </ActionIcon>
           <Divider size="sm" orientation="vertical" />
-          <ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending}> 
+          <Menu shadow="md" position="top">
-            <IconTextSize />
+            <Menu.Target>
-          </ActionIcon>
+              <ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending}> 
-          <ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending}> 
+                <IconTextSize />
-            <IconTextColor />
+              </ActionIcon>
-          </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Item onClick={() => actions.setTextSize(12)}>
+                { state.strings.textSmall }
+              </Menu.Item>
+              <Menu.Item onClick={() => actions.setTextSize(16)}>
+                { state.strings.textMedium }
+              </Menu.Item>
+              <Menu.Item onClick={() => actions.setTextSize(20)}>
+                { state.strings.textLarge }
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+          <Menu shadow="md" position="top">
+            <Menu.Target>
+              <ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending}> 
+                <IconTextColor />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <SketchPicker disableAlpha={true}
+                color={state.textColor}
+                onChange={(color) => {
+                  actions.setTextColor(color.hex);
+                }} />
+            </Menu.Dropdown>
+          </Menu>
           <div className={classes.send}>
             <ActionIcon className={classes.attach} variant="light" disabled={(!state.message && state.assets.length === 0) || !state.detail || state.detail.locked || sending} onClick={sendMessage} loading={sending}> 
               <IconSend />

app/client/web/src/conversation/binaryFile/BinaryFile.module.css

@@ -16,6 +16,8 @@
     left: 0;
     width: 100%;
     text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .extension {

app/client/web/src/conversation/useConversation.hook.ts

@@ -98,7 +98,11 @@ export function useConversation() {
     subjectNames: [],
     unknownContacts: 0,
     message: '',
-    assets: [] as {type: string, file: File, position?: number}[],
+    assets: [] as {type: string, file: File, position?: number, label?: string}[],
+    textColor: '#444444',
+    textColorSet: false,
+    textSize: 16,
+    textSizeSet: false,
   })
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -188,6 +192,14 @@ export function useConversation() {
     setMessage: (message: string) => {
       updateState({ message });
     },
+    setTextSize: (textSize: number) => {
+      const textSizeSet = true;
+      updateState({ textSize, textSizeSet });
+    },
+    setTextColor: (textColor: string) => {
+      const textColorSet = true;
+      updateState({ textColor, textColorSet });
+    },
     setThumbPosition: (index: number, position: number) => {
       updateAsset(index, { position });
     },
@@ -282,7 +294,7 @@ export function useConversation() {
               } else if (type === 'audio') {
                 return { encrypted: { type, label, parts }};
               } else {
-                return { encrypted: { type, label, extenstion, parts }};
+                return { encrypted: { type, label, extension, parts }};
               }
             } else if (asset.image) {
               const thumb = uploaded.find(upload => upload.appId === asset.image.thumb)?.assetId;
@@ -303,7 +315,7 @@ export function useConversation() {
               return { binary: { label, extension, data } };
             }
           });
-          return { text: state.message, assets };
+          return { text: state.message, textColor: state.textColorSet ? state.textColor : null, textSize: state.textSizeSet ? state.textSize : null, assets };
         }
         const progress = (precent: number) => {};
         await focus.addTopic(sealed, sealed ? 'sealedtopic' : 'superbasictopic', subject, sources, progress);

app/client/web/src/message/binaryAsset/BinaryAsset.module.css

@@ -14,6 +14,13 @@
     overflow: hidden;
   }
 
+  .name {
+    text-align: center;
+    width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
   .extension {
     font-weight: bold;
   }

app/client/web/src/message/binaryAsset/BinaryAsset.tsx

@@ -12,7 +12,7 @@ export function BinaryAsset({ topicId, asset }: { topicId: string, asset: MediaA
     <div className={classes.asset}>
       <Image className={classes.thumb} src={binary} fit="contain" />
       <div className={classes.label}>
-        <div>{ label }</div>
+        <div className={classes.name}>{ label }</div>
         <div className={classes.extension}>{ extension }</div>
       </div>
     </div>

app/client/web/yarn.lock

@@ -791,6 +791,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@icons/material@npm:^0.2.4":
+  version: 0.2.4
+  resolution: "@icons/material@npm:0.2.4"
+  peerDependencies:
+    react: "*"
+  checksum: 24baa360cb83f7e1a9e6784ac11185d57eb895b0efd3070ec915693378330f35ff9feb248f650b9649fa3e1045601286585dc05795a4c734d4849b33900351ee
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
   version: 8.0.2
   resolution: "@isaacs/cliui@npm:8.0.2"
@@ -2861,6 +2870,7 @@ __metadata:
     jsencrypt: ^3.3.2
     prettier: 3.3.3
     react: 18.3.1
+    react-color: ^2.19.3
     react-dom: 18.2.0
     react-easy-crop: ^5.0.8
     react-image-file-resizer: ^0.4.8
@@ -5373,6 +5383,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash-es@npm:^4.17.15":
+  version: 4.17.21
+  resolution: "lodash-es@npm:4.17.21"
+  checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
+  languageName: node
+  linkType: hard
+
 "lodash.memoize@npm:4.x":
   version: 4.1.2
   resolution: "lodash.memoize@npm:4.1.2"
@@ -5394,7 +5411,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.17.21":
+"lodash@npm:^4.0.1, lodash@npm:^4.17.15, lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -5481,6 +5498,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"material-colors@npm:^1.2.1":
+  version: 1.2.6
+  resolution: "material-colors@npm:1.2.6"
+  checksum: 72d005ccccb82bab68eef3cd757e802668634fc86976dedb9fc564ce994f2d3258273766b7efecb7404a0031969e2d72201a1b74169763f0a53c0dd8d649209f
+  languageName: node
+  linkType: hard
+
 "math-intrinsics@npm:^1.0.0":
   version: 1.0.0
   resolution: "math-intrinsics@npm:1.0.0"
@@ -6101,7 +6125,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.5.10, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -6149,6 +6173,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-color@npm:^2.19.3":
+  version: 2.19.3
+  resolution: "react-color@npm:2.19.3"
+  dependencies:
+    "@icons/material": ^0.2.4
+    lodash: ^4.17.15
+    lodash-es: ^4.17.15
+    material-colors: ^1.2.1
+    prop-types: ^15.5.10
+    reactcss: ^1.2.0
+    tinycolor2: ^1.4.1
+  peerDependencies:
+    react: "*"
+  checksum: 40b49e1aa2ab27a099cc37a3fa2d5bb906b8def4dbe2d922c0e42365e386d82b03f9b06a2b29a44a51f1e114cef72e61c0ba0740581a128d951936ea4617429b
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:18.2.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
@@ -6322,6 +6363,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reactcss@npm:^1.2.0":
+  version: 1.2.3
+  resolution: "reactcss@npm:1.2.3"
+  dependencies:
+    lodash: ^4.0.1
+  checksum: c53e386a0881f1477e1cff661f6a6ad4c662230941f3827862193ac30f9b75cdf7bc7b4c7e5ca543d3e4e80fee1a3e9fa0056c206b1c0423726c41773ab3fe45
+  languageName: node
+  linkType: hard
+
 "readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"
@@ -7129,6 +7179,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinycolor2@npm:^1.4.1":
+  version: 1.6.0
+  resolution: "tinycolor2@npm:1.6.0"
+  checksum: 6df4d07fceeedc0a878d7bac47e2cd47c1ceeb1078340a9eb8a295bc0651e17c750f73d47b3028d829f30b85c15e0572c0fd4142083e4c21a30a597e47f47230
+  languageName: node
+  linkType: hard
+
 "tmpl@npm:1.0.5":
   version: 1.0.5
   resolution: "tmpl@npm:1.0.5"

app/sdk/src/focus.ts

@@ -525,11 +525,13 @@ export class FocusModule implements Focus {
         });
         const mapped = filtered.map((asset: any) => {
           if (asset.encrypted) {
-            const { type, thumb, parts } = asset.encrypted;
+            const { type, thumb, label, extension, parts } = asset.encrypted;
             if (type === 'image' || type === 'video') {
               return { encrypted: { type, thumb: getAsset(thumb), parts: getAsset(parts) } };
-            } else {
+            } else if (type === 'audio') {
-              return { encrypted: { type, parts: getAsset(parts) } };
+              return { encrypted: { type, label, parts: getAsset(parts) } };
+            }else {
+              return { encrypted: { type, label, extension, parts: getAsset(parts) } };
             }
           } else if (asset.image) {
             const { thumb, full } = asset.image;