StartITBot · LMS5413 · Jun 6, 2026 · Jun 6, 2026 · Jun 6, 2026 · Jun 6, 2026
diff --git a/.nvmrc b/.nvmrc
diff --git a/.yarnrc.yml b/.yarnrc.yml
diff --git a/Dockerfile b/Dockerfile
@@ -1,26 +1,26 @@
-FROM node:22.20-alpine3.22 as build-step
+FROM oven/bun:latest as build-step
 
 WORKDIR /app
 
 # Env setup
 
-COPY package.json yarn.lock .yarnrc.yml /app/
+COPY package.json bun.lock /app/
 COPY components-sdk/package.json /app/components-sdk/
 COPY website/package.json /app/website/
 
 RUN <<EOF
 corepack enable
-yarn install --immutable
+bun install --immutable
 EOF
 
 COPY components-sdk /app/components-sdk
 COPY website /app/website
 
 #EXPOSE 8080
-#ENTRYPOINT ["yarn"]
+#ENTRYPOINT ["bun"]
 #CMD ["dev", "--host", "0.0.0.0", "--port", "8080", "--strictPort"]
 
-CMD ["yarn", "build"]
+CMD ["bun", "build"]
 
 FROM nginx
 COPY --from=build-step /app/website/dist /usr/share/nginx/html

diff --git a/README.md b/README.md
@@ -11,19 +11,19 @@ This monorepo contains two main packages:
 First, install the dependencies of the monorepo:
 
 ```bash
-yarn install
+bun install
 ```
 
 Build the components library:
 
 ```bash
-cd components-sdk && yarn build
+cd components-sdk && bun build
 ```
 
 Run the development server of the website:
 
 ```bash
-cd website && yarn dev
+cd website && bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

diff --git a/bun.lock b/bun.lock
diff --git a/components-sdk/src/components/ActionRow.tsx b/components-sdk/src/components/ActionRow.tsx
@@ -25,7 +25,7 @@ export function ActionRow({
         <div className={isStringSelect ? '' : Styles.action_row}>
             {(state?.components || []).map((component, index) => (
                 <ActionRowInner
-                    key={component.custom_id || `${randomString}::${index}`}
+                    key={`${randomString}::${index}`}
                     stateKey={stateKey}
                     index={index}
                     passProps={passProps}
@@ -58,4 +58,4 @@ function ActionRowInner(props: ComponentsProps & {state: ActionRowPossible, inde
     const stateKeyCached = useMemo(() => [...props.stateKey, "components", props.index], [...props.stateKey]);
 
     return <Component stateKey={stateKeyCached} passProps={props.passProps} stateManager={props.stateManager} state={props.state} removeKeyParent={props.removeKeyParent} actionCallback={props.actionCallback} />;
-}
+}
diff --git a/components-sdk/src/components/Button.tsx b/components-sdk/src/components/Button.tsx
@@ -29,6 +29,7 @@ import Action from '../icons/Action.svg';
 import Lock from '../icons/Lock.svg';
 import Url from '../icons/Url.svg';
 import DescriptionPen from '../icons/DescriptionPen.svg';
+import EditIcon from '../icons/Edit.svg';
 import { DragLines } from '../dnd/DragLine';
 import { ClosestType } from '../dnd/types';
 import { DroppableID } from '../dnd/components';
@@ -117,6 +118,7 @@ export function Button(
                 {open === 2 && <MenuEmoji stateKey={[...stateKey, 'emoji']} stateManager={stateManager} passProps={passProps}/>}
                 {open === 3 && <MenuLabel closeLockRef={closeLockRef} state={state.label || ""} stateKey={[...stateKey, 'label']} stateManager={stateManager} setOpen={setOpen}/>}
                 {open === 4 && <MenuLabel closeLockRef={closeLockRef} state={state.url || ""} stateKey={[...stateKey, 'url']} stateManager={stateManager} setOpen={setOpen}/>}
+                {open === 5 && <MenuLabel closeLockRef={closeLockRef} state={state.custom_id || ""} stateKey={[...stateKey, 'custom_id']} stateManager={stateManager} setOpen={setOpen} placeholder="custom_id" lockClose={false}/>}
             </div>}
         </div></DragLines>
     )
@@ -153,6 +155,10 @@ function MenuFirst({state, stateKey, stateManager, setOpen, removeKeyParent, act
             setOpen(4);
             ev.stopPropagation();
         }} />}
+        {state.style !== ButtonStyle.URL && <MenuOption src={EditIcon} text={t('button.change-custom-id')} onClick={(ev) => {
+            setOpen(5);
+            ev.stopPropagation();
+        }} />}
         <MenuOption src={state.disabled ? LockActive : Lock} text={state.disabled ? t('button.mark-enabled') : t('button.mark-disabled')} onClick={(ev) => {
             stateManager.setKey({key: [...stateKey, "disabled"], value: !state.disabled});
             ev.stopPropagation();
@@ -213,17 +219,18 @@ export function MenuEmoji({stateKey, stateManager, passProps} : {
     />
 }
 
-export function MenuLabel({state, stateKey, stateManager, setOpen, nullable = false, closeLockRef, placeholder} : {
+export function MenuLabel({state, stateKey, stateManager, setOpen, nullable = false, closeLockRef, placeholder, lockClose = true} : {
     state: string,
     stateKey: ComponentsProps['stateKey'],
     stateManager: ComponentsProps['stateManager'],
     setOpen: Dispatch<SetStateAction<number>>,
     nullable?: boolean,
     closeLockRef: RefObject<any>,
-    placeholder?: string
+    placeholder?: string,
+    lockClose?: boolean
 }) {
     const ref = useRef<HTMLInputElement>(null);
-    useImperativeHandle(closeLockRef, () => true);
+    useImperativeHandle(closeLockRef, () => lockClose ? true : null, [lockClose]);
 
     useEffect(() => {
         if (ref.current) ref.current.focus();

diff --git a/components-sdk/src/components/File.tsx b/components-sdk/src/components/File.tsx
@@ -40,4 +40,4 @@ export function File({state, stateManager, stateKey, passProps} : ComponentsProp
             {url || t('file.upload-file')}
         </div>
     </div>
-}
+}
diff --git a/components-sdk/src/components/StringSelect.tsx b/components-sdk/src/components/StringSelect.tsx
@@ -25,6 +25,7 @@ import { DragLines } from '../dnd/DragLine';
 import { DroppableID } from '../dnd/components';
 import Action from '../icons/Action.svg';
 import { useTranslation } from 'react-i18next';
+import { useRandomString } from '../utils/useRegenerate';
 
 export function StringSelect({
     state,
@@ -47,13 +48,14 @@ export function StringSelect({
     // }, [state.max_values]);
 
     const {t} = useTranslation("components-sdk")
+    const randomString = useRandomString();
 
     return <div>
         <div className={Styles.select}>
             <GlobalSettings state={state} stateKey={stateKey} stateManager={stateManager} />
 
             {state.options.map((option, index) => <StringSelectOption
-                key={option.value}
+                key={`${randomString}::${index}`}
                 state={option}
                 stateKey={stateKey}
                 index={index}
@@ -104,6 +106,7 @@ function GlobalSettings({state, stateKey, stateManager} : {
             {open === 2 && <MenuLabel closeLockRef={closeLockRef} state={state.placeholder || ""} stateKey={[...stateKey, 'placeholder']} stateManager={stateManager} setOpen={setOpen}/>}
             {open === 3 && <MenuRange min={1} max={state.options.length} state={min_values} stateKey={[...stateKey, 'min_values']} stateManager={stateManager}/>}
             {open === 4 && <MenuRange min={1} max={state.options.length} state={max_values} stateKey={[...stateKey, 'max_values']} stateManager={stateManager}/>}
+            {open === 5 && <MenuLabel closeLockRef={closeLockRef} state={state.custom_id} stateKey={[...stateKey, 'custom_id']} stateManager={stateManager} setOpen={setOpen} placeholder="custom_id" lockClose={false}/>}
         </div>}
 
     </div>
@@ -165,6 +168,11 @@ function GlobalSettingsFirst({state, stateKey, stateManager, setOpen} : {
             <div className={CapsuleStyles.large_button_ctx_item_text}>{t('string-select.clear-placeholder')}</div>
         </div>}
 
+        <MenuOption src={EditIcon} text={t('string-select.change-custom-id')} onClick={(ev) => {
+            setOpen(5);
+            ev.stopPropagation();
+        }} />
+
         <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
             setOpen(3);
             ev.stopPropagation();
@@ -215,6 +223,7 @@ function StringSelectOption({state, stateKey: stateParent, index, stateManager,
                 {open === 2 && <MenuEmoji stateKey={[...stateKey, 'emoji']} stateManager={stateManager} passProps={passProps}/>}
                 {open === 3 && <MenuLabel closeLockRef={closeLockRef} state={state.label} stateKey={[...stateKey, 'label']} stateManager={stateManager} setOpen={setOpen}/>}
                 {open === 4 && <MenuLabel closeLockRef={closeLockRef} state={state.description || ""} nullable={true} stateKey={[...stateKey, "description"]} stateManager={stateManager} setOpen={setOpen}/>}
+                {open === 5 && <MenuLabel closeLockRef={closeLockRef} state={state.value} stateKey={[...stateKey, 'value']} stateManager={stateManager} setOpen={setOpen} placeholder="value" lockClose={false}/>}
             </div>}
         </div></DragLines>
     )
@@ -265,6 +274,10 @@ function MenuFirst({state, stateKey, stateManager, setOpen, removeKeyParent, act
             <div className={CapsuleStyles.large_button_ctx_item_img}><img src={DescriptionPen} alt=""/></div>
             <div className={CapsuleStyles.large_button_ctx_item_text}>{t('string-select.change-label')}</div>
         </div>
+        <MenuOption src={EditIcon} text={t('string-select.change-value')} onClick={(ev) => {
+            setOpen(5);
+            ev.stopPropagation();
+        }} />
         <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
             setOpen(4);
             ev.stopPropagation();

diff --git a/components-sdk/src/components/Thumbnail.tsx b/components-sdk/src/components/Thumbnail.tsx
@@ -169,4 +169,4 @@ function MenuFirst({state, stateKey, stateManager, setOpen, openFileSelector, re
             <div className={CapsuleStyles.large_button_ctx_item_text}>{t('thumbnail.add-image')}</div>
         </div>}
     </>
-}
+}
diff --git a/components-sdk/src/locales/ca.json b/components-sdk/src/locales/ca.json
@@ -44,6 +44,8 @@
   "string-select.change-emoji": "Canviar emoji",
   "string-select.clear-emoji": "Esborrar emoji",
   "string-select.change-label": "Canviar etiqueta",
+  "string-select.change-value": "Canviar valor",
+  "string-select.change-custom-id": "Canviar custom_id",
   "string-select.add-description": "Afegir descripció",
   "string-select.change-description": "Canviar descriptió",
   "string-select.clear-description": "Esborrar descriptió",
@@ -59,5 +61,6 @@
   "button.change-emoji": "Canviar emoji",
   "button.clear-emoji": "Esborrar emoji",
   "button.change-label": "Canviar etiqueta",
+  "button.change-custom-id": "Canviar custom_id",
   "button.delete": "Esborrar"
 }
diff --git a/components-sdk/src/locales/de.json b/components-sdk/src/locales/de.json
@@ -44,6 +44,8 @@
   "string-select.change-emoji": "Emoji ändern",
   "string-select.clear-emoji": "Emoji löschen",
   "string-select.change-label": "Label ändern",
+  "string-select.change-value": "Wert ändern",
+  "string-select.change-custom-id": "custom_id ändern",
   "string-select.add-description": "Beschreibung hinzufügen",
   "string-select.change-description": "Beschreibung ändern",
   "string-select.clear-description": "Beschreibung löschen",
@@ -59,5 +61,6 @@
   "button.change-emoji": "Emoji ändern",
   "button.clear-emoji": "Emoji löschen",
   "button.change-label": "Label ändern",
+  "button.change-custom-id": "custom_id ändern",
   "button.delete": "Löschen"
-}
+}
diff --git a/components-sdk/src/locales/en.json b/components-sdk/src/locales/en.json
@@ -44,6 +44,8 @@
   "string-select.change-emoji": "Change emoji",
   "string-select.clear-emoji": "Clear emoji",
   "string-select.change-label": "Change label",
+  "string-select.change-value": "Change value",
+  "string-select.change-custom-id": "Change custom ID",
   "string-select.add-description": "Add description",
   "string-select.change-description": "Change description",
   "string-select.clear-description": "Clear description",
@@ -59,5 +61,6 @@
   "button.change-emoji": "Change emoji",
   "button.clear-emoji": "Clear emoji",
   "button.change-label": "Change label",
+  "button.change-custom-id": "Change custom ID",
   "button.delete": "Delete"
-}
+}
diff --git a/components-sdk/src/locales/es.json b/components-sdk/src/locales/es.json
@@ -44,6 +44,8 @@
   "string-select.change-emoji": "Cambiar emoji",
   "string-select.clear-emoji": "Borrar emoji",
   "string-select.change-label": "Cambiar etiqueta",
+  "string-select.change-value": "Cambiar valor",
+  "string-select.change-custom-id": "Cambiar custom_id",
   "string-select.add-description": "Añadir descripción",
   "string-select.change-description": "Cambiar descripción",
   "string-select.clear-description": "Borrar descripción",
@@ -59,5 +61,6 @@
   "button.change-emoji": "Cambiar emoji",
   "button.clear-emoji": "Borrar emoji",
   "button.change-label": "Cambiar etiqueta",
+  "button.change-custom-id": "Cambiar custom_id",
   "button.delete": "Borrar"
 }
diff --git a/components-sdk/src/locales/fr.json b/components-sdk/src/locales/fr.json
@@ -44,6 +44,8 @@
   "string-select.change-emoji": "Modifier l'emoji",
   "string-select.clear-emoji": "Effacer l'emoji",
   "string-select.change-label": "Modifier l'étiquette",
+  "string-select.change-value": "Modifier la valeur",
+  "string-select.change-custom-id": "Modifier le custom_id",
   "string-select.add-description": "Ajouter une description",
   "string-select.change-description": "Modifier la description",
   "string-select.clear-description": "Effacer la description",
@@ -59,5 +61,6 @@
   "button.change-emoji": "Modifier l'emoji",
   "button.clear-emoji": "Effacer l'emoji",
   "button.change-label": "Modifier l'étiquette",
+  "button.change-custom-id": "Modifier le custom_id",
   "button.delete": "Supprimer"
 }
diff --git a/components-sdk/src/locales/pl.json b/components-sdk/src/locales/pl.json
@@ -44,6 +44,8 @@
   "string-select.change-emoji": "Zmień emoji",
   "string-select.clear-emoji": "Usuń emoji",
   "string-select.change-label": "Zmień etykietę",
+  "string-select.change-value": "Zmień wartość",
+  "string-select.change-custom-id": "Zmień custom_id",
   "string-select.add-description": "Dodaj opis",
   "string-select.change-description": "Zmień opis",
   "string-select.clear-description": "Wyczyść opis",
@@ -59,5 +61,6 @@
   "button.change-emoji": "Zmień emoji",
   "button.clear-emoji": "Usuń emoji",
   "button.change-label": "Zmień etykietę",
+  "button.change-custom-id": "Zmień custom_id",
   "button.delete": "Usuń"
-}
+}
-Original file line number
+Diff line change
@@ Expand Up @@
                 {url || t('file.upload-file')}
             </div>
         </div>
-    }
+    }