add interaction api- ui

user-interface/src/App.vue

@@ -16,13 +16,13 @@ import AppTopbar from '@/components/AppTopbar.vue'
 </template>
 
 <style>
-/* #app {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
+#app {
+  background-color: #FFF4EA;
+  padding-inline: 5%;
+  height: 100vh;
 }
 
-main {
+/* main {
   height: 100%;
 }
 

user-interface/src/assets/variables.sass

@@ -0,0 +1,10 @@
+// variables.sass
+@import '~buetify/src/sass/variables'
+@import '~bulma/sass/utilities/initial-variables'
+
+// provide any variable overrides here
+
+@import '~bulma/sass/utilities/functions'
+@import '~bulma/sass/utilities/derived-variables'
+@import '~bulma/sass/utilities/controls'
+@import '~bulma/sass/utilities/mixins'

user-interface/src/components/CollectKnowledge.vue

@@ -1,11 +1,26 @@
 <script setup lang="ts">
+    import { BField, BInput, BButton } from "buefy";
+    import { apiClient } from "@/services/api";
 
+    let knowledgeText = ""
+    function postKnowledge(){
+        let knowlegde = {
+            content: knowledgeText,
+            uri: "wiki"
+        }
+        apiClient.post("api/v1/knowledges/", knowlegde)
+    }
 </script>
 
 <template>
 <div class="container">
     <h2>Collect Knowledge</h2>
+    <b-field label="Knowledge">
+         <b-input maxlength="1200" type="textarea" v-model="knowledgeText"></b-input>
+    </b-field>
+    <b-button type="is-primary" @click="postKnowledge" >Submit</b-button>
 </div>
+
 </template>
 
 <style scoped>

user-interface/src/main.ts

@@ -3,11 +3,14 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
-import './styles/global.css';
+
+import Buefy from "buefy";
+import "buefy/dist/css/buefy.css";
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(Buefy)
 
 app.mount('#app')

user-interface/src/services/api.ts

@@ -0,0 +1,74 @@
+class ApiClient {
+  private baseURL: string
+  private defaultHeaders: Record<string, string>
+
+  constructor(baseURL: string) {
+    this.baseURL = baseURL
+    this.defaultHeaders = {
+      'Content-Type': 'application/json',
+    }
+  }
+
+  private async request<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
+    const url = `${this.baseURL}${endpoint}`
+    const config: RequestInit = {
+      headers: { ...this.defaultHeaders, ...options.headers },
+      ...options,
+    }
+
+    let response
+
+    try {
+      response = await fetch(url, config)
+    } catch (error) {
+      if (error instanceof Error) {
+        throw new HTTPError(`Network error: ${error.message}`)
+      }
+      throw new HTTPError('Unknown network error')
+    }
+
+    if (response?.ok) {
+      return response.json()
+    }
+
+    const errorData = await response.json().catch(() => ({}))
+    throw new HTTPError(
+      errorData.message || `HTTP ${response.status}: ${response.statusText}`,
+      response.status,
+      response,
+    )
+  }
+
+  /**
+   * HTTP Get
+   * @param endpoint
+   * @returns
+   */
+
+  async get<T>(endpoint: string): Promise<T> {
+    return this.request<T>(endpoint, { method: 'GET' })
+  }
+
+  /**
+   * HTTP Post
+   * @param endpoint
+   * @param data
+   * @returns
+   */
+  async post<T>(endpoint: string, data: unknown): Promise<T> {
+    return this.request<T>(endpoint, { method: 'POST', body: JSON.stringify(data) })
+  }
+}
+
+class HTTPError extends Error {
+  constructor(
+    message: string,
+    private status: number | null = null,
+    private reponse: Response | null = null,
+  ) {
+    super(message)
+    this.name = 'HTTPError'
+  }
+}
+
+export const apiClient = new ApiClient(import.meta.env.VITE_API_URL)

user-interface/src/styles/global.css

@@ -1,4 +0,0 @@
-body {
-  background-color: #FFF4EA;
-  margin-inline: 5%;
-}