docs: update documentation for a more inclusive environment and added japanese and chinese documentation

src/renderer/src/assets/styles/index.scss

@@ -136,6 +136,7 @@ html,
 body,
 #root {
   height: 100%;
+  width: 100%;
   margin: 0;
 }
 

src/renderer/src/pages/home/HomePage.tsx

@@ -52,6 +52,7 @@ const Container = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
+  max-width: calc(100vw - var(--sidebar-width));
 `
 
 const ContentContainer = styled.div`

src/renderer/src/pages/home/Messages/Messages.tsx

@@ -36,7 +36,7 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
     const showRightTopics = showTopics && topicPosition === 'right'
     const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
     const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : ''
-    return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth}`
+    return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth} - 5px)`
   }, [showAssistants, showTopics, topicPosition])
 
   const onSendMessage = useCallback(
@@ -220,7 +220,12 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
   }, [assistant, messages])
 
   return (
-    <Container id="messages" style={{ maxWidth }} key={assistant.id} ref={containerRef} right>
+    <Container
+      id="messages"
+      style={{ maxWidth }}
+      key={assistant.id}
+      ref={containerRef}
+      right={topicPosition === 'left'}>
       <Suggestions assistant={assistant} messages={messages} lastMessage={lastMessage} />
       {lastMessage && <MessageItem key={lastMessage.id} message={lastMessage} lastMessage />}
       {reverse([...messages]).map((message, index) => (
@@ -245,7 +250,6 @@ const Container = styled(Scrollbar)`
   background-color: var(--color-background);
   padding-bottom: 20px;
   overflow-x: hidden;
-  margin-right: 3px;
 `
 
 export default Messages

src/renderer/src/pages/home/Tabs/Topics.tsx

@@ -36,7 +36,7 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
   const { assistant, removeTopic, moveTopic, updateTopic, updateTopics } = useAssistant(_assistant.id)
   const { t } = useTranslation()
   const generating = useAppSelector((state) => state.runtime.generating)
-  const { showTopicTime } = useSettings()
+  const { showTopicTime, topicPosition } = useSettings()
 
   const borderRadius = showTopicTime ? 12 : 17
 
@@ -178,7 +178,7 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
   )
 
   return (
-    <Container>
+    <Container right={topicPosition === 'right'}>
       <DragableList list={assistant.topics} onUpdate={updateTopics}>
         {(topic) => {
           const isActive = topic.id === activeTopic?.id

src/renderer/src/pages/home/Tabs/index.tsx

@@ -147,7 +147,8 @@ const HomeTabs: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssistant,
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  width: var(--assistants-width);
+  max-width: var(--assistants-width);
+  min-width: var(--assistants-width);
   height: calc(100vh - var(--navbar-height));
   overflow: hidden;
   .collapsed {