const eventSource = new EventSource('https://example.com/events');

// 監(jiān)聽消息事件
eventSource.onmessage = (event) => {
  console.log('接收到消息:', event.data);
};

// 監(jiān)聽錯(cuò)誤事件
eventSource.onerror = (error) => {
  console.error('發(fā)生錯(cuò)誤:', error);
};

// 監(jiān)聽連接打開事件
eventSource.onopen = () => {
  console.log('連接已建立');
};

// 監(jiān)聽連接關(guān)閉事件
eventSource.onclose = () => {
  console.log('連接已關(guān)閉');
};

const response = await fetch(apiUrl, {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          messages: [
            {
              role: 'user',
              content: '前端學(xué)習(xí)曲線',
            },
          ],
        }),
      });
      const resHeader = response.headers;
      const contentType: string = resHeader.get('content-type') ?? '';
      if (contentType.indexOf('text/event-stream') > -1) {
        const reader = response?.body?.getReader();
        const decoder = new TextDecoder();

        while (true) {
          const { value, done } = (await reader?.read()) ?? {};
          if (done) break;
          const txt = decoder.decode(value);
          // 切割當(dāng)前流，并組裝成數(shù)組，若數(shù)組中包含多個(gè)流，則循環(huán)處理
          const strlist = txt?.split('\n\n')?.filter(Boolean);
          if (strlist) {
            for (const deltaItem of strlist) {
              getStreamValueToView(deltaItem);
            }
          }
        }
      }

/* 每過一個(gè)固定時(shí)間間隔執(zhí)行一次ES實(shí)例化 */
const intervalRun = (rid?: string, tid?: string) => {
      closeStream();
      eventSource.current = new EventSource(apiUrlByDetail(rid, tid));
      eventSource.current.onmessage = (event) => {
        render(event); // 核心渲染邏輯
      };
    // 請求斷開，需要關(guān)閉流
      eventSource.current.onerror = () => {
        closeStream();
        closeInterval();
      };
    };

function closeStream() {
    if (eventSource.current) {
      eventSource.current.close(); // 終止SSE響應(yīng)
      eventSource.current = null;
    }
  }

function closeInterval() {
    if (sourceReqTimerId.current) {
      clearInterval(sourceReqTimerId.current);
      sourceReqTimerId.current = null;
    }
  }

const interval = (currReqId?: string, currTraceId?: string) => {
      if (currReqId && currTraceId) {
        intervalRun(currReqId, currTraceId);
        sourceReqTimerId.current = setInterval(() => {
          intervalRun(currReqId, currTraceId);
        }, MAX_INTERVAL_TIME);
      }
    };

const render = (event: Any) => {
      try {
        // 解析事件數(shù)據(jù)，提取data字段
        const { data } = event.data ? JSON.parse(event.data) : {};
        // 存在reqId，開始執(zhí)行渲染邏輯
        if (data?.reqId) {
          // 解構(gòu)獲取reqId和traceId
          const { reqId: rid, traceId: tid } = data;
          // 設(shè)置請求ID和跟蹤ID
          setIdInfo({
            reqId: rid,
            traceId: tid,
          });
          // 獲取流數(shù)據(jù)并渲染到視圖
          getStreamValueToView(data, status);
        }
        // 流輸出結(jié)束
        if (data?.finished) {
          closeStream(); // 關(guān)閉流連接
          closeInterval(); // 清除定時(shí)器
          setRenderStatus(StreamStatusEnum.FINISHED); // 設(shè)置渲染狀態(tài)為已完成
        }
      } catch (error) {
        // 設(shè)置渲染狀態(tài)為錯(cuò)誤
        setRenderStatus(StreamStatusEnum.ERROR);
        // 打印錯(cuò)誤信息
        console.error(error);
      }
    };

/**
 * 流式渲染枚舉
 */
export enum StreamStatusEnum {
  /** 未開始 */
  NOT_BEGIN,
  /** 正在打印 */
  PRINTING,
  /** 打印結(jié)束 */
  FINISHED,
  /** 打印終止 */
  STOPPED,
  /** 打印出錯(cuò) */
  ERROR,
}

  function getStreamValueToView(deltaValue: Record<string, Any>, status: 'view' | 'detail' = 'view') {
    try {
      /** 針對SSE事件數(shù)據(jù)類型處理 */
      if (renderStatus === StreamStatusEnum.NOT_BEGIN) {
        setRenderStatus(StreamStatusEnum.PRINTING);
      }
      if (deltaValue) {
        /** 等待結(jié)果生成 */
        if (!deltaValue?.resultMap?.agentType) {
          setStartLoadingText(deltaValue?.responseAll || '');
        }
        const tasks = deltaValue?.resultMap?.multiAgent?.tasks;
        if (tasks?.length) {
          /** 對話渲染 */
          chatRender(tasks, status);
        }
      }
    } catch (error) {
      console.error(error);
    }
  }

const operater = (currentTask: Any) => {
      /** 深度思考部分 */
      if (currentTask.messageType === MessageTypeEnum.ToolThought) {
        setDeepThinkingTextMap((prev) => ({
          ...prev,
          [currentTask.messageId]: currentTask.toolThought,
        }));
      }
      /** 數(shù)據(jù)分析模塊，展示數(shù)據(jù)分析狀態(tài) */
      if (currentTask.messageType === MessageTypeEnum.DataAnalysis) {
        setDeepThinkingTextMap((prev) => ({
          ...prev,
          [currentTask.messageId]: MessageTypeEnum.DataAnalysis,
        }));
      }
      /** 頁面報(bào)告部分，展示對應(yīng)報(bào)告內(nèi)容 */
      if (currentTask.messageType === MessageTypeEnum.Html) {
        setDeepThinkingTextMap((prev) => ({
          ...prev,
          [currentTask.messageId]: MessageTypeEnum.Html,
        }));
      }
      /** 結(jié)尾文案，總結(jié) */
      if (currentTask.messageType === MessageTypeEnum.Result) {
        setResultText(currentTask.result || '');
      }
    };

function multiRender(tasks: Record<string, Any>[], status: 'view' | 'detail' = 'view') {
    const singlePlanTasks = tasks?.[0];
    const operater = (currentTask: Any) => {......}
    if (singlePlanTasks?.length) {
        const currentTask = singlePlanTasks[singlePlanTasks.length - 1] ?? {};
        operater(currentTask);
    }
  }

async function onStop() {
    closeStream();
    closeInterval();
    setRenderStatus(StreamStatusEnum.STOPPED);
    const { traceId: tid, reqId: rid } = idInfo;
    await stopAnalysisStream({
      traceId: tid,
      reqId: rid,
    });
  }

setDeepThinkingTextMap((prev) => ({
    ...prev,
    [currentTask.messageId]: currentTask.toolThought,
 }));