TTS and STT Support for PyKlatchat

chat_client/blueprints/components.py

@@ -22,19 +22,38 @@
 from starlette.requests import Request
 from starlette.templating import Jinja2Templates
 
+from chat_client.client_config import app_config
+from utils.template_utils import callback_template
+
 router = APIRouter(
     prefix="/components",
     responses={'404': {"description": "Unknown endpoint"}},
 )
 
-component_templates = Jinja2Templates(directory=os.environ.get('TEMPLATES_DIR', "chat_client/templates"))
+
+@router.get('/user_message')
+async def render_user_message(request: Request, is_audio: bool = False, message_id: str = ''):
+    """ Handling requests for rendering user message HTML
+        :param request: Fast API request object
+        :param is_audio: is audio message (defaults to false)
+        :param message_id: id of the message to render (optional)"""
+    # fetching audio message template if required
+    template_context = {}
+    template_name = 'user_message'
+    if is_audio and message_id:
+        template_name = 'user_message_audio'
+        template_context['audio_url'] = f'{app_config["SERVER_URL"]}/files/get_audio/{message_id}'
+    return callback_template(request=request, template_name=template_name, context=template_context)
 
 
 @router.get('/{template_name}')
-async def chats(request: Request, template_name: str):
+async def render_template(request: Request, template_name: str):
     """
-        Renders chats page HTML as a response related to the input request
+        Base renderer by the provided HTML template name
+
+        :param request: FastAPI request object
+        :param template_name: name of template to fetch
+
         :returns chats conversation response
     """
-
-    return component_templates.TemplateResponse(f"components/{template_name}.html", {"request": request})
+    return callback_template(request=request, template_name=template_name)

chat_client/static/css/chat.css

@@ -7,7 +7,8 @@ body{
 }
 
 .chat-list li {
-    margin-bottom: 10px;
+    padding-bottom: 10px!important;
+    max-height: 250px!important;
     overflow: auto;
     color: #ffffff;
 }
@@ -45,7 +46,7 @@ body{
     display: inline-block;
     padding: 10px 20px;
     position: relative;
-    max-width: 100%!important;
+    max-width: 70%!important;
     font-size: 14px!important;
 }
 
@@ -55,14 +56,6 @@ body{
     overflow-y: auto!important;
 }
 
-/*.chat-list .chat-message:before {*/
-/*    content: "";*/
-/*    position: absolute;*/
-/*    top: 15px;*/
-/*    width: 0;*/
-/*    height: 0;*/
-/*}*/
-
 .chat-list .chat-message h5 {
     margin: 0 0 5px 0;
     font-weight: 600;
@@ -81,11 +74,23 @@ body{
     width: 70%;
 }
 
-/*.chat-list .in .chat-message:before {*/
-/*    left: -12px;*/
-/*    border-bottom: 20px solid transparent;*/
-/*    border-right: 20px solid #5a99ee;*/
-/*}*/
+.chat-message-actions {
+    height: 80px;
+    width: 25%!important;
+    /*background-color: black;*/
+}
+
+.icon-volume-up {
+  color: black;
+}
+
+.fa-lg {
+    font-size: 18px;
+}
+
+/*
+    Out message styling
+ */
 
 .chat-list .out .chat-img {
     float: right;
@@ -97,19 +102,30 @@ body{
     margin-right: 5px!important;
 }
 
-.chat-list .in .chat-body {
-    margin-left: 5px!important;
+.chat-list .out .chat-message-actions {
+    float: right;
 }
 
 .chat-list .out .chat-message {
     background: #fc6d4c;
+    float: right;
 }
 
-/*.chat-list .out .chat-message:before {*/
-/*    right: -12px;*/
-/*    border-bottom: 20px solid transparent;*/
-/*    border-left: 20px solid #fc6d4c;*/
-/*}*/
+/*
+    In message styling
+ */
+
+.chat-list .in .chat-body {
+    margin-left: 5px!important;
+}
+
+.chat-list .in .chat-message {
+    float: left;
+}
+
+.chat-list .in .chat-message-actions {
+    float: left;
+}
 
 .card .card-header:first-child {
     -webkit-border-radius: 0.3rem 0.3rem 0 0;
@@ -260,4 +276,18 @@ body{
     left: 35%;
     top: 40%;
     z-index: 999;
+}
+
+.message-audio {
+    max-height: 100%;
+    max-width: 100%;
+    margin: auto;
+    object-fit: contain;
+}
+
+.stt-content{
+    display: none;
+    overflow-y: auto;
+    max-height: 150px!important;
+    min-height: 25px!important;
 }

chat_client/static/js/builder_utils.js

@@ -23,22 +23,23 @@ function fetchTemplateContext(html, templateContext){
  * Builds HTML from passed params and template name
  * @param templateName: name of the template to fetch
  * @param templateContext: properties from template to fetch
+ * @param requestArgs: request string arguments (optional)
  * @returns built template string
  */
-async function buildHTMLFromTemplate(templateName, templateContext = {}){
-    if(!configData['DISABLE_CACHING'] && loadedComponents.hasOwnProperty(templateName)){
+async function buildHTMLFromTemplate(templateName, templateContext = {}, requestArgs=''){
+    if(!configData['DISABLE_CACHING'] && loadedComponents.hasOwnProperty(templateName) && !requestArgs){
         const html = loadedComponents[templateName];
         return fetchTemplateContext(html, templateContext);
     }else {
-        return await fetch(`${configData['currentURLBase']}/components/${templateName}`)
+        return await fetch(`${configData['currentURLBase']}/components/${templateName}?${requestArgs}`)
             .then((response) => {
                 if (response.ok) {
                     return response.text();
                 }
                 throw `template unreachable (HTTP STATUS:${response.status}: ${response.statusText})`
             })
             .then((html) => {
-                if (!(configData['DISABLE_CACHING'] || loadedComponents.hasOwnProperty(templateName))) {
+                if (!(configData['DISABLE_CACHING'] || loadedComponents.hasOwnProperty(templateName) || requestArgs)) {
                     loadedComponents[templateName] = html;
                 }
                 return fetchTemplateContext(html, templateContext);