Design and Implementation of ZhiZhu Customer Service Workbench

The ZhiZhu customer service workbench is an operational platform for online customer service agents, providing real‑time chat (IM) on the left side and a "third screen" on the right side that aggregates user, order, ticket, after‑sale, and knowledge‑base information.

System Overview : The workbench consists of two main parts – the IM iframe handling real‑time messaging and history, and the third‑screen component that displays detailed contextual data for the selected conversation.

IM and Third‑Screen Communication : The IM iframe and the outer ticket system exchange data via postMessage . Messages are categorized and stored in a shared model, enabling the third screen to render the appropriate information for each conversation.

// Online customer service page entry
import React from 'react'
import Message from './message'
import IframeImPage from './IframePage'
import type { IframeImPagePropsType } from './@types'

const IframeIndex: React.FC
= (props) => {
  return (
)
}
export default IframeIndex

// Message component
import React, { useRef, useEffect, useState } from 'react'
import { useModel } from 'umi'
import { PostMsg } from '@/utils/PostMsg'
import { useDebounceFn } from 'ahooks'
import type { CovCoreInfoType } from '@/models/@types'
import type { IframeImPagePropsType, PcimPostMsgContent } from './@types'

const IframeImPage: React.FC
= ({ children, location, history }) => {
  const { setCovCoreInfo, ... } = useModel<'imWorkPlateform'>('imWorkPlateform')
  const chatWrap = useRef
(new PostMsg(handleOpenChatWrap, 'createWrap'))
  const { run: handleOpenChatWrap } = useDebounceFn(handleOpenChatWrapFn, { wait: 200 })
  // ...rest of implementation
  return
{children ? children : null}
}
export default IframeImPage

Third‑Screen Multi‑Tab Implementation : Using Ant Design's Tabs component, custom routes are defined to render pages dynamically. Features include closing tabs, refreshing, title updates, maximum tab count, dynamic parameters, and persistent pages.

Conversation Caching : To support 1‑to‑N agent scenarios, an LRU cache stores conversation DOMs and state. When switching conversations, the cached DOM is re‑mounted, and the LRU order is updated, ensuring minimal re‑loading overhead.

// KeepAliveScope and KeepAlive usage for caching
import { KeepAliveScope, KeepAlive } from '@/components/KeepAlive'

const IframeImPage: React.FC
= (props) => {
  return (
)
}
export default IframeImPage

Full‑Event Tracking : The system captures every user interaction (clicks, DOM mutations, visibility changes, and API calls) using listeners and a publish‑subscribe mechanism, sending detailed event data—including page, region, and element text—to the analytics backend.

Finally, the article reflects on future improvements such as reducing iframe overhead, enhancing flexible SOP flows for diverse product categories, and deeper integration of AI assistance to boost agent efficiency.