some css fix and websocket fix for item update

src/components/widget/chatWidget.css

@@ -1,16 +1,89 @@
-.chatWidget{
-    display: flex;
-    flex-direction: column;
-}
-
-.convcard {
-    background-color: brown;
+.chatWidget {
+  margin :5px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  background: var(--card);
+  border-radius: 10px;
+  overflow: hidden;
 }
 
 .convlist {
-    
-    display: flex;
-    flex-direction: row;
-    align-items: right;
-    background-color: darkcyan;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  overflow-y: auto;
+  height: 20%;
+}
+
+.convcard {
+  padding: 0.5rem 0.75rem;
+  background: var(--panel);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.convcard:hover {
+  background: var(--border);
+}
+
+.senderBox{
+  display: flex;
+  height: 10%;
+}
+
+.senderBox * {
+border: 0px;
+padding: 0px;
+
+}
+
+.textbox{
+  
+width: 70%;
+}
+
+.sendbutton{
+  width: 30%;
+}
+
+
+.messageCard {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  background: var(--messageCard);
+  overflow-y: auto;
+}
+
+/* Messages */
+.msg {
+  max-width: 70%;
+  padding: 0.5rem 0.75rem;
+  border-radius: 10px;
+  font-size: 0.9rem;
+}
+
+.msg--mine {
+  align-self: flex-end;
+  background: var(--accent);
+  color: white;
+}
+
+.msg--theirs {
+  align-self: flex-start;
+  background: var(--panel);
+}
+
+.createConvBox {
+  display: flex;
+  justify-content: space-around;
+}
+
+.createConvBox > * {
+
+
 }