<!--
  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
  -
  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
  - you may not use this file except in compliance with the License.
  - You may obtain a copy of the License at
  -
  -     https://www.gnu.org/licenses/agpl-3.0.html
  -
  - Unless required by applicable law or agreed to in writing, software
  - distributed under the License is distributed on an "AS IS" BASIS,
  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  - See the License for the specific language governing permissions and
  - limitations under the License.
  -->

<script lang="ts" setup>
import hljs from 'highlight.js';
import javascript from 'highlight.js/lib/languages/javascript';
import { onMounted } from 'vue';

hljs.registerLanguage('javascript', javascript);
const url = `http://langchat.cn`;
const request = `
POST /v1/chat/completions HTTP/1.1
Content-Type: application/json
Authorization: 'Bearer YOUR_ACCESS_TOKEN'
Body:
{
    "messages": [
        { "role": "user", "content": "你好" }
    ]
}
`;

const response = `
data: {"choices": [{"index": 0, "delta": {"content": "你好！"}, "finish_reason": null}], "session_id": null}

data: {"choices": [{"index": 0, "delta": {"content": "我能"}, "finish_reason": null}], "session_id": null}

data: {"choices": [{"index": 0, "delta": {"content": "为你"}, "finish_reason": null}], "session_id": null}

data: {"choices": [{"index": 0, "delta": {"content": "做些什么？"}, "finish_reason": null}], "session_id": null}

data: {"choices": [{"index": 0, "delta": {}, "finish_reason": "stop", "usage": {"prompt_tokens": 9, "completion_tokens": 6, "total_tokens": 15}}], "session_id": null}
`;

const demo = `
const url = 'http://langchat.cn/v1/chat/completions';
const data = {
    "messages": [
        { "role": "user", "content": "你好" }
    ]
};

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
  },
  body: JSON.stringify(data)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok ' + response.statusText);
  }
  return response.json();
})
.then(jsonData => {
  console.log('Success:', jsonData);
})
.catch(error => {
  console.error('Error:', error);
});
`;

onMounted(() => {
  // 高亮所有代码块
  document.querySelectorAll('pre code').forEach((el) => {
    hljs.highlightElement(el as HTMLElement);
  });
});
</script>

<template>
  <el-scrollbar class="p-4 bg-white h-full overflow-auto rounded">
    <div class="flex flex-col gap-4">
      <div>
        <el-alert
          title="API URL（API接口格式遵循OpenAI格式）"
          type="info"
          :closable="false"
          show-icon
        />
        <div class="bg-[#18181c] mt-10px py-2 px-4 overflow-x-auto rounded">
          <pre><code class="javascript">{{ url }}</code></pre>
        </div>
      </div>

      <div>
        <el-alert
          title="Request"
          type="info"
          :closable="false"
          show-icon
        />
        <el-scrollbar class="bg-[#18181c] mt-10px py-2 px-4 overflow-x-auto rounded">
          <pre><code class="javascript">{{ request }}</code></pre>
        </el-scrollbar>
      </div>

      <div>
        <el-alert
          title="Response（Stream）"
          type="info"
          :closable="false"
          show-icon
        />
        <el-scrollbar class="mt-10px bg-[#18181c] py-2 px-4 rounded">
          <pre><code class="javascript">{{ response }}</code></pre>
        </el-scrollbar>
      </div>

      <div>
        <el-alert
          title="API请求示例"
          type="info"
          :closable="false"
          show-icon
        />
        <el-scrollbar class="mt-10px bg-[#18181c] py-2 px-4 rounded">
          <pre><code class="javascript">{{ demo }}</code></pre>
        </el-scrollbar>
      </div>
    </div>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
:deep(pre) {
  margin: 0;
  code {
    color: white;
  }
}

</style>
