feat: add Dot and Tag components for enhanced UI representation

web/app/components/datasets/documents/detail/completed/common/dot.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Dot = () => {
+  return (
+    <div className='text-text-quaternary text-xs font-medium'>·</div>
+  )
+}
+
+Dot.displayName = 'Dot'
+
+export default React.memo(Dot)

web/app/components/datasets/documents/detail/completed/common/tag.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const Tag = ({ text }: { text: string }) => {
+  return (
+    <div className='inline-flex items-center gap-x-0.5'>
+      <span className='text-text-quaternary text-xs font-medium'>#</span>
+      <span className='text-text-tertiary text-xs'>{text}</span>
+    </div>
+  )
+}
+
+Tag.displayName = 'Tag'
+
+export default React.memo(Tag)