artin/API-Explorer-II
1
0
Fork 0
mirror of https://github.com/OpenBankProject/API-Explorer-II.git synced 2026-02-06 10:47:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

add arguments to tool call container

Browse Source
This commit is contained in:
Nemo Godebski-Pedersen 2025-04-08 16:44:22 +01:00
parent 5e78b4f1b0
commit ba0fe64f02
2 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ChatMessage.vue
View File

@ -82,7 +82,7 @@ export default {
<!-- Render Tool call boxes if there are any -->
<div v-if="message.toolCalls?.length !== 0" class="tool-calls-container">
<div v-for="toolCall in message.toolCalls" class="tool-call">
<ToolCall :name="toolCall.toolCall.name" :status="toolCall.status" :result="toolCall.output" :toolCallId="toolCall.toolCall.id" />
<ToolCall :name="toolCall.toolCall.name" :status="toolCall.status" :args="toolCall.toolCall.args" :result="toolCall.output" :toolCallId="toolCall.toolCall.id" />
</div>
</div>

34
src/components/ToolCall.vue
View File

@ -14,6 +14,10 @@ export default {
type: String,
required: true
},
args: {
type: Object,
required: false
},
result: {
type: Object,
required: false
@ -79,7 +83,16 @@ export default {
<div v-if="expanded" class="tool-detail">
<div class="tool-id">ID: {{ toolCallId }}</div>
<div class="tool-id"><h4>ID:</h4> {{ toolCallId }}</div>
<h4>Arguments:</h4>
<div class="tool-args-container">
<div class="copy-to-clipboard">
<el-button size="small" circle @click="copyToClipboard(JSON.stringify(args, null, 2))" :dark="true"><el-icon><DocumentCopy /></el-icon></el-button>
</div>
<el-scrollbar wrap-class="tool-args">
<vue-json-pretty :data="args" :expand-depth="2" />
</el-scrollbar>
</div>
<h4>Result:</h4>
<div v-if="result" class="tool-result-container">
<div class="copy-to-clipboard">
@ -129,6 +142,25 @@ export default {
z-index: 10;;
}
.tool-id {
display: flex;
flex-direction: row;
align-items: center;
}
.tool-args-container {
background-color: #324863;
padding: 10px;
border-radius: 10px;
margin-top: 10px;
width: 90%;
position: relative;
height: auto;
max-height: 200px;
box-shadow: inset 0px 0px 17px -6px rgba(0,0,0,0.75);
overflow: auto;
}
.tool-result {
position: absolute;
top: 10px;