Feat: Images referenced in chat messages are displayed as a carousel at the bottom of the message. #12076 (#12207)

### What problem does this PR solve?
Feat: Images referenced in chat messages are displayed as a carousel at
the bottom of the message. #12076

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/utils/common-util.ts

@@ -252,3 +252,8 @@ export function parseColorToRGBA(color: string, opcity = 1): string {
   const [r, g, b] = parseColorToRGB(color);
   return `rgba(${r},${g},${b},${opcity})`;
 }
+
+export function middleEllipsis(str: string, front = 12, back = 8) {
+  if (str.length <= front + back) return str;
+  return `${str.slice(0, front)}…${str.slice(-back)}`;
+}