Add URLs for AI selection

backaind/ainteraction.py

@@ -29,7 +29,8 @@ def on_llm_new_token(self, token: str, **kwargs) -> None:
 
 
 @bp.route("/")
-def index():
+@bp.route("/<_ai>")
+def index(_ai=None):
     """Render the main ainteraction view."""
     is_public = g.get("user") is None
     ais = get_ai_data(only_public=is_public)

frontaind/ainteraction.ts

@@ -1,8 +1,18 @@
 import { createApp } from "vue";
+import { createRouter, createWebHistory } from "vue-router";
 import Ainteraction from "@/components/ainteraction/Ainteraction.vue";
+import AinteractionApp from "@/components/ainteraction/AinteractionApp.vue";
 
 const element = document.querySelector("#ainteraction");
 const ais = (element as HTMLElement).dataset.ais;
 const knowledges = (element as HTMLElement).dataset.knowledges;
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: "/:ai?", component: Ainteraction, props: { ais, knowledges } },
+  ],
+});
 
-createApp(Ainteraction, { ais, knowledges }).mount("#ainteraction");
+const app = createApp(AinteractionApp);
+app.use(router);
+app.mount("#ainteraction");

frontaind/components/ainteraction/AiSelection.vue

@@ -48,28 +48,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { computed } from "vue";
 import type { BasicAi } from "@/types/ainteraction/BasicAi";
 
-const { ais, disabled } = defineProps<{
+const { ais, disabled, selectedAi } = defineProps<{
   ais: BasicAi[];
   disabled: boolean;
+  selectedAi: BasicAi | null;
 }>();
 
 const emit = defineEmits(["select-ai"]);
-const selectedAi = ref<BasicAi | null>(null);
 
 const selectAi = (ai: BasicAi) => {
   emit("select-ai", ai);
-  selectedAi.value = ai;
 };
 
 const usesKnowledge = (ai: BasicAi) => {
   return ai.input_keys.includes("input_knowledge");
 };
 
 const needsKnowledge = computed(
-  () => !!selectedAi.value && usesKnowledge(selectedAi.value)
+  () => !!selectedAi && usesKnowledge(selectedAi)
 );
 
 const getAiColor = (ai: BasicAi) => {

frontaind/components/ainteraction/Ainteraction.vue

@@ -2,6 +2,7 @@
   <AiSelection
     :ais="parsedAis"
     :disabled="selectionDisabled"
+    :selected-ai="selectedAi"
     @select-ai="selectAi"
   />
   <KnowledgeSelection
@@ -23,12 +24,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, onMounted, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { io } from "socket.io-client";
 import AiSelection from "./AiSelection.vue";
 import KnowledgeSelection from "./KnowledgeSelection.vue";
 import MessageHistory from "./MessageHistory.vue";
 import MessageInput from "./MessageInput.vue";
+import { slugify } from "@/helpers/slugify";
 import type { BasicAi } from "@/types/ainteraction/BasicAi";
 import type { BasicKnowledge } from "@/types/ainteraction/BasicKnowledge";
 import type { Message } from "@/types/ainteraction/Message";
@@ -45,13 +48,45 @@ const parsedKnowledges: BasicKnowledge[] = JSON.parse(knowledges);
 const selectedAi = ref<BasicAi | null>(null);
 const selectedKnowledge = ref<BasicKnowledge | null>(null);
 
+const route = useRoute();
+const router = useRouter();
+
 const selectAi = (ai: BasicAi) => {
   selectedAi.value = ai;
+  router.push({ params: { ai: slugify(ai.name) } });
 };
 const selectKnowledge = (knowledge: BasicKnowledge) => {
   selectedKnowledge.value = knowledge;
 };
 
+const selectAiFromParams = (aiParam: string | string[]) => {
+  if (!aiParam) {
+    return;
+  }
+  if (Array.isArray(aiParam)) {
+    aiParam = aiParam[0];
+  }
+
+  let ai: BasicAi | undefined;
+  const aiParamAsNumber = parseInt(aiParam);
+  if (Number.isInteger(aiParamAsNumber)) {
+    ai = parsedAis.find((ai) => ai.id === aiParamAsNumber);
+  } else {
+    ai = parsedAis.find((ai) => slugify(ai.name) === aiParam);
+  }
+
+  if (ai) {
+    selectAi(ai);
+    clearMessages();
+  }
+};
+
+onMounted(async () => {
+  selectAiFromParams(route.params.ai);
+});
+
+watch(() => route.params.ai, selectAiFromParams);
+
 const needsKnowledge = computed(
   () => !!selectedAi.value?.input_keys.includes("input_knowledge")
 );

frontaind/components/ainteraction/AinteractionApp.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

frontaind/helpers/slugify.ts

@@ -0,0 +1,11 @@
+export function slugify(text: string): string {
+  return text
+    .normalize("NFKD") // normalize() using NFKD form converts accented characters
+    .toLowerCase() // Convert the string to lowercase letters
+    .trim() // Remove whitespace from both sides of the string
+    .replace(/\s+/g, "-") // Replace spaces with -
+    .replace(/[^\w\-]+/g, "") // Remove all non-word chars
+    .replace(/\_/g, "-") // Replace _ with -
+    .replace(/\-\-+/g, "-") // Replace multiple - with single -
+    .replace(/\-$/g, ""); // Remove trailing -
+}