From f198428eb472f0f4f678d4cca390359c30901d03 Mon Sep 17 00:00:00 2001
From: Nemo Godebski-Pedersen <nemozak1@gmail.com>
Date: Fri, 23 May 2025 11:46:41 +0700
Subject: [PATCH 1/6] simplify json editor

---
 src/components/Preview.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index 76fbb9d..cf8f081 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -296,9 +296,10 @@ const onError = (error) => {
         <JsonEditorVue
           v-model="exampleRequestBody"
           :stringified="true"
-          :mode="Mode.tree"
+          :mode="Mode.text"
           v-bind="{/* local props & attrs */}"
           :onChange="onJsonEditorChange"
+          :mainMenuBar="false"
         />
       </div>
       

From d3f51a9716f075c46c7c11e513f2ef70c639592d Mon Sep 17 00:00:00 2001
From: Hongwei <hongwei@tesobe.com>
Date: Thu, 7 Aug 2025 12:58:53 +0200
Subject: [PATCH 2/6] Remove 'kafka_vSept2018' connector from StatusController
 and message-docs

---
 server/controllers/StatusController.ts | 1 -
 src/obp/message-docs.ts                | 1 -
 2 files changed, 2 deletions(-)

diff --git a/server/controllers/StatusController.ts b/server/controllers/StatusController.ts
index 5bc2133..22018db 100644
--- a/server/controllers/StatusController.ts
+++ b/server/controllers/StatusController.ts
@@ -38,7 +38,6 @@ import { commitId } from '../app'
 export class StatusController {
   private obpExplorerHome = process.env.VITE_OBP_API_EXPLORER_HOST
   private connectors = [
-    'kafka_vSept2018',
     'akka_vDec2018',
     'rest_vMar2019',
     'stored_procedure_vDec2019',
diff --git a/src/obp/message-docs.ts b/src/obp/message-docs.ts
index c78c260..b67c6ec 100644
--- a/src/obp/message-docs.ts
+++ b/src/obp/message-docs.ts
@@ -29,7 +29,6 @@ import { OBP_API_VERSION, get, isServerUp } from '../obp'
 import { updateLoadingInfoMessage } from './common-functions'
 
 export const connectors = [
-  'kafka_vSept2018',
   'akka_vDec2018',
   'rest_vMar2019',
   'stored_procedure_vDec2019',

From e9c6de110553795eb11e09e90607ffd2c1d1fa84 Mon Sep 17 00:00:00 2001
From: Hongwei <hongwei@tesobe.com>
Date: Mon, 11 Aug 2025 17:23:50 +0200
Subject: [PATCH 3/6] Enhance chat store to support new API message types and
 improve legacy handling. Added support for assistant token streaming, tool
 lifecycle events, and approval requests.

---
 src/stores/chat.ts | 45 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 44a62af..5f03ebe 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -284,7 +284,8 @@ export const useChat = defineStore('chat', {
                                 
                                 
                                 // This is where we process different types of messages from Opey by their 'type' field
-                                // Process pending tool calls
+                                // Support both legacy ('message','tool','token') and new streaming types
+                                // Pending tool calls (legacy)
                                 if (data.type === 'message') {
 
                                     if (content.tool_approval_request) {
@@ -310,7 +311,7 @@ export const useChat = defineStore('chat', {
                                     }
                                 }
 
-                                // Now we handle the actual messages from the completed/ failed tool calls
+                                // Now we handle the actual messages from the completed/ failed tool calls (legacy)
                                 if (data.type === 'tool') {
                                     const toolCallId = content.tool_call_id;
                                     if (!toolCallId) {
@@ -336,13 +337,51 @@ export const useChat = defineStore('chat', {
                                     
                                 }
 
-                                if (data.type === 'token' && data.content) {
+                                // Assistant token streaming (legacy and new)
+                                if ((data.type === 'token' || data.type === 'assistant_token') && data.content) {
                                     this.currentAssistantMessage.loading = false;
                                     // Append content to the current assistant message
                                     this.currentAssistantMessage.content += data.content;
                                     // Force Vue to detect the change
                                     this.messages = [...this.messages];
                                 }
+
+                                // Assistant final content (new API emits assistant_complete)
+                                if (data.type === 'assistant_complete' && data.content) {
+                                    this.currentAssistantMessage.loading = false;
+                                    this.currentAssistantMessage.content += data.content;
+                                    this.messages = [...this.messages];
+                                }
+
+                                // New API: Tool lifecycle events mapping to UI model
+                                if (data.type === 'tool_start') {
+                                    const toolMessage: OpeyToolCall = {
+                                        status: 'pending',
+                                        toolCall: {
+                                            id: data.tool_call_id,
+                                            name: data.tool_name,
+                                            args: data.tool_input,
+                                        }
+                                    } as unknown as OpeyToolCall;
+                                    this.currentAssistantMessage.toolCalls.push(toolMessage)
+                                    this.messages = [...this.messages];
+                                }
+                                if (data.type === 'tool_end') {
+                                    const toolMessage = this.getToolCallById(data.tool_call_id)
+                                    if (toolMessage) {
+                                        toolMessage.status = data.status === 'error' ? 'error' : 'success'
+                                        toolMessage.output = data.tool_output
+                                        this.messages = [...this.messages];
+                                    }
+                                }
+                                if (data.type === 'approval_request') {
+                                    // Mark awaiting approval on matched tool call if present
+                                    const toolMessage = this.getToolCallById(data.tool_call_id)
+                                    if (toolMessage) {
+                                        toolMessage.status = 'awaiting_approval'
+                                        this.messages = [...this.messages];
+                                    }
+                                }
                             } catch (e) {
                                 throw new Error(`${e}`);
                             }

From cd1d5c8ec39b60dbfe7d8f93893cae76fe7bdc29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marko=20Mili=C4=87?= <marko@tesobe.com>
Date: Mon, 11 Aug 2025 15:36:23 +0200
Subject: [PATCH 4/6] bugfix/MAke Opey widget recevite responses at GUI

---
 src/stores/chat.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 5f03ebe..3ba8256 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -337,8 +337,7 @@ export const useChat = defineStore('chat', {
                                     
                                 }
 
-                                // Assistant token streaming (legacy and new)
-                                if ((data.type === 'token' || data.type === 'assistant_token') && data.content) {
+                                if (data.type === 'assistant_complete' && data.content) {
                                     this.currentAssistantMessage.loading = false;
                                     // Append content to the current assistant message
                                     this.currentAssistantMessage.content += data.content;

From 7487c89d6e978e22a6f115dec7574c347d4ecde5 Mon Sep 17 00:00:00 2001
From: Nemo Godebski-Pedersen <nemozak1@gmail.com>
Date: Tue, 30 Sep 2025 19:56:00 +0700
Subject: [PATCH 5/6] fix message docs WIP

---
 components.d.ts               |   4 +
 src/components/CodeBlock.vue  | 149 +++++++++++++++++++++++++++++++
 src/router/index.ts           |   3 +-
 src/views/MessageDocsView.vue | 161 +++++++++++++++++++++++-----------
 4 files changed, 267 insertions(+), 50 deletions(-)
 create mode 100644 src/components/CodeBlock.vue

diff --git a/components.d.ts b/components.d.ts
index 1813313..680c1d0 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
     ChatMessage: typeof import('./src/components/ChatMessage.vue')['default']
     ChatWidget: typeof import('./src/components/ChatWidget.vue')['default']
     ChatWidgetOld: typeof import('./src/components/ChatWidgetOld.vue')['default']
+    CodeBlock: typeof import('./src/components/CodeBlock.vue')['default']
     Collections: typeof import('./src/components/Collections.vue')['default']
     Content: typeof import('./src/components/Content.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
@@ -21,6 +22,7 @@ declare module 'vue' {
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElContainter: typeof import('element-plus/es')['ElContainter']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDivider: typeof import('element-plus/es')['ElDivider']
@@ -38,10 +40,12 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     GlossarySearchNav: typeof import('./src/components/GlossarySearchNav.vue')['default']
     HeaderNav: typeof import('./src/components/HeaderNav.vue')['default']
     Menu: typeof import('./src/components/Menu.vue')['default']
+    MessageDocsContent: typeof import('./src/components/MessageDocsContent.vue')['default']
     MessageDocsSearchNav: typeof import('./src/components/MessageDocsSearchNav.vue')['default']
     Preview: typeof import('./src/components/Preview.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
new file mode 100644
index 0000000..50183c0
--- /dev/null
+++ b/src/components/CodeBlock.vue
@@ -0,0 +1,149 @@
+<!--
+  - Open Bank Project -  API Explorer II
+  - Copyright (C) 2023-2024, TESOBE GmbH
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as published by
+  - the Free Software Foundation, either version 3 of the License, or
+  - (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -
+  - Email: contact@tesobe.com
+  - TESOBE GmbH
+  - Osloerstrasse 16/17
+  - Berlin 13359, Germany
+  -
+  -   This product includes software developed at
+  -   TESOBE (http://www.tesobe.com/)
+  -
+  -->
+
+<script setup lang="ts">
+import { ref, onMounted, onUpdated, nextTick } from 'vue'
+
+// Declare global hljs
+declare global {
+  interface Window {
+    hljs: {
+      highlightElement: (element: HTMLElement) => void
+    }
+  }
+}
+
+interface Props {
+  code: any
+  language?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  language: 'json'
+})
+
+const codeBlockRef = ref<HTMLElement>()
+
+const highlight = async () => {
+  await nextTick()
+  if (codeBlockRef.value && window.hljs) {
+    const codeElements = codeBlockRef.value.querySelectorAll('pre code')
+    codeElements.forEach((block) => {
+      window.hljs.highlightElement(block as HTMLElement)
+    })
+  }
+}
+
+onMounted(() => {
+  highlight()
+})
+
+onUpdated(() => {
+  highlight()
+})
+
+const formattedCode = typeof props.code === 'string' 
+  ? props.code 
+  : JSON.stringify(props.code, null, 2)
+</script>
+
+<template>
+  <div ref="codeBlockRef" class="code-block">
+    <pre><code :class="language">{{ formattedCode }}</code></pre>
+  </div>
+</template>
+
+<style scoped>
+.code-block {
+  margin: 1rem 0;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #1e1e1e;
+  border: 1px solid #333;
+}
+
+.code-block pre {
+  margin: 0;
+  padding: 1.5rem;
+  background: #1e1e1e;
+  color: #ddd;
+  font-family: 'Fira Code', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.code-block code {
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Custom scrollbar for code blocks */
+.code-block pre::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+.code-block pre::-webkit-scrollbar-track {
+  background: #2d2d2d;
+}
+
+.code-block pre::-webkit-scrollbar-thumb {
+  background: #555;
+  border-radius: 4px;
+}
+
+.code-block pre::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
+
+/* Syntax highlighting enhancements */
+.code-block :deep(.hljs-string) {
+  color: #98c379;
+}
+
+.code-block :deep(.hljs-number) {
+  color: #d19a66;
+}
+
+.code-block :deep(.hljs-literal) {
+  color: #56b6c2;
+}
+
+.code-block :deep(.hljs-attr) {
+  color: #e06c75;
+}
+
+.code-block :deep(.hljs-punctuation) {
+  color: #abb2bf;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 8675f9b..07cf1c0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -36,6 +36,7 @@ import InternalServerErrorView from '../views/InternalServerErrorView.vue'
 import APIServerErrorView from '../views/APIServerErrorView.vue'
 import APIServerStatusView from '../views/APIServerStatusView.vue'
 import { isServerUp } from '../obp'
+import MessageDocsContent from '@/components/CodeBlock.vue'
 
 export default async function router(): Promise<any> {
   const isServerActive = await isServerUp()
@@ -60,7 +61,7 @@ export default async function router(): Promise<any> {
       {
         path: '/message-docs/:id',
         name: 'message-docs',
-        component: isServerActive ? MessageDocsView : InternalServerErrorView
+        component: isServerActive ? MessageDocsView : InternalServerErrorView,
       },
       {
         path: '/operationid',
diff --git a/src/views/MessageDocsView.vue b/src/views/MessageDocsView.vue
index 20b5659..8895f04 100644
--- a/src/views/MessageDocsView.vue
+++ b/src/views/MessageDocsView.vue
@@ -31,12 +31,16 @@ import { useRoute } from 'vue-router'
 import SearchNav from '../components/MessageDocsSearchNav.vue'
 import { connectors } from '../obp/message-docs'
 import { obpGroupedMessageDocsKey } from '@/obp/keys';
+import MessageDocsSearchNav from '../components/MessageDocsSearchNav.vue';
+import CodeBlock from '../components/CodeBlock.vue';
 
 let connector = connectors[0]
 const route = useRoute()
 const groupedMessageDocs = ref(inject(obpGroupedMessageDocsKey)!)
 const messageDocs = ref({})
 
+const activeNames = ref(['1', '2', '3', '4', '5', '6'])
+
 onBeforeMount(() => {
   setDoc()
 })
@@ -64,68 +68,126 @@ function showDependentEndpoints(value: any) {
 </script>
 
 <template>
-  <el-container>
+  <el-container class="root">
     <el-aside class="search-nav" width="20%">
       <SearchNav />
     </el-aside>
     <el-main>
       <el-container class="main">
-        <el-container>
-          <main>
-            <el-backtop :right="100" :bottom="100" target="main" />
-            <div v-for="(group, key) of messageDocs" :key="key">
-              <div v-for="(value, key) of group" :key="value">
-                <el-divider content-position="left">{{ value.process }}</el-divider>
-                <a v-bind:href="`#${value.process}`" :id="value.process">
-                  <h2>{{ value.description }}</h2>
-                </a>
-                <el-descriptions direction="vertical" :column="1" border>
-                  <el-descriptions-item label="Outbound Topic">
-                    {{ value.outbound_topic }}
-                  </el-descriptions-item>
-                  <el-descriptions-item label="Inbound Topic">
-                    {{ value.inbound_topic }}
-                  </el-descriptions-item>
-                  <el-descriptions-item label="Outbound Message">
-                    <pre>{{ JSON.stringify(value.example_outbound_message, null, 4) }}</pre>
-                  </el-descriptions-item>
-                  <el-descriptions-item label="Inbound Message">
-                    <pre>{{ JSON.stringify(value.example_inbound_message, null, 4) }}</pre>
-                  </el-descriptions-item>
-                  <el-descriptions-item v-if="showRequiredFieldInfo(value.requiredFieldInfo)" label="Required Fields">
-                    <pre>{{ JSON.stringify(value.requiredFieldInfo, null, 4) }}</pre>
-                  </el-descriptions-item>
-                  <el-descriptions-item v-if="showDependentEndpoints(value.dependent_endpoints)"
-                    label="Dependent Endpoints">
-                    <ul>
-                      <li v-for="(endpoint, key) of value.dependent_endpoints">
-                        {{ endpoint.version }}: {{ endpoint.name }}
-                      </li>
-                    </ul>
-                  </el-descriptions-item>
-                </el-descriptions>
-                <el-divider content-position="right">{{ value.process }}</el-divider>
-                <br />
-                <br />
-                <br />
-                <br />
+        <div v-for="(group, key) of messageDocs" :key="key">
+          <div v-for="(value, key) of group" :key="value">
+            <el-divider></el-divider>
+            <header>
+
+            </header>
+            <a v-bind:href="`#${value.process}`" :id="value.process">
+              <h2>{{ value.process }}</h2>
+            </a>
+            <p>{{ value.description }}</p>
+
+            <section class="topics">
+              <div>
+                <strong>Outbound Topic: </strong>
+                <el-tag type="info" round>{{ value.outbound_topic }}</el-tag>
               </div>
-            </div>
-          </main>
-        </el-container>
+              <div>
+                <strong>Inbound Topic: </strong>
+                <el-tag type="info" round>{{ value.inbound_topic }}</el-tag>
+              </div>
+            </section>
+
+            <section>
+              <h3>Example Outbound Message</h3>
+              <CodeBlock :code="value.example_outbound_message" />
+            </section>
+
+            <section>
+              <h3>Example Inbound Message</h3>
+              <CodeBlock :code="value.example_inbound_message" />
+            </section>
+
+            <section v-if="showRequiredFieldInfo(value.requiredFieldInfo)">
+              <h3>Required Fields</h3>
+              <CodeBlock :code="value.requiredFieldInfo" />
+            </section>
+
+            <section v-if="showDependentEndpoints(value.dependent_endpoints)">
+              <h3>Dependent Endpoints</h3>
+              <ul>
+                <li v-for="endpoint in value.dependent_endpoints" :key="endpoint.name">
+                  {{ endpoint.version }} — {{ endpoint.name }}
+                </li>
+              </ul>
+            </section>
+          </div>
+        </div>
+
       </el-container>
     </el-main>
   </el-container>
+
+  <!-- <el-container>
+    <el-aside class="search-nav" width="20%">
+      <MessageDocsSearchNav />
+    </el-aside>
+    <el-main>
+      <el-backtop :right="100" :bottom="100" target="main" />
+      <div v-for="(group, key) of messageDocs" :key="key">
+        <div v-for="(value, key) of group" :key="value">
+          <el-divider content-position="left">{{ value.process }}</el-divider>
+          <a v-bind:href="`#${value.process}`" :id="value.process">
+            <h2>{{ value.description }}</h2>
+          </a>
+          <el-collapse v-model="activeNames" @change="handleChange">
+            <el-collapse-item title="Outbound Topic" name="1">
+              {{ value.outbound_topic }}
+            </el-collapse-item>
+            <el-collapse-item title="Inbound Topic" name="2">
+              {{ value.inbound_topic }}
+            </el-collapse-item>
+            <el-collapse-item title="Outbound Message" name="3">
+              <pre>{{ JSON.stringify(value.example_outbound_message, null, 4) }}</pre>
+            </el-collapse-item>
+            <el-collapse-item title="Inbound Message" name="4">
+              <pre>{{ JSON.stringify(value.example_inbound_message, null, 4) }}</pre>
+            </el-collapse-item>
+            <el-collapse-item v-if="showRequiredFieldInfo(value.requiredFieldInfo)" title="Required Fields" name="5">
+              <pre>{{ JSON.stringify(value.requiredFieldInfo, null, 4) }}</pre>
+            </el-collapse-item>
+            <el-collapse-item v-if="showDependentEndpoints(value.dependent_endpoints)" title="Dependent Endpoints"
+              name="6">
+              <ul>
+                <li v-for="(endpoint, key) of value.dependent_endpoints">
+                  {{ endpoint.version }}: {{ endpoint.name }}
+                </li>
+              </ul>
+            </el-collapse-item>
+          </el-collapse>
+          <el-divider content-position="right">{{ value.process }}</el-divider>
+          <br />
+          <br />
+          <br />
+          <br />
+        </div>
+      </div>
+    </el-main>
+  </el-container> -->
 </template>
 
 <style scoped>
+.root {
+  height: 100%;
+}
+
 .main {
-  max-height: 90vh;
+  height: 100%;
+  overflow: scroll;
 }
 
-template {
-  overflow: auto;
-  max-height: 900px;
+.search-nav {
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
 }
 
 main {
@@ -141,6 +203,7 @@ span {
 div {
   font-size: 14px;
 }
+
 pre {
   font-family: 'Roboto';
 }
@@ -154,7 +217,7 @@ a {
   color: #39455f;
 }
 
-.content :deep(a) {
+/* .content :deep(a) {
   text-decoration: none;
   color: #ffffff;
   font-family: 'Roboto';
@@ -162,7 +225,7 @@ a {
   border-radius: 3px;
   background-color: #52b165;
   padding: 1px;
-}
+} */
 
 .content :deep(a):hover {
   background-color: #39455f;

From 611bee36338b277aba4db79730f7fdf266f410b4 Mon Sep 17 00:00:00 2001
From: Nemo Godebski-Pedersen <nemozak1@gmail.com>
Date: Thu, 2 Oct 2025 17:15:21 +0700
Subject: [PATCH 6/6] WIP message docs improvement

---
 src/components/CodeBlock.vue  | 127 +++++++++++++++++++++++++++++++---
 src/views/MessageDocsView.vue |  23 +++---
 2 files changed, 130 insertions(+), 20 deletions(-)

diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
index 50183c0..a6cc2cd 100644
--- a/src/components/CodeBlock.vue
+++ b/src/components/CodeBlock.vue
@@ -2,7 +2,18 @@
   - Open Bank Project -  API Explorer II
   - Copyright (C) 2023-2024, TESOBE GmbH
   -
-  - This program is free software: you can redistribute it and/or modify
+    <div v-if="copyable" class="code-block-header">
+      <button 
+        @click="copyToClipboard" 
+        class="copy-button"
+        :class="{ 'copied': copied }"
+      >
+        <el-icon v-if="!copied" class="icon"><DocumentCopy /></el-icon>
+        <el-icon v-else class="icon"><Check /></el-icon>
+        <span v-if="!copied">Copy</span>
+        <span v-else>Copied!</span>
+      </button>
+    </div>rogram is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as published by
   - the Free Software Foundation, either version 3 of the License, or
   - (at your option) any later version.
@@ -27,6 +38,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUpdated, nextTick } from 'vue'
+import { DocumentCopy, Check } from '@element-plus/icons-vue'
 
 // Declare global hljs
 declare global {
@@ -40,13 +52,16 @@ declare global {
 interface Props {
   code: any
   language?: string
+  copyable?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  language: 'json'
+  language: 'json',
+  copyable: false
 })
 
 const codeBlockRef = ref<HTMLElement>()
+const copied = ref(false)
 
 const highlight = async () => {
   await nextTick()
@@ -58,6 +73,18 @@ const highlight = async () => {
   }
 }
 
+const copyToClipboard = async () => {
+  try {
+    await navigator.clipboard.writeText(formattedCode)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy: ', err)
+  }
+}
+
 onMounted(() => {
   highlight()
 })
@@ -73,7 +100,29 @@ const formattedCode = typeof props.code === 'string'
 
 <template>
   <div ref="codeBlockRef" class="code-block">
-    <pre><code :class="language">{{ formattedCode }}</code></pre>
+    <div v-if="copyable" class="code-block-header">
+      <button 
+        @click="copyToClipboard" 
+        class="copy-button"
+        :class="{ 'copied': copied }"
+      >
+        <span v-if="!copied">
+          <el-icon :size="10">
+            <DocumentCopy /> 
+          </el-icon>
+          Copy
+        </span>
+        <span v-else>
+          <el-icon :size="10">
+            <Check /> 
+          </el-icon>
+          Copied!
+        </span>
+      </button>
+    </div>
+    <div class="code-container">
+      <pre><code :class="language">{{ formattedCode }}</code></pre>
+    </div>
   </div>
 </template>
 
@@ -84,9 +133,52 @@ const formattedCode = typeof props.code === 'string'
   overflow: hidden;
   background: #1e1e1e;
   border: 1px solid #333;
+  position: relative;
 }
 
-.code-block pre {
+.code-block-header {
+  background: #2d2d2d;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid #333;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.copy-button {
+  background: #444;
+  border: 1px solid #666;
+  color: #ddd;
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.copy-button .icon {
+  font-size: 14px;
+}
+
+.copy-button:hover {
+  background: #555;
+  border-color: #777;
+}
+
+.copy-button.copied {
+  background: #4caf50;
+  border-color: #4caf50;
+  color: white;
+}
+
+.code-container {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.code-container pre {
   margin: 0;
   padding: 1.5rem;
   background: #1e1e1e;
@@ -99,7 +191,7 @@ const formattedCode = typeof props.code === 'string'
   word-wrap: break-word;
 }
 
-.code-block code {
+.code-container code {
   background: transparent;
   padding: 0;
   border-radius: 0;
@@ -108,21 +200,38 @@ const formattedCode = typeof props.code === 'string'
 }
 
 /* Custom scrollbar for code blocks */
-.code-block pre::-webkit-scrollbar {
+.code-container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.code-container::-webkit-scrollbar-track {
+  background: #2d2d2d;
+}
+
+.code-container::-webkit-scrollbar-thumb {
+  background: #555;
+  border-radius: 4px;
+}
+
+.code-container::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
+
+.code-container pre::-webkit-scrollbar {
   height: 8px;
   width: 8px;
 }
 
-.code-block pre::-webkit-scrollbar-track {
+.code-container pre::-webkit-scrollbar-track {
   background: #2d2d2d;
 }
 
-.code-block pre::-webkit-scrollbar-thumb {
+.code-container pre::-webkit-scrollbar-thumb {
   background: #555;
   border-radius: 4px;
 }
 
-.code-block pre::-webkit-scrollbar-thumb:hover {
+.code-container pre::-webkit-scrollbar-thumb:hover {
   background: #777;
 }
 
diff --git a/src/views/MessageDocsView.vue b/src/views/MessageDocsView.vue
index 8895f04..6144377 100644
--- a/src/views/MessageDocsView.vue
+++ b/src/views/MessageDocsView.vue
@@ -37,7 +37,7 @@ import CodeBlock from '../components/CodeBlock.vue';
 let connector = connectors[0]
 const route = useRoute()
 const groupedMessageDocs = ref(inject(obpGroupedMessageDocsKey)!)
-const messageDocs = ref({})
+const messageDocs = ref(null as any)
 
 const activeNames = ref(['1', '2', '3', '4', '5', '6'])
 
@@ -73,7 +73,7 @@ function showDependentEndpoints(value: any) {
       <SearchNav />
     </el-aside>
     <el-main>
-      <el-container class="main">
+      <el-container class="main" direction="vertical">
         <div v-for="(group, key) of messageDocs" :key="key">
           <div v-for="(value, key) of group" :key="value">
             <el-divider></el-divider>
@@ -88,27 +88,29 @@ function showDependentEndpoints(value: any) {
             <section class="topics">
               <div>
                 <strong>Outbound Topic: </strong>
-                <el-tag type="info" round>{{ value.outbound_topic }}</el-tag>
+                <el-tag v-if="value.outbound_topic" type="info" round>{{ value.outbound_topic }}</el-tag>
+                <el-tag v-else type="error" round>None</el-tag>
               </div>
               <div>
                 <strong>Inbound Topic: </strong>
-                <el-tag type="info" round>{{ value.inbound_topic }}</el-tag>
+                <el-tag v-if="value.inbound_topic" type="info" round>{{ value.inbound_topic }}</el-tag>
+                <el-tag v-else type="error" round>None</el-tag>
               </div>
             </section>
 
             <section>
               <h3>Example Outbound Message</h3>
-              <CodeBlock :code="value.example_outbound_message" />
+              <CodeBlock :code="value.example_outbound_message" copyable />
             </section>
 
             <section>
               <h3>Example Inbound Message</h3>
-              <CodeBlock :code="value.example_inbound_message" />
+              <CodeBlock :code="value.example_inbound_message" copyable />
             </section>
 
             <section v-if="showRequiredFieldInfo(value.requiredFieldInfo)">
               <h3>Required Fields</h3>
-              <CodeBlock :code="value.requiredFieldInfo" />
+              <CodeBlock :code="value.requiredFieldInfo" copyable />
             </section>
 
             <section v-if="showDependentEndpoints(value.dependent_endpoints)">
@@ -181,7 +183,8 @@ function showDependentEndpoints(value: any) {
 
 .main {
   height: 100%;
-  overflow: scroll;
+  overflow-y: auto;
+  flex-direction: column;
 }
 
 .search-nav {
@@ -196,9 +199,7 @@ main {
   font-family: 'Roboto';
 }
 
-span {
-  font-size: 28px;
-}
+
 
 div {
   font-size: 14px;