create-tether-app 0.1.0

package/template/frontend/components/ChatMessage.css

@@ -0,0 +1,206 @@
+.message {
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  max-width: 80%;
+}
+
+.message-user {
+  background-color: var(--color-primary);
+  color: white;
+  align-self: flex-end;
+}
+
+.message-assistant {
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  align-self: flex-start;
+}
+
+.message-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.25rem;
+  font-size: 0.75rem;
+}
+
+.message-role {
+  font-weight: 600;
+}
+
+.message-user .message-role {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.message-assistant .message-role {
+  color: var(--color-text-muted);
+}
+
+.message-time {
+  opacity: 0.6;
+}
+
+.message-content {
+  word-break: break-word;
+}
+
+.message-user .message-content {
+  white-space: pre-wrap;
+}
+
+/* Markdown styles for assistant messages */
+.message-assistant .message-content p {
+  margin: 0 0 0.5rem 0;
+}
+
+.message-assistant .message-content p:last-child {
+  margin-bottom: 0;
+}
+
+.message-assistant .message-content code {
+  font-family: var(--font-mono, 'SF Mono', Monaco, 'Courier New', monospace);
+  font-size: 0.875em;
+  background: rgba(0, 0, 0, 0.1);
+  padding: 0.125rem 0.25rem;
+  border-radius: 3px;
+}
+
+.message-assistant .message-content pre {
+  margin: 0.5rem 0;
+  padding: 0.75rem;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: var(--radius);
+  overflow-x: auto;
+}
+
+.message-assistant .message-content pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.message-assistant .message-content ul,
+.message-assistant .message-content ol {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+}
+
+.message-assistant .message-content li {
+  margin: 0.25rem 0;
+}
+
+.message-assistant .message-content h1,
+.message-assistant .message-content h2,
+.message-assistant .message-content h3 {
+  margin: 0.75rem 0 0.5rem 0;
+  font-weight: 600;
+}
+
+.message-assistant .message-content h1 {
+  font-size: 1.25rem;
+}
+
+.message-assistant .message-content h2 {
+  font-size: 1.125rem;
+}
+
+.message-assistant .message-content h3 {
+  font-size: 1rem;
+}
+
+.message-assistant .message-content blockquote {
+  margin: 0.5rem 0;
+  padding-left: 0.75rem;
+  border-left: 3px solid var(--color-border);
+  color: var(--color-text-muted);
+}
+
+.message-assistant .message-content a {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+.message-assistant .message-content hr {
+  margin: 0.75rem 0;
+  border: none;
+  border-top: 1px solid var(--color-border);
+}
+
+/* Thinking section for thinking models (e.g., Qwen3) */
+.message-thinking {
+  margin-bottom: 0.5rem;
+  border-radius: 6px;
+  background: rgba(147, 51, 234, 0.08);
+  border: 1px solid rgba(147, 51, 234, 0.2);
+  overflow: hidden;
+}
+
+.thinking-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: none;
+  border: none;
+  color: rgb(147, 51, 234);
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.15s;
+}
+
+.thinking-toggle:hover {
+  background: rgba(147, 51, 234, 0.05);
+}
+
+.thinking-chevron {
+  font-size: 0.625rem;
+  transition: transform 0.15s;
+}
+
+.thinking-chevron.expanded {
+  transform: rotate(0deg);
+}
+
+.thinking-content {
+  padding: 0 0.75rem 0.75rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+  border-top: 1px solid rgba(147, 51, 234, 0.15);
+}
+
+.thinking-content p {
+  margin: 0.375rem 0;
+}
+
+.thinking-content p:first-child {
+  margin-top: 0.5rem;
+}
+
+.thinking-content p:last-child {
+  margin-bottom: 0;
+}
+
+/* Message images */
+.message-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.message-image {
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 6px;
+  object-fit: contain;
+  cursor: pointer;
+}
+
+.message-image:hover {
+  opacity: 0.9;
+}

package/template/frontend/components/ChatMessage.tsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import Markdown from "react-markdown";
+import type { ChatMessage as ChatMessageType } from "../hooks/useApi";
+import "./ChatMessage.css";
+
+interface ChatMessageProps {
+  message: ChatMessageType;
+}
+
+export function ChatMessage({ message }: ChatMessageProps) {
+  const isUser = message.role === "user";
+  const [showThinking, setShowThinking] = useState(false);
+
+  return (
+    <div className={`message ${isUser ? "message-user" : "message-assistant"}`}>
+      <div className="message-header">
+        <span className="message-role">{isUser ? "You" : "Assistant"}</span>
+        {message.timestamp && (
+          <span className="message-time">
+            {new Date(message.timestamp).toLocaleTimeString()}
+          </span>
+        )}
+      </div>
+      {message.images && message.images.length > 0 && (
+        <div className="message-images">
+          {message.images.map((img, index) => (
+            <img
+              key={index}
+              src={`data:image/jpeg;base64,${img}`}
+              alt={`Attached ${index + 1}`}
+              className="message-image"
+            />
+          ))}
+        </div>
+      )}
+      {message.thinking && (
+        <div className="message-thinking">
+          <button
+            className="thinking-toggle"
+            onClick={() => setShowThinking(!showThinking)}
+            aria-expanded={showThinking}
+          >
+            <span
+              className={`thinking-chevron ${showThinking ? "expanded" : ""}`}
+            >
+              {showThinking ? "\u25BC" : "\u25B6"}
+            </span>
+            Thinking
+          </button>
+          {showThinking && (
+            <div className="thinking-content">
+              <Markdown>{message.thinking}</Markdown>
+            </div>
+          )}
+        </div>
+      )}
+      <div className="message-content">
+        {isUser ? message.content : <Markdown>{message.content}</Markdown>}
+      </div>
+    </div>
+  );
+}

package/template/frontend/components/ModelStatus.css

@@ -0,0 +1,62 @@
+.model-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.status-text {
+  font-weight: 500;
+}
+
+.model-name {
+  font-family: var(--font-mono, monospace);
+  font-size: 0.75rem;
+  background: var(--color-surface, rgba(0, 0, 0, 0.1));
+  padding: 0.125rem 0.375rem;
+  border-radius: 4px;
+}
+
+.backend-type {
+  font-size: 0.75rem;
+  opacity: 0.7;
+  text-transform: capitalize;
+}
+
+.model-select {
+  font-family: var(--font-mono, monospace);
+  font-size: 0.75rem;
+  background: var(--color-surface, #f3f4f6);
+  border: 1px solid var(--color-border, #e5e7eb);
+  padding: 0.25rem 1.5rem 0.25rem 0.5rem;
+  border-radius: 6px;
+  color: inherit;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.35rem center;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.model-select:hover:not(:disabled) {
+  border-color: var(--color-primary, #3b82f6);
+}
+
+.model-select:focus {
+  outline: none;
+  border-color: var(--color-primary, #3b82f6);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.model-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/template/frontend/components/ModelStatus.tsx

@@ -0,0 +1,103 @@
+import { useState } from "react";
+import type {
+  ConnectionStatus,
+  HealthResponse,
+  ModelsResponse,
+  SwitchModelResponse,
+} from "../hooks/useApi";
+import "./ModelStatus.css";
+
+interface ModelStatusProps {
+  status: ConnectionStatus;
+  health: HealthResponse | null;
+  modelInfo: ModelsResponse | null;
+  onModelChange?: (model: string) => Promise<SwitchModelResponse>;
+}
+
+export function ModelStatus({
+  status,
+  health,
+  modelInfo,
+  onModelChange,
+}: ModelStatusProps) {
+  const [isSwitching, setIsSwitching] = useState(false);
+
+  const getStatusColor = () => {
+    switch (status) {
+      case "connected":
+        return "var(--color-success)";
+      case "connecting":
+        return "var(--color-warning)";
+      case "error":
+      case "disconnected":
+        return "var(--color-error)";
+    }
+  };
+
+  const getStatusText = () => {
+    if (isSwitching) return "Switching...";
+    switch (status) {
+      case "connected":
+        return health?.model_loaded ? "Ready" : "Connected";
+      case "connecting":
+        return "Connecting...";
+      case "error":
+        return "Error";
+      case "disconnected":
+        return "Disconnected";
+    }
+  };
+
+  const formatBackend = (backend: string) => {
+    return backend.charAt(0).toUpperCase() + backend.slice(1);
+  };
+
+  const handleModelChange = async (
+    event: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    const newModel = event.target.value;
+    if (!onModelChange || newModel === modelInfo?.current_model) return;
+
+    setIsSwitching(true);
+    try {
+      await onModelChange(newModel);
+    } catch (error) {
+      console.error("Failed to switch model:", error);
+    } finally {
+      setIsSwitching(false);
+    }
+  };
+
+  const hasMultipleModels = modelInfo?.models && modelInfo.models.length > 1;
+
+  return (
+    <div className="model-status">
+      <span
+        className="status-indicator"
+        style={{ backgroundColor: getStatusColor() }}
+      />
+      <span className="status-text">{getStatusText()}</span>
+      {modelInfo && hasMultipleModels && onModelChange ? (
+        <select
+          className="model-select"
+          value={modelInfo.current_model || ""}
+          onChange={handleModelChange}
+          disabled={isSwitching || status !== "connected"}
+        >
+          {modelInfo.models.map((model) => (
+            <option key={model} value={model}>
+              {model}
+            </option>
+          ))}
+        </select>
+      ) : modelInfo?.current_model ? (
+        <span className="model-name" title={`Backend: ${modelInfo.backend}`}>
+          {modelInfo.current_model}
+        </span>
+      ) : null}
+      {modelInfo?.backend && (
+        <span className="backend-type">{formatBackend(modelInfo.backend)}</span>
+      )}
+    </div>
+  );
+}