Format pasted text token counts using display token count utility

- should use `packages/shared/src/utils/display-token-count.ts` for 'Pasted X tokens' symbol

├── apps
│   └── editor
│       └── src
│           └── utils
│               └── build-user-content.ts
└── packages
    ├── shared
    │   └── src
    │       └── utils
    │           └── display-token-count.ts
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        └── prompts
                            ├── PromptField
                            │   └── hooks
                            │       └── use-handlers
                            │           └── handle-input-click.ts
                            └── shared
                                └── symbols
                                    ├── get-highlighted-text.tsx
                                    ├── index.ts
                                    ├── position-mapping.ts
                                    ├── prompt-symbols.module.scss
                                    ├── reconstruct-raw-value.ts
                                    └── use-symbol-deletion.ts

Author: robertpiosik

packages/ui/src/components/editor/common/prompts/shared/symbols/get-highlighted-text.tsx

@@ -2,6 +2,7 @@ import cn from 'classnames'
 import styles from './prompt-symbols.module.scss'
 import pfStyles from '../../PromptField/PromptField.module.scss'
 import { SelectionState } from '../../PromptField'
+import { display_token_count } from '@shared/utils/display-token-count'
 
 const escape_html = (str: string): string => {
   if (!str) return ''
@@ -256,12 +257,13 @@ export const get_highlighted_text = (params: {
       )
       if (part && pasted_text_match) {
         const hash = pasted_text_match[1]
-        const token_count = pasted_text_match[2]
-        const label = `Pasted ${token_count} tokens`
+        const token_count_str = pasted_text_match[2]
+        const token_count = parseInt(token_count_str)
+        const label = `Pasted ${display_token_count(token_count)} tokens`
         return `<span class="${cn(
           styles['symbol'],
           styles['symbol--pasted-text']
-        )}" data-type="pasted-text-symbol" data-hash="${hash}" data-token-count="${token_count}"><span class="${
+        )}" data-type="pasted-text-symbol" data-hash="${hash}" data-token-count="${token_count_str}"><span class="${
           styles['symbol__icon']
         }" data-role="symbol-icon"></span><span class="${
           styles['symbol__text']

packages/ui/src/components/editor/common/prompts/shared/symbols/position-mapping.ts

@@ -1,3 +1,5 @@
+import { display_token_count } from '@shared/utils/display-token-count'
+
 export const map_display_pos_to_raw_pos = (params: {
   display_pos: number
   raw_text: string
@@ -70,9 +72,9 @@ export const map_display_pos_to_raw_pos = (params: {
       const match = pasted_text_symbol.match(
         /^#PastedText\(([a-fA-F0-9]+):(\d+)\)$/
       )
-      const token_count = match ? match[2] : null
+      const token_count = match ? parseInt(match[2]) : null
       display_match_length = token_count
-        ? `Pasted ${token_count} tokens`.length
+        ? `Pasted ${display_token_count(token_count)} tokens`.length
         : 0
       is_replacement_match = true
     } else if (website_symbol) {
@@ -194,9 +196,9 @@ export const map_raw_pos_to_display_pos = (params: {
       const match = pasted_text_symbol.match(
         /^#PastedText\(([a-fA-F0-9]+):(\d+)\)$/
       )
-      const token_count = match ? match[2] : null
+      const token_count = match ? parseInt(match[2]) : null
       display_match_length = token_count
-        ? `Pasted ${token_count} tokens`.length
+        ? `Pasted ${display_token_count(token_count)} tokens`.length
         : 0
       is_replacement_match = true
     } else if (website_symbol) {

packages/ui/src/components/editor/common/prompts/shared/symbols/reconstruct-raw-value.ts

@@ -1,3 +1,5 @@
+import { display_token_count } from '@shared/utils/display-token-count'
+
 export const reconstruct_raw_value_from_node = (node: Node): string => {
   if (node.nodeType == Node.TEXT_NODE) {
     return node.textContent || ''
@@ -126,15 +128,16 @@ export const reconstruct_raw_value_from_node = (node: Node): string => {
       }
     } else if (el.dataset.type == 'pasted-text-symbol') {
       const hash = el.dataset.hash
-      const token_count = el.dataset.tokenCount
-      if (!hash || !token_count) return ''
+      const token_count_str = el.dataset.tokenCount
+      if (!hash || !token_count_str) return ''
 
-      const expected_text = `Pasted ${token_count} tokens`
+      const token_count = parseInt(token_count_str)
+      const expected_text = `Pasted ${display_token_count(token_count)} tokens`
       const index = inner_content.indexOf(expected_text)
       if (index != -1) {
         const prefix = inner_content.substring(0, index)
         const suffix = inner_content.substring(index + expected_text.length)
-        return `${prefix}#PastedText(${hash}:${token_count})${suffix}`
+        return `${prefix}#PastedText(${hash}:${token_count_str})${suffix}`
       }
     } else if (el.dataset.type == 'website-symbol') {
       const url = el.dataset.url