tech-feat: botonic packages to use uuid v7 (#2926)

## Description * Upgrade uuid dependency and use uuid v7 in needed packages.
hubtype · Oct 29, 2024 · 5dcf9e8 · 5dcf9e8
1 parent a3171a0
commit 5dcf9e8
Show file tree

Hide file tree

Showing 15 changed files with 66 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/botonic-cli/package.json b/packages/botonic-cli/package.json
@@ -38,7 +38,7 @@
     "qs": "^6.11.2",
     "tar": "^6.2.0",
     "tslib": "^2.6.2",
-    "uuid": "^8.3.2",
+    "uuid": "^10.0.0",
     "zip-a-folder": "3.1.7"
   },
   "devDependencies": {
@@ -49,7 +49,7 @@
     "@types/inquirer": "^7.3.1",
     "@types/localtunnel": "^2.0.1",
     "@types/tar": "^6.1.11",
-    "@types/uuid": "^8.3.0",
+    "@types/uuid": "^10.0.0",
     "globby": "^11.0.3"
   },
   "engines": {

diff --git a/packages/botonic-cli/src/analytics/credentials-handler.ts b/packages/botonic-cli/src/analytics/credentials-handler.ts
@@ -1,5 +1,5 @@
 import { join, resolve } from 'path'
-import { v4 as uuidv4 } from 'uuid'
+import { v7 as uuidv7 } from 'uuid'
 
 import {
   BOT_CREDS_FILENAME,
@@ -36,7 +36,7 @@ export class CredentialsHandler {
   }
 
   generateId(): string {
-    return uuidv4()
+    return uuidv7()
   }
 
   createDirIfNotExists(): void {

diff --git a/packages/botonic-plugin-dialogflow/package.json b/packages/botonic-plugin-dialogflow/package.json
@@ -19,10 +19,11 @@
     "@botonic/core": "^0.30.0",
     "axios": "^1.7.2",
     "jsrsasign": "^10.9.0",
-    "uuid": "^8.3.2"
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@types/jsrsasign": "^10.5.12",
+    "@types/uuid": "^10.0.0",
     "core-js": "^3.35.1"
   },
   "keywords": [

diff --git a/packages/botonic-plugin-dialogflow/src/index.ts b/packages/botonic-plugin-dialogflow/src/index.ts
@@ -1,7 +1,7 @@
 import type { Plugin, PluginPreRequest } from '@botonic/core'
 import axios, { AxiosResponse } from 'axios'
 import jsrsasign from 'jsrsasign'
-import { v4 as uuidv4 } from 'uuid'
+import { v7 as uuidv7 } from 'uuid'
 
 import { Credentials, Options } from './types'
 
@@ -12,7 +12,7 @@ export default class BotonicPluginDialogflow implements Plugin {
   defaultQueryData: Options['queryData']
   constructor(options: Options) {
     const { credentials, queryData } = options
-    this.sessionId = uuidv4()
+    this.sessionId = uuidv7()
     this.creds = credentials
     this.defaultQueryData = queryData || {}
   }

diff --git a/packages/botonic-plugin-flow-builder/package.json b/packages/botonic-plugin-flow-builder/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@botonic/react": "^0.30.0",
     "axios": "^1.7.2",
-    "uuid": "^9.0.1"
+    "uuid": "^10.0.0"
   },
   "repository": {
     "type": "git",
@@ -45,5 +45,8 @@
   "eslintConfig": {
     "extends": "../.eslintrc.js",
     "root": true
+  },
+  "devDependencies": {
+    "@types/uuid": "^10.0.0"
   }
 }
diff --git a/packages/botonic-plugin-flow-builder/src/index.ts b/packages/botonic-plugin-flow-builder/src/index.ts
@@ -1,6 +1,6 @@
 import { Plugin, PluginPreRequest, Session } from '@botonic/core'
 import { ActionRequest } from '@botonic/react'
-import { v4 as uuid } from 'uuid'
+import { v7 as uuidv7 } from 'uuid'
 
 import { FlowBuilderApi } from './api'
 import {
@@ -144,7 +144,7 @@ export default class BotonicPluginFlowBuilder implements Plugin {
   async getStartContents(locale: string): Promise<FlowContent[]> {
     const resolvedLocale = this.cmsApi.getResolvedLocale(locale)
     const startNode = this.cmsApi.getStartNode()
-    this.currentRequest.session.flow_thread_id = uuid()
+    this.currentRequest.session.flow_thread_id = uuidv7()
     return await this.getContentsByNode(startNode, resolvedLocale)
   }
 

diff --git a/packages/botonic-plugin-flow-builder/src/tracking.ts b/packages/botonic-plugin-flow-builder/src/tracking.ts
@@ -1,5 +1,5 @@
 import { ActionRequest } from '@botonic/react'
-import { v4 as uuid } from 'uuid'
+import { v7 as uuidv7 } from 'uuid'
 
 import { FlowContent } from './content-fields'
 import { HtNodeWithContent } from './content-fields/hubtype-fields'
@@ -60,7 +60,7 @@ function getContentEventArgs(
     isMeaningful: boolean
   }
 ) {
-  const flowThreadId = request.session.flow_thread_id ?? uuid()
+  const flowThreadId = request.session.flow_thread_id ?? uuidv7()
   request.session.flow_thread_id = flowThreadId
 
   return {

diff --git a/packages/botonic-react/jest.config.js b/packages/botonic-react/jest.config.js
@@ -13,7 +13,7 @@ module.exports = {
   ],
   collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!/node_modules/'],
   transformIgnorePatterns: [
-    'node_modules/(?!@botonic|axios|react-children-utilities|uuid|parse5).+\\.(js|jsx|tsx)$',
+    'node_modules/(?!@botonic|axios|react-children-utilities|parse5).+\\.(js|jsx|tsx)$',
   ],
   moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx'],
   snapshotSerializers: [],

diff --git a/packages/botonic-react/package.json b/packages/botonic-react/package.json
@@ -32,7 +32,7 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-components": "^5.3.0",
     "ua-parser-js": "^1.0.39",
-    "uuid": "^8.3.2"
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.23.9",
@@ -43,6 +43,7 @@
     "@types/parse5": "^7.0.0",
     "@types/react": "^16.14.56",
     "@types/styled-components": "^5.1.34",
+    "@types/uuid": "^10.0.0",
     "babel-plugin-add-module-exports": "^1.0.4",
     "copyfiles": "^2.4.1",
     "identity-obj-proxy": "^3.0.0",

diff --git a/packages/botonic-react/src/components/message/index.jsx b/packages/botonic-react/src/components/message/index.jsx
@@ -1,6 +1,6 @@
 import { INPUT, isBrowser } from '@botonic/core'
 import React, { useContext, useEffect, useState } from 'react'
-import { v4 as uuidv4 } from 'uuid'
+import { v7 as uuidv7 } from 'uuid'
 
 import { COLORS, WEBCHAT } from '../../constants'
 import { RequestContext, WebchatContext } from '../../contexts'
@@ -49,7 +49,7 @@ export const Message = props => {
   const { webchatState, addMessage, updateReplies, getThemeProperty } =
     useContext(WebchatContext)
   const [state, setState] = useState({
-    id: props.id || uuidv4(),
+    id: props.id || uuidv7(),
   })
 
   const [disabled, setDisabled] = useState(false)

diff --git a/packages/botonic-react/src/components/message/message-feedback.tsx b/packages/botonic-react/src/components/message/message-feedback.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react'
-import { v4 as uuid } from 'uuid'
+import { v7 as uuidv7 } from 'uuid'
 
 import ThumbsDown from '../../assets/thumbs-down.svg'
 import ThumbsUp from '../../assets/thumbs-up.svg'
@@ -70,7 +70,7 @@ export const MessageFeedback = ({
       knowledgebaseInferenceId: inferenceId,
       feedbackBotInteractionId: botInteractionId,
       feedbackTargetId: messageId,
-      feedbackGroupId: uuid(),
+      feedbackGroupId: uuidv7(),
       possibleOptions: [FeedbackOption.ThumbsDown, FeedbackOption.ThumbsUp],
       possibleValues: [0, 1],
       option: isUseful ? FeedbackOption.ThumbsUp : FeedbackOption.ThumbsDown,

diff --git a/packages/botonic-react/src/util/webchat.js b/packages/botonic-react/src/util/webchat.js
@@ -1,6 +1,6 @@
 import merge from 'lodash.merge'
 import UAParser from 'ua-parser-js'
-import { v4 as uuidv4 } from 'uuid'
+import { v7 as uuidv7 } from 'uuid'
 
 import { WEBCHAT } from '../constants'
 import { getProperty } from './objects'
@@ -31,7 +31,7 @@ export const createUser = () => {
   let name = `${ua.os.name} ${ua.browser.name}`
   if (ua.device && ua.device.type) name = `${ua.device.type} ${name}`
   return {
-    id: uuidv4(),
+    id: uuidv7(),
     name,
   }
 }

diff --git a/packages/botonic-react/src/webchat/input-panel/index.tsx b/packages/botonic-react/src/webchat/input-panel/index.tsx
@@ -1,6 +1,6 @@
 import { INPUT } from '@botonic/core'
 import React, { useContext } from 'react'
-import { v4 as uuidv4 } from 'uuid'
+import { v7 as uuidv7 } from 'uuid'
 
 import { WEBCHAT } from '../../constants'
 import { WebchatContext } from '../../contexts'
@@ -62,7 +62,7 @@ export const InputPanel = ({
 
   const sendChatEvent = async chatEvent => {
     const chatEventInput = {
-      id: uuidv4(),
+      id: uuidv7(),
       type: INPUT.CHAT_EVENT,
       data: chatEvent,
     }

diff --git a/packages/botonic-react/src/webchat/webchat.jsx b/packages/botonic-react/src/webchat/webchat.jsx
@@ -13,7 +13,7 @@ import React, {
   useState,
 } from 'react'
 import styled, { StyleSheetManager } from 'styled-components'
-import { v4 as uuidv4 } from 'uuid'
+import { v7 as uuidv7 } from 'uuid'
 
 import { Audio, Document, Image, Text, Video } from '../components'
 import { Handoff } from '../components/handoff'
@@ -468,7 +468,7 @@ export const Webchat = forwardRef((props, ref) => {
     if (!input || Object.keys(input).length == 0) return
     if (isText(input) && (!input.data || !input.data.trim())) return // in case trim() doesn't work in a browser we can use !/\S/.test(input.data)
     if (isText(input) && checkBlockInput(input)) return
-    if (!input.id) input.id = uuidv4()
+    if (!input.id) input.id = uuidv7()
     const messageComponent = messageComponentFromInput(input)
     if (messageComponent) addMessageComponent(messageComponent)
     if (isMedia(input)) input.data = await readDataURL(input.data)