118 lines
5.6 KiB
HTML
118 lines
5.6 KiB
HTML
{% extends "appbuilder/base.html" %}
|
|
|
|
{% block head_meta %}
|
|
{{ super() }}
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<link rel="stylesheet" href="{{ url_for('wingman.static', filename='css/wingman_chat.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Banner -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Airflow Wingman</h3>
|
|
</div>
|
|
<div class="alert alert-info" style="margin: 15px;">
|
|
<p><strong>{{ interface_messages.model_recommendation.title }}:</strong> {{ interface_messages.model_recommendation.content }}</p>
|
|
<hr style="margin: 10px 0;">
|
|
<p><strong>{{ interface_messages.security_note.title }}:</strong> {{ interface_messages.security_note.content }}</p>
|
|
<hr style="margin: 10px 0;">
|
|
<p><strong>{{ interface_messages.context_window.title }}:</strong> {{ interface_messages.context_window.content }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Sidebar -->
|
|
<div class="col-md-3">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Provider Selection</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
{% for provider_id, provider in models.items() %}
|
|
<div class="provider-section mb-3">
|
|
<h4 class="provider-name">{{ provider.name }}</h4>
|
|
{% for model in provider.models %}
|
|
<div class="radio model-option">
|
|
<label class="model-label" title="{{ model.description }}">
|
|
<input type="radio"
|
|
name="model"
|
|
value="{{ provider_id }}:{{ model.id }}"
|
|
{% if model.default %}checked{% endif %}
|
|
data-context-window="{{ model.context_window }}"
|
|
data-provider="{{ provider_id }}"
|
|
data-model-name="{{ model.name }}">
|
|
{{ model.name }}
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Model Name Input -->
|
|
<div class="panel-body" style="border-top: 1px solid #ddd; padding-top: 15px;">
|
|
<div class="form-group">
|
|
<label for="modelName">Model Name</label>
|
|
<input type="text" class="form-control" id="modelName" placeholder="Enter model name for OpenRouter" disabled>
|
|
<small class="form-text text-muted">Only required for OpenRouter provider</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Key Input -->
|
|
<div class="panel-body" style="border-top: 1px solid #ddd; padding-top: 15px;">
|
|
<div class="form-group">
|
|
<label for="api-key">API Key</label>
|
|
<input type="password"
|
|
class="form-control"
|
|
id="api-key"
|
|
placeholder="Enter API key for selected provider"
|
|
required
|
|
autocomplete="off">
|
|
<small class="text-muted">Your API key will be used for the selected provider</small>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Chat Window -->
|
|
<div class="col-md-9">
|
|
<div class="panel panel-default" style="height: calc(80vh - 250px); display: flex; flex-direction: column;">
|
|
<div class="panel-body" style="flex-grow: 1; overflow-y: auto; padding: 15px;" id="chat-messages">
|
|
<!-- Messages will be dynamically added here -->
|
|
</div>
|
|
<div class="panel-footer" style="padding: 15px; background-color: white;">
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
<button class="btn btn-default btn-block" type="button" id="refresh-button" title="Start a new chat">
|
|
<i class="fa fa-refresh"></i> New Chat
|
|
</button>
|
|
</div>
|
|
<div class="col-md-10">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="message-input" placeholder="Type your message...">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-primary" type="button" id="send-button">
|
|
<i class="fa fa-paper-plane"></i> Send
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>
|
|
<script src="{{ url_for('wingman.static', filename='js/wingman_chat.js') }}"></script>
|
|
{% endblock %}
|