diff --git a/src/components/bubble/index.vue b/src/components/bubble/index.vue
index 77c30566ba645cb03e7d88f56d773b030a81edc1..52b0222c070a707d85dafc1f06a7f75add3f29ca 100644
--- a/src/components/bubble/index.vue
+++ b/src/components/bubble/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, VNode, h } from 'vue';
 import type { CSSProperties } from 'vue';
 
 type Style = Record<'avatar' | 'content', CSSProperties>;
@@ -11,6 +11,7 @@ interface BubbleProps {
   placement?: 'start' | 'end';
   shape?: 'round' | 'corner';
   styles?: Partial<Style>;
+  contentRender?: (content: string) => VNode;
 }
 
 const props = withDefaults(defineProps<BubbleProps>(), {
@@ -33,7 +34,18 @@ const props = withDefaults(defineProps<BubbleProps>(), {
       class="bubble-wrapper-content"
       :style="styles ? styles['content'] : ''"
     >
-      <div>{{ content }}</div>
+      <div class="loading" v-if="loading">
+        <img src="@/assets/images/loading.png" alt="" class="loading-icon" />
+        <div class="loading-text">EulerCopilot正在生成回答...</div>
+      </div>
+      <div v-else>
+        <div v-if="contentRender">
+          <component :is="contentRender(content)" />
+        </div>
+        <div v-else>
+          {{ content }}
+        </div>
+      </div>
 
       <slot name="footer" />
     </div>
@@ -69,6 +81,34 @@ const props = withDefaults(defineProps<BubbleProps>(), {
     white-space: pre-wrap;
     word-break: break-all;
     overflow-wrap: break-all;
+
+    .loading {
+      display: flex;
+      background-color: var(--o-bg-color-base);
+      border-radius: 8px;
+      border-top-left-radius: 0px;
+
+      @keyframes rotate-img {
+        from {
+          transform: rotate(0);
+        }
+
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      &-icon {
+        animation: rotate-img 1s infinite linear;
+      }
+
+      &-text {
+        font-size: 16px;
+        line-height: 24px;
+        padding-left: 12px;
+        color: var(--o-text-color-primary);
+      }
+    }
   }
 }
 </style>
diff --git a/src/utils/fetchStream.ts b/src/utils/fetchStream.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e88591e2cb606839ae0232fd331747144e411f44
--- /dev/null
+++ b/src/utils/fetchStream.ts
@@ -0,0 +1,134 @@
+const DEFAULT_STREAM_SEPARATOR = '\n\n';
+
+const DEFAULT_PART_SEPARATOR = '\n';
+
+const DEFAULT_KV_SEPARATOR = ':';
+
+const isValidString = (str: string) => (str ?? '').trim() !== '';
+
+/**
+ * @description A TransformStream inst that splits a stream into parts based on {@link DEFAULT_STREAM_SEPARATOR}
+ * @example
+ *
+ * `event: delta
+ * data: { content: 'hello' }
+ *
+ * event: delta
+ * data: { key: 'world!' }
+ *
+ * `
+ */
+function splitStream() {
+  let buffer = '';
+
+  return new TransformStream<string, string>({
+    transform(streamChunk, controller) {
+      buffer += streamChunk;
+
+      const parts = buffer.split(DEFAULT_STREAM_SEPARATOR);
+
+      parts.slice(0, -1).forEach((part) => {
+        if (isValidString(part)) {
+          controller.enqueue(part);
+        }
+      });
+
+      buffer = parts[parts.length - 1];
+    },
+    flush(controller) {
+      if (isValidString(buffer)) {
+        controller.enqueue(buffer);
+      }
+    },
+  });
+}
+
+export type SSEFields = 'data' | 'event' | 'id' | 'retry';
+
+/**
+ * @example
+ * const sseObject = {
+ *    event: 'delta',
+ *    data: '{ key: "world!" }',
+ * };
+ */
+export type SSEOutput = Partial<Record<SSEFields, any>>;
+
+function splitPart() {
+  return new TransformStream<string, SSEOutput>({
+    transform(partChunk, controller) {
+      const lines = partChunk.split(DEFAULT_PART_SEPARATOR);
+
+      const sseEvent = lines.reduce<SSEOutput>((acc, line) => {
+        const separatorIndex = line.indexOf(DEFAULT_KV_SEPARATOR);
+
+        if (separatorIndex === -1) {
+          throw new Error(
+            `The key-value separator "${DEFAULT_KV_SEPARATOR}" is not found in the sse line chunk!`,
+          );
+        }
+
+        const key = line.slice(0, separatorIndex);
+
+        if (!isValidString(key)) return acc;
+
+        const value = line.slice(separatorIndex + 1);
+
+        return { ...acc, [key]: value };
+      }, {});
+
+      if (Object.keys(sseEvent).length === 0) return;
+
+      controller.enqueue(sseEvent);
+    },
+  });
+}
+
+export interface XStreamOptions<Output> {
+  readableStream: ReadableStream<Uint8Array>;
+
+  transformStream?: TransformStream<string, Output>;
+}
+
+type XReadableStream<R = SSEOutput> = ReadableStream<R> & AsyncGenerator<R>;
+
+function fetchStream<Output = SSEOutput>(options: XStreamOptions<Output>) {
+  const { readableStream, transformStream } = options;
+
+  if (!(readableStream instanceof ReadableStream)) {
+    throw new Error(
+      'The options.readableStream must be an instance of ReadableStream.',
+    );
+  }
+
+  // Default encoding is `utf-8`
+  const decoderStream = new TextDecoderStream();
+
+  const stream = (
+    transformStream
+      ? readableStream.pipeThrough(decoderStream).pipeThrough(transformStream)
+      : readableStream
+          .pipeThrough(decoderStream)
+          .pipeThrough(splitStream())
+          .pipeThrough(splitPart())
+  ) as XReadableStream<Output>;
+
+  /** support async iterator */
+  stream[Symbol.asyncIterator] = async function* () {
+    const reader = this.getReader();
+
+    while (true) {
+      const { done, value } = await reader.read();
+
+      if (done) break;
+
+      if (!value) continue;
+
+      yield value;
+    }
+  };
+
+  return stream;
+}
+
+export { fetchStream };
diff --git a/src/views/chat/Sender.vue b/src/views/chat/Sender.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0012d98343c56f1a7076d7e6fee66b833f0043eb
--- /dev/null
+++ b/src/views/chat/Sender.vue
@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps<{
+  isStreaming: boolean;
+}>();
+
+const emits = defineEmits<{
+  (e: 'send', q: string): void;
+}>();
+
+const senderInput = ref('');
+
+function onKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    if (props.isStreaming) return;
+    emits('send', senderInput.value);
+    senderInput.value = '';
+  }
+}
+
+function onSendClick() {
+  if (props.isStreaming) return;
+  emits('send', senderInput.value);
+  senderInput.value = '';
+}
+</script>
+
+<template>
+  <div class="sender">
+    <div class="create-button">
+      <img src="@/assets/svgs/create.svg" alt="" />
+    </div>
+    <div class="chat-sender">
+      <textarea
+        v-model="senderInput"
+        placeholder="在此输入你想了解的内容，输入Shift+Enter换行"
+        maxlength="2000"
+        @keydown="onKeyDown"
+      />
+      <img
+        v-if="isStreaming"
+        src="@/assets/svgs/send_disabled.svg"
+        alt=""
+        @click="onSendClick"
+      />
+      <img
+        v-else
+        src="@/assets/svgs/send_enabled.svg"
+        alt=""
+        @click="onSendClick"
+      />
+    </div>
+  </div>
+</template>
+
+<style style="scss" scoped>
+.sender {
+  width: 100%;
+  display: flex;
+  gap: 12px;
+  margin-bottom: 10px;
+
+  .create-button {
+    width: 56px;
+    height: 56px;
+    flex-shrink: 0;
+    background-color: var(--o-bg-color-base);
+    border-radius: 8px;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+    img {
+      width: 40px;
+      height: 40px;
+      margin: 8px;
+    }
+  }
+
+  .chat-sender {
+    width: 100%;
+    height: 56px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background-color: var(--o-bg-color-base);
+    position: relative;
+    padding-right: 60px;
+
+    textarea {
+      padding-top: 18px;
+      padding-left: 12px;
+      height: 100%;
+      border-radius: 8px;
+      width: 100%;
+      border: none;
+      outline: none;
+      color: var(--o-text-color-primary);
+      font-size: 16px;
+      background-color: var(--o-bg-color-base);
+      overflow: auto;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+
+      font-family:
+        HarmonyOS_Sans_SC_Medium,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        Oxygen,
+        Ubuntu,
+        Cantarell,
+        'Open Sans',
+        'Helvetica Neue',
+        sans-serif;
+    }
+
+    img {
+      width: 40px;
+      height: 40px;
+      position: absolute;
+      right: 10px;
+      top: 8px;
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 5916923821c1252108c98c048b69905a86ae10e1..8a2a77f8f7cea4f406100494c9345e6bf3947e28 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -1,21 +1,14 @@
 <script lang="ts" setup>
-import Welcome from './Welcome.vue';
 import Operations from './Operations.vue';
 import CommonFooter from '@/components/commonFooter/CommonFooter.vue';
 import Bubble from '@/components/bubble/index.vue';
+import Sender from './Sender.vue';
+import Welcome from './Welcome.vue';
 import userAvatar from '@/assets/svgs/dark_user.svg';
 import robotAvatar from '@/assets/svgs/robot.svg';
-import { computed, ref, onBeforeMount, onBeforeUnmount } from 'vue';
-
-const userInput = ref('');
-
-const handleKeydown = (evt: any): any => {
-  if (evt.key === 'Enter' && !evt.shiftKey) {
-    evt.preventDefault();
-    if (userInput.value !== '') {
-    }
-  }
-};
+import { computed, ref, onBeforeMount, onBeforeUnmount, h } from 'vue';
+import { fetchStream } from '@/utils/fetchStream';
+import marked from '@/utils/marked';
 
 const headerStyles = computed(() => {
   return window.eulercopilot.process.platform === 'darwin'
@@ -29,6 +22,125 @@ function storageListener(e: StorageEvent) {
   }
 }
 
+const { conversations, setConversations } = useConversations();
+
+const { isStreaming, queryStream } = useStream();
+
+function useStream() {
+  const isStreaming = ref(false);
+
+  const queryStream = async (
+    q: string,
+    cId: string,
+    lang: 'zh' | 'en' = 'zh',
+  ) => {
+    const headers = {};
+    headers['Content-Type'] = 'application/json; charset=UTF-8';
+    const body = {
+      question: q,
+      conversationId: cId,
+      language: lang,
+      features: {
+        context_num: 2,
+        max_tokens: 2048,
+      },
+    };
+    const resp = await fetch('/api/chat', {
+      method: 'POST',
+      body: JSON.stringify(body),
+      headers,
+    });
+
+    for await (const chunk of fetchStream({
+      readableStream: resp.body!,
+    })) {
+      if (!chunk.data) {
+        break;
+      }
+      if (chunk.data.trim() === '[DONE]') {
+        isStreaming.value = false;
+        break;
+      }
+      setConversations(chunk.data);
+    }
+  };
+
+  return { isStreaming, queryStream };
+}
+
+function useConversations() {
+  interface Conversation {
+    id: string;
+    content: string;
+    role: 'user' | 'assistant';
+    metadata?: StreamMetadata;
+  }
+
+  type StreamEvent = 'text.add' | 'init' | 'input';
+  interface StreamMetadata {
+    inputTokens: number;
+
+    outputTokens: number;
+
+    timeCost: number;
+  }
+
+  interface StreamChunk {
+    content: {
+      text: string;
+    };
+    conversationId: string;
+    event: StreamEvent;
+    groupId: string;
+    id: string;
+    metadata: StreamMetadata;
+    taskId: string;
+  }
+
+  const conversations = ref<Conversation[]>([]);
+
+  const setConversations = (data: string) => {
+    console.log(JSON.parse(data));
+    const conversation = conversations.value[conversations.value.length - 1];
+    const { id, event, content, metadata } = JSON.parse(data) as StreamChunk;
+    if (event === 'init') {
+      conversation.id = id;
+      conversations.value.push({
+        id: '',
+        content: '',
+        role: 'assistant',
+      });
+    }
+    if (event === 'text.add') {
+      conversation.content += content.text;
+      conversation.metadata = metadata;
+    }
+  };
+
+  return { conversations, setConversations };
+}
+
+function onSend(q: string) {
+  conversations.value.push({
+    id: `user-${conversations.value.length / 2 + 1}`,
+    content: q,
+    role: 'user',
+  });
+  isStreaming.value = true;
+  queryStream(q, '1d190929-910d-49e7-8064-39f3bdbee695');
+}
+
+const markedContent = computed(
+  () => (text: string) => marked.parse(text) as string,
+);
+
+function renderMarkdown(text: string) {
+  return h('div', {
+    id: 'markdown-preview',
+    innerHTML: text,
+  });
+}
+
 onBeforeMount(() => {
   const theme =
     localStorage.getItem('theme') ||
@@ -59,60 +171,60 @@ onBeforeUnmount(() => {
       </div>
     </header>
 
-    <!-- TODO：待完成 -->
     <div class="chat-container">
-      <!-- <Welcome class="welcome" /> -->
-      <div class="chat-container-bubble">
-        <Bubble
-          :avatar="userAvatar"
-          content="hello"
-          :styles="{
-            content: {
-              backgroundImage:
-                'linear-gradient(to right, rgba(109, 117, 250, 0.2), rgba(90, 179, 255, 0.2))',
-            },
-          }"
-        />
-        <Bubble
-          :avatar="robotAvatar"
-          :styles="{
-            content: {
-              padding: '24px 24px 16px 24px',
-            },
-          }"
-          content="hello! How can i assist you today Docker or openeuler related tasks? Mock Mock Mock MockMock MockMock MockMock MockMock MockMock Mock"
-        >
-          <template #footer>
-            <div class="bubble-footer">
-              <div class="action-toolbar">
-                <div class="left">tokens:132↑| 9‌↓| 1743141974.70 1 /1</div>
-                <div class="button-group">
-                  <el-tooltip
-                    placement="top"
-                    :content="$t('feedback.copy')"
-                    effect="light"
-                  >
-                    <img src="@/assets/svgs/dark_copy.svg" />
-                  </el-tooltip>
+      <div class="chat-container-main">
+        <div class="chat-container-bubble" v-if="conversations.length">
+          <div
+            v-for="({ id, role, content, metadata }, idx) in conversations"
+            :key="id"
+          >
+            <Bubble
+              :avatar="role === 'user' ? userAvatar : robotAvatar"
+              :content="role === 'assistant' ? markedContent(content) : content"
+              :content-render="
+                role === 'assistant' ? renderMarkdown : undefined
+              "
+              :loading="
+                role === 'assistant' &&
+                !content &&
+                idx === conversations.length - 1
+              "
+              :styles="{
+                content:
+                  role === 'user'
+                    ? {
+                        backgroundImage:
+                          'linear-gradient(to right, rgba(109, 117, 250, 0.2), rgba(90, 179, 255, 0.2))',
+                      }
+                    : {},
+              }"
+            >
+              <template v-if="role === 'assistant' && !isStreaming" #footer>
+                <div class="bubble-footer">
+                  <div class="action-toolbar">
+                    <div class="left">
+                      tokens:{{ metadata?.inputTokens }}↑|
+                      {{ metadata?.outputTokens }}‌↓|
+                      {{ Number(metadata?.timeCost).toFixed(2) }}
+                    </div>
+                    <div class="button-group">
+                      <el-tooltip
+                        placement="top"
+                        :content="$t('feedback.copy')"
+                        effect="light"
+                      >
+                        <img src="@/assets/svgs/dark_copy.svg" />
+                      </el-tooltip>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
-          </template>
-        </Bubble>
-      </div>
-
-      <div class="chat-container-bottom">
-        <div class="create-button">
-          <img src="@/assets/svgs/create.svg" alt="" />
-        </div>
-        <div class="chat-sender">
-          <textarea
-            v-model="userInput"
-            placeholder="在此输入你想了解的内容，输入Shift+Enter换行"
-            maxlength="2000"
-          />
-          <img src="@/assets/svgs/send_enabled.svg" alt="" />
+              </template>
+            </Bubble>
+          </div>
         </div>
+        <Welcome class="welcome" v-else />
+
+        <Sender :is-streaming="isStreaming" @send="onSend" class="sender" />
       </div>
 
       <CommonFooter />
@@ -152,123 +264,65 @@ onBeforeUnmount(() => {
 }
 
 .chat-container {
-  height: calc(100% - 40px);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-
-  .welcome {
-    margin-top: 200px;
-  }
+  height: calc(100% - 50px);
 
-  &-bubble {
+  padding: 16px;
+  &-main {
     width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
-    gap: 24px;
-    flex: 1;
+    align-items: center;
+    justify-content: space-between;
 
-    .bubble-footer {
-      margin-top: 20px;
-      .action-toolbar {
-        border-top: 1px dashed var(--o-border-color-light);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 16px 0 0 0;
-
-        img {
-          width: 24px;
-          height: 24px;
-        }
+    .welcome {
+      margin-top: 200px;
+      flex: 1;
+    }
 
-        .left {
-          font-size: 12px;
-          line-height: 18px;
-          color: var(--o-text-color-tertiary);
-        }
+    .chat-container-bubble {
+      width: 100%;
+      height: 30%;
+      overflow: auto;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      flex: 1;
 
-        .button-group {
-          height: 24px;
+      .bubble-footer {
+        margin-top: 20px;
+        .action-toolbar {
+          border-top: 1px dashed var(--o-border-color-light);
           display: flex;
+          justify-content: space-between;
           align-items: center;
-        }
-      }
-    }
-  }
+          padding: 16px 0 0 0;
 
-  &-bottom {
-    width: 100%;
-    display: flex;
-    gap: 12px;
-    margin-bottom: 10px;
-
-    .create-button {
-      width: 56px;
-      height: 56px;
-      flex-shrink: 0;
-      background-color: var(--o-bg-color-base);
-      border-radius: 8px;
-      cursor: pointer;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-
-      img {
-        width: 40px;
-        height: 40px;
-        margin: 8px;
-      }
-    }
+          img {
+            width: 24px;
+            height: 24px;
+          }
 
-    .chat-sender {
-      width: 100%;
-      height: 56px;
-      border-radius: 8px;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      background-color: var(--o-bg-color-base);
-      position: relative;
-      padding-right: 60px;
-
-      textarea {
-        padding-top: 18px;
-        padding-left: 12px;
-        height: 100%;
-        border-radius: 8px;
-        width: 100%;
-        border: none;
-        outline: none;
-        color: var(--o-text-color-primary);
-        font-size: 16px;
-        background-color: var(--o-bg-color-base);
-        overflow: auto;
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-
-        font-family:
-          HarmonyOS_Sans_SC_Medium,
-          system-ui,
-          -apple-system,
-          BlinkMacSystemFont,
-          'Segoe UI',
-          Roboto,
-          Oxygen,
-          Ubuntu,
-          Cantarell,
-          'Open Sans',
-          'Helvetica Neue',
-          sans-serif;
-      }
+          .left {
+            font-size: 12px;
+            line-height: 18px;
+            color: var(--o-text-color-tertiary);
+          }
 
-      img {
-        width: 40px;
-        height: 40px;
-        position: absolute;
-        right: 10px;
-        top: 8px;
-        cursor: pointer;
+          .button-group {
+            height: 24px;
+            display: flex;
+            align-items: center;
+          }
+        }
       }
     }
   }
+
+  .sender {
+    margin-top: 25px;
+  }
 }
 </style>